AnsweredAssumed Answered

Extending Sugar Accounts Record View

Question asked by jclark@enhanced.co.uk on Apr 27, 2015
Latest reply on Jun 4, 2015 by jclark@enhanced.co.uk

Like • Show 0 Likes0
Comment • 14

I'm struggling with what I'm sure is very very simple indeed!!

My final goal is to Append a table with some data in it at the bottom of the Accounts record view.

Upon reading this article "what you need can be accomplished using a single file".

http://developer.sugarcrm.com/2014/02/10/extending-sugar-7-record-view/

I have the following code, but am not seeing anything in the console logs in Chrome.

({    extendsFrom: 'RecordView',
 
    /**
     * Some extra functionality
     */
    initialize: function (options) {
        console.log('hi jon');
        this._super('initialize', [options]);
    },
 
    _dispose: function() {
        //additional stuff before calling the core create _dispose goes here
        this._super('_dispose');
    }
})

This file is in custom/modules/Accounts/clients/base/views/record/record.js

Yes - I have done a repair and rebuild!!

Can someone tell me where I've gone wrong!?

Thanks Loads,
Jon

Sugar version: 7.2.1 Ultimate

No one else has this question

Outcomes

14 Replies

Matt Marum Apr 27, 2015 5:58 PM
Mark Correct
Correct Answer
So you are probably running into issue where the JavaScript is being cached within your browser. Quick Repair will rebuild the server side caches but it doesn't always seem to force a refresh of new JavaScript sources in your browser.

Try clearing your browser cache, opening a new private/incognito window, or checking the "Disable Cache (while DevTools is open)" setting in your Chrome Dev Tools. You can find the settings by clicking the gear icon.
Like • Show 0 Likes0
Actions

jclark@enhanced.co.uk Apr 28, 2015 6:04 AM

Hi Matthew, thanks for the reply, but unfortunately, that's not it.

I can see in Chrome sources cache->javascript/base->components_xxxxx my code is in there.

// Create-actions View (base)   extendsFrom:'CreateView',initialize:function(options){this.plugins=_.union(this.plugins||[],["ContactsPortalMetadataFilter"]);this._super("initialize",[options]);this.removePortalFieldsIfPortalNotActive(this.meta);}}) },  "preview": {"controller": /*********************************************************************************       * By installing or using this file, you are confirming on behalf of the entity       * subscribed to the SugarCRM Inc. product ("Company") that Company is bound by       * the SugarCRM Inc. Master Subscription Agreement (“MSA”), which is viewable at:       * http://www.sugarcrm.com/master-subscription-agreement       *       * If Company is not bound by the MSA, then by installing or using this file       * you are agreeing unconditionally that Company will be bound by the MSA and       * certifying that you have authority to bind Company accordingly.       *       * Copyright (C) 2004-2014 SugarCRM Inc.  All rights reserved.       ********************************************************************************/  ({   // Preview View (base)   extendsFrom:'PreviewView',initialize:function(options){this.plugins=_.union(this.plugins||[],["ContactsPortalMetadataFilter"]);this._super("initialize",[options]);},_previewifyMetadata:function(meta){meta=this._super("_previewifyMetadata",[meta]);this.removePortalFieldsIfPortalNotActive(meta);return meta;}}) }  }}  ,  "layouts": {}    },    "Accounts":{"fieldTemplates": {}  ,  "views": {  "base": {  "customRecord": {"controller": ({   // CustomRecord View (base)         extendsFrom: 'RecordView',         /**       * Some extra functionality       */      initialize: function (options) {          console.log('hi jon');          this._super('initialize', [options]);      },         _dispose: function() {          //additional stuff before calling the core create _dispose goes here          this._super('_dispose');      }  }) },

Also in the custom/modules/Accounts/clients/base/views/record directory there is record.php I deleted this, and the view completely changed, I'm guessing this file was created by studio. Maybe somewhere in a php file I need to reference the record.js file?

Actions

Maulik Shah Apr 28, 2015 6:50 AM
Mark Correct
Correct Answer
Hi jon,

