Author avatar for jason

SugarCRM 7 - Adding a Global Menu Item

Posted by on November 6, 2013

SugarCRM 7 is here and it is time to start digging under the hood. Along with it is a whole new, powerful way of customizing SugarCRM. This is a good thing. It’s an opportunity to rewrite our add-ons for our users which is one of those things developers always say that we’ll get to some time.

We will be posting our findings here as we learn more about what’s under the hood and available to all of us SugarCRM developers. What we share may not be the best way of doing the job. Please do share if you know of a better, or right, way to do something. If you have something that you find interesting and think someone else may as well, please let us know.

Let’s get under the hood and get to work. I’m going to keep it high level in this example. For more information on the new architecture please check out the Sugar Developer Guide 7.0.

With the user profile dropdown I want to add a menu item that links to a wiki on the corporate intranet.

This dropdown exists under /clients/base/views/profileactions/profileactions.hbs which is a Handlebars template. Handlebars is a great client-side templating system useful for generating layouts on the fly. We actually use Handlebars quite a bit on SugarOutfitters.

Copy this file over to the custom directory at /custom/clients/base/views/profileactions/profileactions.hbs and add the wiki link to the bottom of the list. I have hardcoded the label in this case. Follow the pattern above to use a language string instead. Make sure to add the label to the application strings.

...abbreviated
<div class="dropdown-menu scroll pull-right">
<ul role="menu">
<li class="profileactions-profile"><a href="{{profileUrl}}">{{str "LBL_PROFILE"}}</a></li>
<li class="profileactions-employees"><a href="{{employeesUrl}}">{{str "LBL_EMPLOYEES"}}</a></li>
{{#if showAdmin}}
<li class="administration"><a href="#Administration">{{str "LBL_ADMIN"}}</a></li>
{{/if}}
<li class="profileactions-about"><a href="#bwc/index.php?module=Home&action=About">{{str "LNK_ABOUT"}}</a></li>
<li class="profileactions-logout"><a href="#logout/?clear=1">{{str "LBL_LOGOUT"}}</a></li>
<li class="profileactions-wiki"><a href="http://www.oursite.com/wiki">Go to the Wiki</a></li>
</ul>
</div>
.....
view raw profileactions.hbt hosted with ❤ by GitHub

NOTE: Make sure Developer Mode is turned on. It’ll save you a ton of headaches.

Next, refresh the browser and check out the dropdown:

Now we have our custom menu item. Next time we will pass some data to the menu to link to the current user’s own wiki-page.

Edit: 7.1.6+

Things have changed a bit since this original post. Here is one way that we have found works (last tested as of 7.2.2.0):

Copy the files in /clients/base/views/profileactions to a new directory in /custom/clients/base/views/wiki-profileactions. Rename all the files to match this new view (e.g. wiki-profileactions.hbs, wiki-profileactions.js, wiki-profileactions.php). Add the menu link as described above to wiki-profileactions.hbs.

Edit wiki-profileactions.js:

({
extendsFrom: 'ProfileactionsView',
initialize: function(options) {
this._super('initialize', [options]);
},
setCurrentUserData: function() {
app.view.invokeParent(this, {type: 'view', name: 'profileactions', method: 'setCurrentUserData'});
}
})
view raw wiki-profileactions.js hosted with ❤ by GitHub

Edit wiki-profileactions.php:

<?php
require_once('clients/base/views/profileactions/profileactions.php');
$viewdefs['base']['view']['wiki-profileactions'] = $viewdefs['base']['view']['profileactions'];
view raw wiki-profileactions.php hosted with ❤ by GitHub

Copy /clients/base/layouts/header/header.php to /custom/clients/base/layouts/header/. Edit the custom header.php:

<?php
$viewdefs['base']['layout']['header'] = array(
'components' =>
array(
array(
'layout' => 'module-list',
),
array(
'view' => 'globalsearch',
),
array(
'view' => 'notifications',
),
array(
'view' => 'wiki-profileactions',
),
array(
'view' => 'quickcreate',
),
),
'last_state' => array(
'id' => 'app-header',
'defaults' => array(
'last-home' => 'dashboard',
),
)
);
view raw header.php hosted with ❤ by GitHub