Aikau Widgets

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. SkyVault Share comes with a lot of Aikau widgets out of the box such as for example:

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);

            }
        });
});      

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

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

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

<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>
      

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

• 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

• Introduction to Aikau
• Aikau Widget Reference - Look here before you start creating widgets, one might exist that does what you want.

• Adding new AMD packages for Aikau Widgets
• Aikau Tutorials on GitHub

• Aikau background and concepts
• Creating custom Aikau Widgets
• Deep dive into Dojo, Dijit, and Aikau development. - lots of information around creating Aikau widgets
• Aikau Tutorial