Use 'AccountsRecordView' instead 'RecordView' .
check and let us know if it helps you.

see this code.

({ extendsFrom: 'AccountsRecordView',
initialize: function (options) {
this._super('initialize', [options]);
//extend the record view definition, so we include actions and the module specific fields.
this.meta = _.extend({}, app.metadata.getView(this.module, 'record'), this.meta);
},
_render: function () {
this._super('_render');
}
})

Hope it helps you.

Thanks.
2 people found this helpful
Like • Show 2 Likes2
Actions
jclark@enhanced.co.uk Apr 28, 2015 7:26 AM
Mark Correct
Correct Answer
Progress with that, it is definitely running that code now, thank you!

It doesn't look as though
```
this._super('initialize', [options]);
```
is working properly though... I get a blank view, I was hoping to see the original view, which I could then append some HTML to. Perhaps with the

What would be great is if I could reference a second hbs template in the custom folder where I can put my appended HTML, rather than doing it all in JS.

I tried with and without your this.meta = _.extend code.

Thanks Loads,
Jon
Like • Show 0 Likes0
Actions
Matt Marum Apr 28, 2015 3:12 PM
Mark Correct
Correct Answer
Is this blank because the Handlebars template isn't being loaded for some reason? Check to see the value of this.template. This blog post might also be helpful since it explains the interrelationships between Sugar metadata and Handlebars templates.

http://developer.sugarcrm.com/2015/04/06/how-type-and-name-attributes-affect-sugar-7-views/

That record.php file was probably created by Sugar Studio. So if you had any custom fields that you added to the Record view then deleting this file would have removed them.

You can add extra HBS files which get pulled down with the metadata. You can then use a partial or inject the HTML directly.

You can retrieve any Handlebars template using app.template.get(templateName); See template.js in Sidecar for usage details.

Lastly, if you keep having problems and have access to 7.5 you might try it there too and see if that helps.
Like • Show 0 Likes0
Actions
jclark@enhanced.co.uk May 7, 2015 12:52 PM
Mark Correct
Correct Answer
Hi,

Thank you for your comments, I'm still struggling I'm afraid. The parent template is now loading fine, so that issue was probably the JS caching funnily enough.

To remind on the desired outcome: customise the Accounts record view, so that it will load the existing accounts record view, and then append HTML from a separate hbs file.

I'm now in a good position to append my custom html to the standard view I feel it's just achieving that. I'm still a bit confused on the relationship between the metadata and controller. From reading Matthew's suggested article, I attempted to enter in:
```
'type' => 'customrecord',  'name' => 'customrecord',  'template' => 'customrecord',
```
after all the button definition array in the record.php metadata file to no avail.

I have 3 files in custom/modules/Accounts/clients/base/views/record record.js (the controller) customrecord.hbs and record.php; it is the customrecord.hbs I'm trying to append to the existing view.

so in record.js:
```
({      extendsFrom: 'AccountsRecordView',         /**       * Some extra functionality       */      initialize: function (options) {          console.log('hi jono');          //original view seems to be rendering now?          this._super('initialize', [options]);          //extend the record view definition, so we include actions and the module specific fields.          this.meta = _.extend({}, app.metadata.getView(this.module, 'record'), this.meta);          app.template.getView(this.module, 'customrecord');          console.log(app.template.getView(this.module, 'customrecord'));          console.log(this.template);        },         _dispose: function() {          //additional stuff before calling the core create _dispose goes here          this._super('_dispose');      }  })
```
I tried various variations on app.template.getView, but couldn't find anywhere that referenced a specific file, rather this.x.
this.template produces:
```
function (n,i){i=i||{};var s=i.partial?i:t,o,u;i.partial||(o=i.helpers,u=i.partials);var a=e.call(r,s,n,o,u,i.data);return i.partial||t.VM.checkRevision(r.compilerInfo),a}
```
which doesn't seem very helpful. Similarly in articles I've seen suggestions to inspect the Handlebars.templates namespace, which produces a similarly unhelpful object. Same goes for SUGAR.App.view.views;

