How to create new widget in Alfresco Aikau ?

Always, start the new learning from the easiest one and go towards the complex one. 

This blog post is for the beginners in Aikau, in which it will help, what are the basic things are required to build a new very simple widget in Aikau way.

The below files are required to build a simple Aikau widget and each & every file has its own requirement and features.

The below files are required in client-side.

* HelloWorld.js /* Placed under, \webapps\share\js\example\personal */

* css\HelloWorld.css /* Placed under, \webapps\share\js\example\personal\css\ */

* html\HelloWorld.html /* Placed under, \webapps\share\js\example\personal\html\ */

* i18n\HelloWorld.properties /* Placed under, \webapps\share\js\example\personal\i18n\ */

The below files are required in Share webscript.

* HelloWorld.get.js

* HelloWorld.get.desc.xml

* HelloWorld.get.html.ftl

/* HelloWorld.js */

define(["dojo/_base/declare",
        "dijit/_WidgetBase", 
        "dijit/_TemplatedMixin",
        "alfresco/core/Core",
        "dojo/text!./html/HelloWorld.html"], /* specify where the html template file is present */
        /* Arguments and method param should be in the same order */
        function(declare, _WidgetBase, _TemplatedMixin, Core, template) {
   return declare([_WidgetBase, _TemplatedMixin, Core], {

/* Specify the CSS file, where it is present in the system */       
cssRequirements: [{cssFile:"./css/HelloWorld.css"}],

/* Specify the properties file. This is used to load the locale files based on the UI culture */    
i18nRequirements: [{i18nFile: "./i18n/HelloWorld.properties"}],

/* Load the template html file */       
templateString: template,

/* postMixInProperties will be called, once the widget is ready */      
 postMixInProperties: function __HelloWorld__postMixInProperties()
      {
         /* Loading the label value from the properties value */
         this.greetingLabel = this.message("greeting.label");
         this.greetingDesc = this.message("greeting.desc");
      }
   });

});

/* Simple CSS to make the div in center and colourful */

/* css\HelloWorld.css */
.helloWorld {
   font-size: 14px;
   color: green;
   font-weight: bold;
   text-align:center;
}

.helloWorld  p {
   font-size: 12px;
   color: orange;
   font-weight: normal;

}


/* Template HTML file to render the widget controls. */

/* html\HelloWorld.html */
<div class="helloWorld">${greetingLabel}
<p>${greetingDesc}</p>
 </div>

Keep in mind, always the html template file should starts with control, otherwise Aikau, won't display any contents in the page.



/* Locale resource file */

/* i18n\HelloWorld.properties */

greeting.label=Hello World!
greeting.desc=Welcome to Alfresco Aikau Developement world.


As we placed the helloworld.js file in the "C:\Alfresco5\tomcat\webapps\share\js\example\personal\" folder, we should call the widget by using ,  "js/example/personal/HelloWorld" url.

/* HelloWorld.get.js */
model.jsonModel = {   
   widgets: [
      {
          name: "js/example/personal/HelloWorld"
      }
   ]

};

/* HelloWorld.get.desc.xml */
<webscript>
  <shortname>Hello World</shortname>
  <family>Aikau Examples</family>
  <url>/helloworld</url>
</webscript>

/* HelloWorld.get.html.ftl */

<@processJsonModel group="share"/>

Once your placed the all the required files in place, refresh your share webscripts and clear client side dependencies by clicking the "Clear Dependency Caches" button from http://localhost:8080/share/page/index url. 

URL : http://localhost:8080/share/page/site/my-site/hdp/ws/helloworld