Aikau : filter and refresh a list

[nancygaillard]

Hi,

I created a Aikau page with two AlfList. I use one in order to filter the other. The problem I encountered is that I don't know if my filters work because I don't manage to refresh the other list, and refresh manually the page (with F5) change nothing!

I can see the list of filters and the list of "conteneurs" but nothing happens when I click on a row of my list of filters.
I can see my json view of the "pisys/conteneurs" webscript (defined in a repo-project) and I can filtered the json adding for exemple "?filter=depot". So I suppose my webscript work.

There is a lot of things I don't understand.
- when and how have I to use the pubSubScope
- when and why I have to use "PROCESS", "CONFIGURED", …
- the role of the publishPayloadModifiers array
- how to use alfPublish, Do I need it?
- Is it me who defined the payload attributes used in the service?
…

There is my actual code (simplified)

page.get.js
<blockcode>
//Filters
var filtres = {
   name: "alfresco/lists/AlfList",
   config: {
      //pubSubScope: "FILTER_SCOPE",
      loadDataPublishTopic: "ALF_CRUD_GET_ALL",
      loadDataPublishPayload: {
         url: "pisys/filtres"
      },
      itemsProperty: "filtres",
      widgets: [
         {
           name: "alfresco/lists/views/AlfListView",
           config: {
            widgets: [
              {
               name: "alfresco/lists/views/layouts/Row",
               config: {
                 widgets: [
                  {
                    name: "alfresco/lists/views/layouts/Cell",
                    config: {
                     widgets: [
                        {
                          name: "alfresco/renderers/PropertyLink",
                          config: {
                              propertyToRender: "libelle",
                              useCurrentItemAsPayload: false,
                              publishTopic: "FILTER_LIST", 
                              publishPayloadType: "PROCESS",
                              publishPayloadModifiers: ["processCurrentItemTokens"],
                           }
                        }
                     ]
                    }
                  }
                 ]
               }
              }
            ]
           }
         }
      ]
   },
};

//list to filter
var conteneurs = {
   name: "alfresco/lists/AlfSortablePaginatedList",
   config: {
      pubSubScope: "DATA_LIST_SCOPE_",
      loadDataPublishTopic: "ALF_CRUD_GET_ALL",
      loadDataPublishPayload:{
         url: "pisys/conteneurs"
      },
      itemsProperty: "conteneurs",
     sortField: "num",
     widgets: [
      {
        name: "alfresco/lists/views/AlfListView",
        config: {
         additionalCssClasses: "bordered",
         widgetsForHeader: [
            {
               name: "alfresco/lists/views/layouts/HeaderCell",
               config: {
                  label: "Dossier",
                  sortable: true,
                  sortValue: "dossier"
               }
            },
            {
               name: "alfresco/lists/views/layouts/HeaderCell",
               config: {
                  label: "Conteneur",
                  sortable: true,
                  sortValue: "num"
               }
            }
         ],
         widgets: [
           {
            name: "alfresco/lists/views/layouts/Row",
            config: {
              widgets: [
               {
                  name: "alfresco/lists/views/layouts/Cell",
                  config: {
                  widgets: [
                     {
                        name: "alfresco/renderers/Property",
                        config: {
                           propertyToRender: "dossier"
                        }
                     }
                  ]
                  }
               },
               {
                  name:"alfresco/lists/views/layouts/Cell",
                  config: {
                     widgets: [
                        {
                          name: "alfresco/renderers/Property",
                          config: {
                           propertyToRender: "num"
                          }
                        }
                     ]
                  }
               }
              ]
            }
           }
         ]
        }
      }
     ]
   },
};

model.jsonModel = {
  services: [
   "alfresco/services/CrudService",
   "filter/FilterService",
  ],
  widgets: [
   filtres,
   conteneurs
  ]
};
</blockcode>

the C:\Users\ngaillard\Documents\Alfresco-dev\conteneurs-share\src\main\amp\web\js\filter\filterService.js
<blockcode>
define(   ["dojo/_base/declare",
      "alfresco/core/Core",
      "dojo/_base/lang",
      "alfresco/core/CoreXhr",
      "service/constants/Default",
      "alfresco/documentLibrary/_AlfDocumentListTopicMixin"],
      function(declare,Core,lang, CoreXhr, AlfConstants, _AlfDocumentListTopicMixin){
         return declare([Core, CoreXhr, _AlfDocumentListTopicMixin], {
            constructor: function filter_filterService_constructor(args){
               lang.mixin(this,args);
               this.alfSubscribe("FILTER_LIST", lang.hitch(this, this.onFilterList));
            
            },
            onFilterList: function filter_filterService_onFilterList(payload){
               var alfTopic = (payload.alfResponseTopic !=null) ? payload.alfResponseTopic : "";
               //if(payload.filter) url = url+"?filter="+payload.filter;
               this.serviceXhr({
                  url: url+"?filter=depot",
                  method: "GET",
                  alfTopic: alfTopic,
                  successCallback : this.alfPublish("ALF_DOCLIST_RELOAD_DATA")
               });
            }
         });
      });
