Creating sample frontend module

In Aurora, application is presented as a set of modules. However, if you have a front-end module, it's not necessarily considered an application - it can be some simple addon which implements some relatively minor functionality aspects.

As an example, let's create a module which adds one or several links to the top right corner of the interface, next to Logout and Settings links. The module will not have any backend code, only frontend functionality.

To begin, we need to create a subdirectory under modules dir, called LinksWebclient, with two subdirectories js and templates.

Now create the primary file of this module, js/manager.js:

'use strict';
module.exports = function (oAppData) {
    var App = require('%PathToCoreWebclientModule%/js/App.js');
    if (App.getUserRole() === Enums.UserRole.NormalUser)
    {
        return {
            start: function () {
                /* any code to initialize the module */
            },
            getHeaderItem: function ()
            {
                return {
                    item: require('modules/%ModuleName%/js/views/HeaderItemView.js'),
                    name: '%ModuleName%'
                };
            }
        };
    }
    return null;
};

All it's doing is including js/views/HeaderItemView.js - as long as a user is logged in:

var ko = require('knockout');
function CHeaderItemView()
{
    this.aLinks = [
        {
            url: 'http://www.afterlogic.com',
            text: 'AfterLogic'
        },
        {
            url: 'http://www.google.com',
            text: 'Google'
        }
    ];
    this.visible = ko.observable(true);
}
CHeaderItemView.prototype.ViewTemplate = '%ModuleName%_HeaderItemView';
module.exports = new CHeaderItemView();

As you can see, we add two links here, but you can place any number of links there.

HTML template used here is templates/HeaderItemView.html file, with the following content:

<!-- ko foreach: aLinks -->
<span class="item settings">
    <a class="link" href="javascript: void(0);" data-bind="attr: {href: url}" target="_blank">
        <span class="text" data-bind="text: text"></span>
    </a>
</span>
<!-- /ko -->

Now that we have all the files of our module in place, we need to let Aurora know about this new module. That's done by rebuilding static files as explained here. Once you log in as Aurora user, you will see new links in top right corner of the interface: