Close

Aikau Widgets Extension Point

Aikau pages are built up of widgets. There are two types of widgets, presentation widgets and service widgets. These JavaScript widgets are Dojo classes. A widget can have its own CSS, HTML, and Properties.

Architecture Information: Share Architecture

Description

Aikau menus, pages, and dashlets are all using Aikau widgets to build their user interface. An Aikau Widget contains both JavaScript, HTML, CSS, and resource properties to form a self contained component. Aikau widgets are implemented as Dojo classes and uses classes from the Dijit widget library. Alfresco Share comes with a lot of Aikau widgets out of the box such as for example:

  • Charts
  • Dialogs
  • Document Library Menu, List, Views, Filter, Toolbar
  • Document Pickers, Preview, Upload
  • Editors
  • Event Publish/Subscribe
  • Forms with controls - button, text fields, labels, drop downs, date, pickers, radio, etc
  • Header
  • Layouts - classic window, vertical, horizontal, etc
  • Lists
  • Menu
  • Navigation - links, tree
  • Reports
  • Search
  • Services such as Action Service, Content Service, Navigation Service, Tag Service, etc

For a full list of widgets, and documentation, see Aikau Widget Library. If there is no widget here that fits your needs then you implement your own custom Aikau widget. Let’s take an example of a simple page with a custom HelloWorld widget, the page JSON looks like this:

model.jsonModel = {
    widgets: [
        {
            id: "SET_PAGE_TITLE",
            name: "alfresco/header/SetTitle",
            config: {
                title: "Hello World"
            }
        },
        {
            id: "DEMO_SIMPLE_MSG",
            name: "example/widgets/HelloWorldTextWidget"
        }
    ]
};      

Here we got a custom widget called HelloWorldTextWidget in the Dojo AMD package exmaple/widgets. To implement this widget we need to create a JavaScript file called HelloWorldTextWidget.js and put it in the /js/example/widgets directory. The implementation of the widget looks like this:

define(["dojo/_base/declare",
        "dijit/_WidgetBase",
        "alfresco/core/Core",
        "dijit/_TemplatedMixin",
        "dojo/text!./HelloWorldTextWidget.html"
    ],
    function(declare, _Widget, Core, _Templated, template) {
        return declare([_Widget, Core, _Templated], {
            templateString: template,
            i18nRequirements: [ {i18nFile: "./HelloWorldTextWidget.properties"} ],
            cssRequirements: [{cssFile:"./HelloWorldTextWidget.css"}],
            
            buildRendering: function example_widgets_HelloWorldTextWidget__buildRendering() {
                this.helloWorldMsg = this.message('hello.world');
                this.inherited(arguments);

            }
        });
});      

This widget is based on an HTML template defined in a file called HelloWorldTextWidget.html, this file should be placed in the same place as the Widget class:

<div class="helloWorldMsgStyle">${helloWorldMsg}</div>

The widget also uses a property called hello.world that needs to be available in a resource file called HelloWorldTextWidget.properties, it also needs to be located in the same place as the Widget class:

hello.world=This is just a test page. Hello World! (Aikau)

Finally the widget template uses a CSS style called helloWorldMsgStyle that needs to be available in a resource file called HelloWorldTextWidget.css, located in the same place as the Widget class:

.helloWorldMsgStyle {
    border: 1px #000000 solid;
    padding: 1em;
    width: 100px;
    background-color:lightgrey;
}      

Before this widget can be loaded by the Dojo AMD loader the package that it is located in must be registered. This is done via a Surf Extension Module as follows:

<extension>
  <modules>
    <module>
      <id>Example Aikau Widgets</id>
      <version>1.0</version>
      <auto-deploy>true</auto-deploy>
      <configurations>
        <config evaluator="string-compare" condition="WebFramework" replace="false">
          <web-framework>
            <dojo-pages>
              <packages>
                <package name="example" location="js/example"/>
              </packages>
            </dojo-pages>
          </web-framework>
        </config>
      </configurations>
    </module>
  </modules>
</extension>

Deployment - App Server

  • tomcat/shared/classes/alfresco/web-extension/site-webscripts (Untouched by re-deployments and upgrades)

Best practice is to put the file in a directory that explains what the file is for, such as for example:

  • tomcat/shared/classes/alfresco/web-extension/site-webscripts/org/alfresco/training/components/form/controls

Deployment All-in-One SDK project

  • aio/share-jar/src/main/resources/alfresco/web-extension/site-data/extensions - Extension modules with Dojo package definitions (i.e. the JavaScript packages where the Widgets live)
  • aio/share-jar/src/main/resources/META-INF/resources/share-jar/js/<dojo package> - web resources, such as Aikau Widgets

More Information

Tutorials

Developer Blogs

Edit this page

Suggest an edit on GitHub
This website uses cookies in order to offer you the most relevant information. Please accept cookies for optimal performance. This documentation is subject to the Documentation Notice.