</blockcode>

[nancygaillard]

In page.get.js
- I changed the config of the propertylink in the "filtres" AlfList like this:
<blockcode>
{
  name: "alfresco/renderers/PropertyLink",
  config: {
      propertyToRender: "libelle",
      useCurrentItemAsPayload: false,
      publishTopic: "DATA_LIST_SCOPE_FILTER_LIST", 
      publishPayloadType: "CURRENT_ITEM"
   }
}
</blockcode>
My justification was I just need the is filter, no more.

- I  changed the "alfresco/lists/AlfFilteredSortableList" by "conteneurs/conteneurs", my own extension?/mixin? "alfresco/lists/AlfFilteredSortableList, modifying the updateLoadDataPayload method, and implementing a onFilterList method

conteneurs.get.js
<blockcode>
define(   ["dojo/_base/declare",
      "alfresco/lists/AlfSortablePaginatedList",
      "alfresco/services/DialogService",
      "dojo/_base/lang",],
      function(declare,AlfSortablePaginatedList, DialogService, lang){
         return declare([AlfSortablePaginatedList, DialogService], {
            postMixInProperties: function conteneurs_conteneurs__postMixInProperties(){
               this.inherited(arguments);
               this.alfSubscribe("FILTER_LIST", lang.hitch(this, this.onFilterList));
            },
            filteredList: null,
            resultList:null,
            onFilterList: function conteneurs_conteneurs_onFilterList(payload){
               this.filteredList = payload;
               this.onViewSelected({valueayload.itemType});
               AlfSortablePaginatedList.loadData();
            },
            loadData: function alfresco_lists_AlfList__loadData() {
                  this.inherited(arguments);
            },
            updateLoadDataPayload: function conteneurs_conteneurs__updateLoadDataPayload(payload) {
               if (this.filteredList != null) {
                  var filter = "?filter=";
                  filter+= (this.filteredList.id !=null) ? this.filteredList.id : "all";
                  payload.url = "pisys/conteneurs"+filter;
               }
               var url = payload.url || "pisys/conteneurs";
               var orderBy = (payload.sortAscending && payload.sortAscending===true) ? "asc":"desc";
               var sortField = (payload.sortField) ? payload.sortField : "num";
               if(/^.*\?.*$/.test(url)){ url+="&orderBy="+orderBy+"&sortField="+sortField; }else{ url+="?orderBy="+orderBy+"&sortField="+sortField;}
               payload.url= url;
               this.inherited(arguments);
            }
         });
      });
</blockcode>

I let the topic opened to allows some people help me to understand.

[nancygaillard]

sources : http://blogs.alfresco.com/wp/developer/2014/09/30/aikau-mini-examples-data-list-part-1/, https://github.com/Alfresco/Aikau/blob/master/tutorial/chapters/Tutorial4.md (publication/subscription logging helped me a lot)

but I am not sure, and I know I don't understand all, probably because of my bad English understanding…

Thank you!

[ddraper]

One of the key things to remember about Aikau is that the widgets are de-coupled from one another and that where you want widgets to communicate together you need to ensure that they are publishing/subscribing across the same topics and scope.

It looks like you're trying to filter one list by selecting values from another list? But I can't see any mechanism you have of changing the actual data that is being loaded… both lists publish to the same topic and your service and never varies in the data being requested - this is why you're always likely to see the same result.

A better approach would be to use the alfresco/lists/AlfFilteredList widget (which provides the capabilities for filtering)… I'd suggest that you look at the unit test examples (see https://github.com/Alfresco/Aikau/blob/5bb954ba95a248e129e4615ad596a9ee406648b0/aikau/src/test/resou...) - I'd certainly recommend that you clone the GitHub repository and get the unit test application running so that you can experiment with the unit test pages (setup instructions can be found linked from the main GitHub page: https://github.com/Alfresco/Aikau)

Regards,
Dave