You are here

Aikau Widgets

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.
Extension Point Aikau Widgets
Support Status Full Support
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-depolyments 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 - SDK Project
  • share-amp/src/main/amp/config/alfresco/web-extension/site-data/extensions/ - Extension modules with Dojo package definitions (i.e. the JavaScript packages where the Widgets live)
  • share-amp/src/main/amp/web/js/<dojo package> - web resources, such as Aikau Widgets
More Information
Tutorials
Developer Blogs

Sending feedback to the Alfresco documentation team

You don't appear to have JavaScript enabled in your browser. With JavaScript enabled, you can provide feedback to us using our simple form. Here are some instructions on how to enable JavaScript in your web browser.