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.
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.
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!