Adding Buttons to the Application Footer

Overview

This example explains how to add additional buttons to the application footer. We will create a custom view and then append the view component to the footer-buttons layout metadata. The additional button will merely show an alert, but can be expanded on to do much more.

Steps To Complete

This tutorial requires the following steps, which are explained in the sections below:

1. Creating the Custom View
2. Appending the View to Layout Metadata

Creating the Custom View

To add a button to the application footer, you will first need to create the custom view that will contain your button and logic. To create the custom view create a folder in ./custom/clients/base/views with the name of your view, such as ./custom/clients/base/views/footer-greet-button/. Once your folder is in place, you can create the three primary files that make up your view:

1. footer-greet-button.hbs - Contains the handlebar template for your view
2. footer-greet-button.js - Contains the JavaScript controller logic
3. footer-greet-button.php - Contains the metadata your view might use. For this example, we simply use the metadata to define whether the greeting will auto close or not.

./custom/clients/base/views/footer-greet-button/footer-greet-button.hbs

  {{! 
    Define HTML for our new button.  We will mimic the style of other buttons
    in the footer so we remain consistent.
    Also we will only show the button if a User is logged into the system
}}

{{#if isAuthenticated}}
<button class="btn btn-invisible" type="button" data-action="greet">
    <i class="fa fa-bell"></i>
    <span class="action-label"> {{str "Greet!"}}</span>
</button>
{{/if}}

./custom/clients/base/views/footer-greet-button/footer-greet-button.js

  ({
    // 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",
    events: {
        //On click of our "button" element
        'click [data-action=greet]': 'greet'
    },
    isAuthenticated: false,

    _renderHtml: function() {
        this.isAuthenticated = app.api.isAuthenticated();
        this._super('_renderHtml');
    },
    greet: function(){
        // Use Sugar 7 API to pop one of our standard alert message boxes.
        app.alert.show('greeting-alert', {
            level: 'info',
            messages: 'Hello '+app.user.get('full_name')+'!',
            autoClose: this.meta.autoClose || false
        });
    }

})

./custom/clients/base/views/footer-greet-button/footer-greet-button.php

  <?php

$viewdefs['base']['view']['footer-greet-button'] = array(
    'autoClose' => true
);

Appending the View to Layout Metadata

Once the view is created, you simply need to add the view to the Footer-Buttons Layout metadata. The Footer-Buttons Layout is located in ./clients/base/layotus/footer-buttons/, so appending the view to this layout can be done via the Extension Framework. Create a file in ./custom/Extension/application/Ext/clients/base/layouts/footer-buttons/ and the Extension Framework will append the metadata to the Footer-Buttons Layout.

./custom/Extension/application/Ext/clients/base/layouts/footer-buttons/greetingButton.php

  <?php

$viewdefs['base']['layout']['footer-buttons']['components'][] = array (
    'view' => 'footer-greet-button',
);

Once all the files are in place, you can run a Quick Repair and Rebuild and the new button will show in the footer when logged into your system.