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

It would be useful if you could add the link to "Jeff Potts' tutorial" which you have used. Also, mention what error/issue you are facing. — T Kambi, Aug 25 '16 at 14:18
I am mistaken. It was in-fact this tutorial. http://ohej.github.io/alfresco-tutorials/tutorial/aikau/tutorial.html#adding-a-menu-item-to-the-header. — user1398017, Aug 25 '16 at 15:50
I am not getting any errors. Anything I try either does not work (nothing new on the page) or I just get a blank page like one library in overwriting another. Everything compiles without errors. — user1398017, Aug 25 '16 at 15:52
I guess this is the crux of the question. If you were going to add one of these jquery libraries, where/how would you do it and where would you put the function call that sets up the link between the table and jquery? — user1398017, Aug 25 '16 at 15:56
What version of Alfresco are you using? The tutorial you're referencing was written with respect to the version of Aikau that was embedded within Alfresco 4.2. There is now an external version of Aikau that can be used from 5.0.d / 5.0.1 onwards (see https://github.com/Alfresco/Aikau) ... there is also a full tutorial covering this sort of thing: https://github.com/Alfresco/Aikau/blob/master/tutorial/chapters/About.md — Dave Draper, Aug 26 '16 at 08:03

score 0 · Answer 1 · answered Aug 26 '16 at 08:08

0

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.

answered Aug 26 '16 at 08:08

Dave Draper

1,837
11
25

Thanks Dave. I have worked through the tutorials but don't quite understand how the example I have in my original post would be converted so that it passes the data currently being sent to html to a widget/view instead? All of the examples seem to send a url back, not a json object. I am also concerned that my solution would become an issue when I try to implement paging and sorting because these functions all take place at the server end and I will have to build it into my webscript/widget – user1398017 Aug 30 '16 at 05:35
I think you've already asked this question here: http://stackoverflow.com/questions/39219479/aikau-fundamentals-payload-101 and hopefully my answer there helps. – Dave Draper Aug 30 '16 at 09:46

Alfresco dojo/jquery searchable/sortable table

1 Answers1