Adding Views to Sugar 7.5 footer

Matthew Marum —  May 11, 2015

There are certain parts of the Sugar 7 user interface that are always available to the user.  For example, the Sugar Cube at the top left corner of both our mobile and web applications is always visible as an anchor that allows the user to return to their home dashboard.  Another example is the Help button that is displayed in the Sugar 7 footer.  It is available in every screen and allows the user to toggle the display of the contextual help dashboard for whatever they happen to be doing.

Help button in the Sugar 7 application footer

Help button in the Sugar 7 application footer

Most examples of UI customizations in Sugar 7 involve making additions to particular modules, dashboards, or screens within the application.  However certain features benefit from being available at all times because they can be applied universally.  A good example would be a collaboration feature such as in-application chat or a share button.

In this post, we will show how easy it is to add your own custom Views to the Sugar 7 application footer layout that can serve as anchors for a custom feature or integration with Sugar.

We will add a Chat button that will display an alert when it is clicked on whatever screen is currently in use.  You will see it is as easy as adding a new Sugar 7 view to an existing layout.

All we will need is three files.  Two to define our custom View HTML and View controller.  Then one more to define the extension to the Sugar 7 footer layout.

Step 1: Create a new custom View for your Footer contribution

Add my-app-action.js and my-app-action.hbs from below to custom/clients/base/views/my-app-action/

Step 2: Add your custom View as an extension to the Footer layout

Add addFooterAction.ext.php from below to custom/Extension/application/Ext/clients/base/layouts/footer/addFooterAction.ext.php

Then run Quick Repair and Rebuild and try it out.

Chat button in Sugar 7 footer

Chat button in Sugar 7 footer

In this code example, every time you click the Chat button you will see a Sugar 7 application Notice alert dialog that displays “Send a chat message!”  But of course you can easily replace this Sugar 7 alert with whatever you like!

Matthew Marum

Posts

Matt is the Director of Developer Advocacy for SugarCRM. Previously he was an Engineer on Sugar 7 and a Solutions Architect for the OEM program. He is also an avid trail runner, Boston Marathon qualifier and a karaoke aficionado.

2 responses to Adding Views to Sugar 7.5 footer

  1. 

    In this example where does the view and the .js file go

    custom/clients/base/views?