Alfresco dojo/jquery searchable/sortable table

Question

I have created a custom page that list all open workflows. I have followed a Jeff Potts' tutorial which has gotten me thus far but I am now trying to change my table into a more dynamic table without any success.

The widget js file looks like this

define(["dojo/_base/declare",
    "dijit/_WidgetBase",
    "alfresco/core/Core",
    "alfresco/core/CoreXhr",
    "dojo/dom-construct",
    "dojo/_base/array",
    "dijit/_TemplatedMixin",
    "dojo/text!./templates/AjaxWidget.html",
    ],
    function(declare, _Widget, Core, AlfCoreXhr, domConstruct, array, _Templated, template) {
    return declare([_Widget, Core, AlfCoreXhr, _Templated], {
        templateString: template,
        cssRequirements: [{cssFile:"./css/AjaxWidget.css"}],
        i18nRequirements: [ {i18nFile: "./i18n/AjaxWidget.properties"} ],

        buildRendering: function example_widgets_AjaxWidget__buildRendering() {
            this.widgetTitle       = this.message('widgetTitle');
            this.columnName        = this.message('columnName');
            this.columnDescription = this.message('columnDescription');
            this.inherited(arguments);
        },

        postCreate: function example_widgets_AjaxWidget__postCreate() {
            var url1 = Alfresco.constants.PROXY_URI + "api/people";
            this.serviceXhr({url : url1,
                             method: "GET",
                             successCallback: this._getTasksPerUser,
                             callbackScope: this});
        },


        _getTasksPerUser: function example_widgets_AjaxWidget__getTasksPerUser(response, config) {
                var parentNode = this.containerNode;
                var wfUsers = [];
                array.forEach( response.people, function(person) {
                    wfUsers.push(person.userName);
               });
               for (var wfUser in wfUsers) {
                    var url2 = Alfresco.constants.PROXY_URI + "api/task-instances?authority=" + wfUsers[wfUser];
                    this.serviceXhr({url : url2,
                               method: "GET",
                               successCallback: this._onSuccessCallback,
                               callbackScope: this});
                }

        },



_onSuccessCallback:
            function example_widgets_AjaxWidget__onSuccessCallback(response, config) {
                var parentNode = this.containerNode;
                array.forEach( response.data, function(item) {
                    var row = domConstruct.create( "tr", {}, parentNode );
                    domConstruct.create( "td", { innerHTML: item.workflowInstance.id }, row);
                    domConstruct.create( "td", { innerHTML: item.workflowInstance.message }, row);
                    domConstruct.create( "td", { innerHTML: item.state }, row);
                    domConstruct.create( "td", { innerHTML: item.properties.bpm_dueDate }, row);
                    domConstruct.create( "td", { innerHTML: item.workflowInstance.initiator.firstName + " " + item.workflowInstance.initiator.lastName }, row);
                    domConstruct.create( "td", { innerHTML: item.owner.firstName + " " + item.owner.lastName }, row);
                });
        }
    });
});

and the html template

<div class="ajax-widget">
<h1>${widgetTitle}</h1>
 <div class="div1">
  <table>
      <thead>
          <tr>
            <th>Workflow ID</th>
            <th>Description</th>
            <th>Status</th>
            <th>Due Date</th>
            <th>Created By</th>
            <th>Assigned To</th>
          </tr>
      </thead>
      <tbody data-dojo-attach-point="containerNode"></tbody>
  </table>

I have tried using the List.js and DataTables.js jquery libraries without any success. The reason for wanting to use either of these libraries is that they offer the functionality I require out the box. Is there a dojo equivalent that would be easy to implement. I'm all ears.

My first question is this - am I using the most effective way to achieve this result? Alfresco seems to have changed quite a lot of the last 5 years and it is hard to know which tutorial/posts are still relevant today.

I have tried adding these libraries using the dojo package but when I look at the source, I cannot see if they are available and when I use the "require[]" keyword in the js file, it does not seem to tak effect.

If I am going do the right track, how would I make my table sortable and searchable. If I am barking up the wrong tree, please point me in the right direction.

Thanks - all suggestions welcome:-)

Answer 1

The tutorial that you're referring to was written with respect to the version of Aikau that was embedded within Alfresco 4.2. The Aikau UI framework has now been abstracted to its own project on Github that operates on it's own release cycle so that you fixes and features can be provided between Alfresco releases (typically there is a new release each week).

There is also a full tutorial on getting up and running with Aikau, and there is a specific chapter on sorting and pagination of lists.

This blog post describes how new versions of Aikau can be used with Share. If you come across any bugs then you can raise issues on GitHub and if you have questions on using it then tag them with "Aikau" in StackOverflow and I will see them and try to answer them.