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
addFooterAction.ext.php
<?php
// Append new View to Footer layout's list of components
$viewdefs['base']['layout']['footer']['components'][] = array (
'view' => 'my-app-action',
);
my-app-action.hbs
{{!
Define HTML for our new button. We will mimic the style of other buttons
in the footer so we remain consistent.
}}
<button data-action="chat" class="btn btn-invisible" aria-label="{{str "Chat"}}" role="link" type="button">
<i class="fa fa-comments icon-comments"></i><span class="action-label"> {{str "Chat"}}</span>
</button>
my-app-action.js
({
events: {
//On click of our "button" element
'click [data-action=chat]': 'chat'
},
// tagName attribute is inherited from Backbone.js.
// We set it to "span" instead of default "div" so that our "button" element is displayed inline.
tagName: "span",
chat: function(){
// Use Sugar 7 API to pop one of our standard alert message boxes.
app.alert.show('myapp-chat-alert', {
level: 'info',
messages: 'Send a chat message!',
autoClose: true
});
}
})
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!