This looks like exactly what I need to do https://gist.github.com/mmarum-sugarcrm/8744135http://developer.sugarcrm.com/2014/02/10/extending-sugar-7-record-view/ but I don't understand how it's working, argh!

Thanks Loads!!
Jon
Like • Show 0 Likes0
Actions
jclark@enhanced.co.uk May 29, 2015 12:50 PM
Mark Correct
Correct Answer
I still need to get this working unfortunately! Any help would be much appreciated, even if it's just my confusion in inspecting the namespaces through chrome console.

Thanks Loads,
Jon
Like • Show 0 Likes0
Actions
Matt Marum May 29, 2015 1:10 PM
Mark Correct
Correct Answer
The template that you see there is the compiled Handlebars template. So it will look like a JavaScript function when you inspect it. Calling it with the appropriate parameters would return an HTML string.

http://handlebarsjs.com/

Look at the example here.

https://gist.github.com/mmarum-sugarcrm/8657382#file-custom_clients_base_views_my-record_my-record-j...

You can override the _renderHTML function to inject your HTML from your template. Basically, you just fetch your compiled custom template (which is a function), then call that function to return an HTML string, then append it to the DOM.
Like • Show 1 Like1
Actions
jclark@enhanced.co.uk Jun 2, 2015 2:41 PM
Mark Correct
Correct Answer
Awesome, I started again, and I just have the single record.js file which is working great.

Could I just ask you to explain this:
```
var myAddition = app.template.get("my-record.mine"); 
```
```
this.$el.prepend(myAddition());  
```
I get a "myAddition is not a function" error.

I have mine.hbs in custom/modules/base/views/record/mine.hbs (in the same directory as record.js)

All the resources on hbs seem to be where the hbs is within a <script> tag

Thanks :D
Jon
Like • Show 0 Likes0
Actions
Matt Marum Jun 2, 2015 4:20 PM
Mark Correct
Correct Answer
app.template.get() is a convenience function used by Sidecar's template manager for retrieving compiled Handlebars templates. In my example, I had a custom view and an extra handlebars template. So my extra template was declared under my custom view's namespace.

If you call the following from your JavaScript console, you should see the list of Handlebars templates that came down in Sugar metadata.
```
Handlebars.templates; 
```
One of them will be yours. From where you say you put it, I bet you'll find it at
```
app.template.get("record.mine");
```
Like • Show 2 Likes2
Actions
jclark@enhanced.co.uk Jun 3, 2015 7:23 AM
Mark Correct
Correct Answer
Ah OK, only my template doesn't seem to be available under Handlebars.templates.

If I change mine.hbs to record.hbs, then it is available under record.Accounts but the problem is that the original template doesn't then load - it loads the custom record.hbs template instead.

Maybe I need to add it to a metadata file somewhere, although you've not done that on your example :S
Like • Show 0 Likes0
Actions
- jclark@enhanced.co.uk @ jclark@enhanced.co.uk on Jun 3, 2015 7:44 AM
  Mark Correct
  Correct Answer
  I even tried adding another .hbs file up a level in custom/modules/Accounts/clients/base but that couldn't be seen in Handlebars.templates either.
  Like • Show 0 Likes0
  Actions
- jclark@enhanced.co.uk @ jclark@enhanced.co.uk on Jun 4, 2015 7:07 AM
  Mark Correct
  Correct Answer
  I also tried putting the hbs in its own folder so custom/modules/Accounts/clients/base/myrecord/mytemplate.hbs.
  I also tried renaming the above to record.hbs, neither of which show up in Handlebars.templates. *facepalm*
  Like • Show 0 Likes0
  Actions
jclark@enhanced.co.uk Jun 16, 2015 6:09 AM
Mark Correct
Correct Answer
I found that if I changed custom/moudules/Accounts/clients/base/layouts/record/record.php I could get a different folder in views to run, but I couldn't get BOTH to run, i get a "Uncaught TypeError: Cannot read property 'on' of undefined error"
Like • Show 0 Likes0
Actions

Extending Sugar Accounts Record View

Outcomes

Related Content

Recommended Content