Matt Marum

Adding Views to Sugar 7.5 footer

Blog Post created by Matt Marum Employee on 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.

 



 

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!

Outcomes