How to write php code in hbs?

I have created a custom layout in a sidecar module "Accounts" and display a simple View "Hello World" on the screen. Now what I want to do is that I want to fetch all the accounts records from the database and display in that custom layout. I know that in order to fetch data you have to use either sugarQuery or sqlQuery. And what I want to know is How can I use php code in hbs template? Thanks in advance! 

  • You don't use PHP inside the hbs you build your data in javascript with an api call and then use hbs to format your output.

    Perhaps the best way to describe it is with an example.

    Take the example of a custom dashlet. I have a custom module ContactDetails and when I'm in Contacts or Accounts module I want the dashlet to show the contact details for the Contact or Account I'm on.

    I use Javascript to build the "resources" for my dashlet:

    ({
      tagName: 'ul',
      className: 'dashlet-ContactDetails',
      plugins: ['Dashlet'],
      resources: {},
      refreshClicked: function() {
       this._renderHtml();
      },
      _renderHtml: function(){
        var self = this,
            category_list = app.lang.getAppListStrings('contact_details_category_c_list');
            filter = '';
        self.resources = new Object();
        //build the data
        var id = self.model.get('id'),
            module = self.module;
        if(module == 'Contacts'){
          filter_params = [{'contact_id_c':id}];
        }else if(module == 'Accounts'){
          filter_params = [{'account_id_c':id}];
        }
        var contactDetails = app.data.createBeanCollection('conde_Contact_Details');
        var fetchedDetails = contactDetails.fetch({
          filter: filter_params,
        });
        fetchedDetails.xhr.done(function(data){
            _.each(data.records, function(rec){
                var
                    link= '',
                    teaser = '',
                    url = 'index.php?model=Home&action-index#conde_Contact_Details/'+rec.id,
                    link = rec.name,
                    icon = 'fa-link'
                    color = 'green',
                    teaser = category_list[rec.categorization];
                self.resources[rec.id]={
                   'color':color,
                   'icon':icon,
                   'link':link,
                   'teaser':teaser,
                   'url':url,
                };
                self._super('_renderHtml');
            });
        });
      },
    })

    In this example I create a collection (using app.data.createBeanCollection) from the 'conde_Contact_Details' module and filter it by the contact id or account id (both exist in the module in question).

    With that collection, I build the self.resources with the data from each of the records.

    Now in the hbs I can loop through each of the resources and build the output:

    {{!--
    */ formats output for Contact Details  dashlet
    --}}
    {{#each resources}}
      <li class="resource {{css_class}}">
        <a href="{{url}}" target="_blank"><span class="label label-module label-module-md pull-left {{color}}"><i class="icon-2x {{icon}}"></i></span></a>
        <div class="resource-info">
            <a href="{{url}}" target="_blank">{{str link module}}</a>
            <p class="details">{{str teaser module}}</p>
        </div>
      </li>
    {{else}}
          <div class="block-footer">{{str "LBL_NO_DATA_AVAILABLE"}}</div>
    {{/each}}

    notice the #each which loops through one resource at a time, inside the #each I can refrence the color, icon, link, teaser, and url for that particular resource.

    There are probably better ways of doing this, but it should give you a picture of how to begin.

    Look for a view that resembles what you are trying to achieve in Sugar, check the code and see how they built it. That usually helps me find solutions. The code I shared above, for example, was based off of the learning resources dashlet:

    clients/base/views/learning-resources/

     

    Hope this helps,
    FrancescaS

  • Hi Francesca Shiekh

    Thanks for your time. But can you please explain what is going on in the code and how it will display all the record and I don't think I need to use the collection. Can you please show the way how it can be done in my example. Thanks in advance. 

  • Good morning Hijab Fatima,

    The example I gave was trying to explain to you how the concept of hbs works, and where the data is fetched. If you are fetching all accounts you will likely do so using a Collection.

    From the little you have told us about your final goal, you are reproducing the Accounts List View.

    Can you be more specific and explain what you are trying to achieve?

    thank you,
    FrancescaS

  • Francesca Shiekh

    Thanks for taking the time. Yes just as you said I'm trying to display a list View all the records in one go. But I didn't get what your code is trying to do. 

  • My code was intended as an example to show you how you can use javascript to get the data you need into a Collection, and then use the hbs to display it.

    I've not tried to reproduce list view before, I've never had a need for that, so I don't have specific code to share with you.

    If you decide to reproduce the list view I suggest you look at the original list view code and see if you can understand what they are doing there. Reverse engineering the Sugar code is how I get most things done, there is a lot to learn from their code:

     

    clients/base/views/list/list.js

    and

    clients/base/views/list/list.hbs

     

     

    Sorry I could not be of more help,

    FrancescaS

     

  • Francesca Shiekh

    it's ok. Your help is more than enough. Thanks for taking the time.