Aikau Mini Examples - Data List (part 2)

cancel
Showing results for 
Search instead for 
Did you mean: 

Aikau Mini Examples - Data List (part 2)

ddraper
Intermediate II
0 11 12.2K

Introduction



This is one post in a series of short examples of things that can be done using the Aikau framework. The series is not intended to provide complete documentation but simply to show how to solve frequently encountered problems, implement repeating UI patterns, showcase how to use existing widgets or how to create new ones.

Real World Use Case



There are already pages in Share for handling Data Lists, but they haven't been updated for many releases.  They are therefore a good candidate to demonstrate how it's possible to re-use Aikau widgets to rebuild (and enhance) existing Share features. It may also be necessary to extend the existing Aikau widgets to achieve specific use cases.

Example



This post picks up where the last one left off. We've now got the basic Data List functionality for reading Data Lists and all that remains is to tweak the layout and handle creation and deletion of Data List items.

Using Library Files



We want our page to look like it belongs in Share and this means adding in the header and footer (unless of course you want to use the 'hybrid' template that automatically adds these for you - to do this, render the page using 'share/page/hdp/...' rather than 'share/page/dp/...'). To include the header and footer we need to import the library files provided and then call the functions they provide to set up the initial page model:

<import resource='classpath:/alfresco/site-webscripts/org/alfresco/share/imports/share-header.lib.js'>

<import resource='classpath:/alfresco/site-webscripts/org/alfresco/share/imports/share-footer.lib.js'>



var services = getHeaderServices(),

    widgets = getHeaderModel('Data Lists');

model.jsonModel = getFooterModel(services, widgets);



It's essential that imports as the first lines of your WebScript controller (not even comments can come before or between them) otherwise an error will be generated. When calling 'getHeaderModel' we can optionally provide a page title as we are doing here.

Layout



We're going to tweak the layout by using a combination of 'alfresco/layout/HorizontalWidgets' and 'alfresco/layout/VerticalWidgets' to place our widgets as we want them on the screen. There are other widgets in the 'alfresco/layout' package that we could use as well - one option would have been to use the 'alfresco/layout/AlfSideBarContainer' widget to add in a resizeable sidebar - but in this case I'm just fixing a sidebar using applying a fixed width to a child widget in a HorizontalWidgets instance as described in this previous post. Since it's already been covered I'm not going to include the code here, but please download the example code to review it.

Adding a New Item Button



This was actually the most interesting part of this example because we need to vary the published payload of a 'New Item' button for all of the different Data List types and instances. This is because we needed to include the NodeRef of the Data List to add an item to as well as the specific form controls for the Data List type that was currently being shown.



I considered a variety of alternatives to solve this and each had their merits, but I decided to extend 'alfresco/button/AlfButton' to support the use case but eventually decided that the new widget was such a valuable addition that I added it straight into the main Alfresco code base. This in itself demonstrates another benefit of Aikau - because all the code is so decoupled it is so much easier to accept contributions of individual widgets without causing any major disruptions.



Anyway... the new widget is 'alfresco/buttons/AlfDynamicPayloadButton' and allows you to create subscriptions to topics that update the payload on publication. In this case we are able to subscribe to the 'BLOG_LOAD_DATA_LIST' topic that was setup in the previous blog post to set the 'alf_destination' request parameter as follows:

...

publishPayloadSubscriptions: [

  {

    topic: pubSubScope + 'BLOG_LOAD_DATA_LIST',

    dataMapping: {

      nodeRef: 'formSubmissionPayloadMixin.alf_destination'

    }

  }

],...


In this example we listen for publications on the (scoped) 'BLOG_LOAD_DATA_LIST' topic and then update the publication payload of the button when the topic is published on. The 'nodeRef' attribute of the published payload is mapped to the 'formSubmissionPayloadMixin.alf_destination' attribute of the buttons 'publishPayload' attribute (note that we can use dot-notation syntax to set nested attributes).

Dynamic Button Visibility



We need to create a new button for every Data List type (because each Data List type expects different properties and therefore we need to specify different form controls) so we end up with more than one button. So that only one button is displayed at a time we use the 'visibilityConfig' (described in this previous blog post) to only show the appropriate button for the currently selected Data List:

...

visibilityConfig: {

  initialValue: false,

  rules: [

    {

      topic: pubSubScope + 'BLOG_LOAD_DATA_LIST',

      attribute: 'itemType',

      is: [dataListTypes[i].name]

    }

  ]

}

...


Note that we're triggered off the same topic that is published whenever a user clicks on a specific Data List and that our rule is based on the name of the current data list (see the full code, but 'dataListTypes' is the array of Data Lists being iterated over to build the buttons).



We also set an initial visibility of false so that it's not possible for a user to try and create a new Data List item until a Data List has been selected.

Finishing Touches



I've also added an 'alfresco/renderers/PublishAction' widget to each rendered item as was done for the Data List list. However, since that has already been described in this previous blog post I won't go into it again. However it is worth mentioning that I could have added another instance for opening an edit dialog.



This obviously isn't the finished article and doesn't provide all the capabilities that the existing Data List page in Share provides. The idea is to illustrate that it's relatively easy to build functional pages for an Alfresco Repository using Aikau by simply re-using existing REST APIs and widgets. Hopefully we'll be able to use Aikau to re-write Data Lists (as well as the other site pages) in a future Alfresco release.

Example In Action



This is defined in a JavaScript controller for a WebScript mapped to the /datalist2 URL. When deployed to a Share (or any Surf based Aikau application) this can be accessed by the URL: http://localhost:8081/share/page/dp/ws/datalist2



This screenshots shows the page in action:



DataList2_1



DataList2_2



DataList2_3



Download the complete example code here.



 



11 Comments
blog_commenter
Active Member
[…] provides a good support for list rendering as shown in the previous Data List blog post – and in fact steps 1, 2 and 4 are almost identical to uses cases covered in that blog […]
blog_commenter
Active Member
Hi Dave,



How to display the view for two different tables?

I have two different array. If i assign do like below,



list.config.widgets = view;

model.jsonModel.widgets=[list];



list1.config.widgets = view1;

model.jsonModel.widgets=[list1];



It is overwriting the result in only table.

Can you please guide ?



Thanks,

Ashwini
ddraper
Intermediate II
@Ashwani - again, as with questions you have added to the comments section of other blog posts, this isn't the right place to ask these sorts of questions as it does not relate to the blog content. Please use the Alfresco forums - I'm aware that we are lacking Aikau documentation, but we're working on it at the moment and trying to answer individual questions will only impede progress on that documentation.
blog_commenter
Active Member
Sure. I have posted the same in forum.
blog_commenter
Active Member
Hi,

I have created a custom share page using this tutorial. It displays all the datalists. I have some custom datalists also. One of them is called Artifact Datalist.

When the page loads, when I click on any datalist the table headers of Artifact Datalist are displayed. Although the item is correctly displayed. If I click on the datalist again then the correct table headers are displayed.

I noticed that since Artifact Datalist is the first datalist type in the list of datalists, that's why this is happening. Whichever datalist is alphabetically first in the list, initially the table headers of that datalist type is chosen.

I cannot find a way to fix this problem. Do you have any suggestions?

Thanks

Rohit
ddraper
Intermediate II
This blog post is quite old now and what only intended to provide educational information rather than a complete solution. Without seeing what you have implemented it is difficult to answer. Are you defining a default view in the list? Are you publishing a request on load to select the first item? From what you've described it sounds like it's working after loading, it's just the initial load state is wrong? I'd suggest you look through the pub/sub logs to see what event is triggering the inital list view to be displayed.
blog_commenter
Active Member
I have created a post in the forum about the same issue. You can check out the screenshots I have uploaded for better understanding.

https://forums.alfresco.com/forum/developer-discussions/alfresco-share-development/initial-document-...
blog_commenter
Active Member
Hi,

I have created a share page with the help of this tutorial  using alfresco 5.0.d with aikau 1.0.8 and I am able to list the datalists and the specific datalist table view as well and I created the CRUD functionallity (create delete and update), Till it works fine.

Yesterday I updated aikau 1.0.8 to aikau 1.0.44,  the problem I am facing is when I click on any datalist PropertyLink  datalist view is not loading, its showing message as Loading... and its keep on sending request to the following URL RequestURL:http://enkindle6:8080/share/proxy/alfresco/slingshot/datalists/data/node/workspace/

SpacesStore/616680a0-ed25-421c-9362-5a26eceb593e



I noticed that  'alfresco/services/CrudService' has updated in aikau 1.0.44, I am not able to configure the      js/blog/Datalist.js custom widget and I don''t know how to use that widget in my share page



currently this is the configuration I am using in share:

var listOfDataListItems = {

        name: 'blog/DataList',

        config: {

            pubSubScope: pubSubScope,

            loadDataPublishTopic: 'ALF_CRUD_CREATE',

            itemsProperty: 'items',

            widgets: dataListsItemsTable

        }

};



and here is my Datalist propertyLink :

              {

                  name: 'alfresco/renderers/PropertyLink',

               config: {

       propertyToRender: 'title',

       publishTopic: pubSubScope + 'SELECTED_DATA_LIST'

       }

             }

I cannot find a way to fix this problem. Do you have any suggestions?

Thanks

Kumar
ddraper
Intermediate II
I expect that the problem is with the blog/DataList widget  - the version from the blog post was written based on the list implementation at the time. Are you using the exact same code as described in the previous post? It might be necessary to update that code to work with the latest code - the code provided was only an example based on the time of writing. At the moment I don't have the time to re-visit the blog post and bring it up to date. Have you tried using the DebugLog widget to track the publication/subscription events that are occurring? Or to add break points into the code to see what is happening?
blog_commenter
Active Member
Hi,

I got a solution, just I had seen alfresco/services/CrudService and I added a line of  code( payload.alfResponseScope = 'BLOG_LOAD_DATA_LIST'Smiley Wink in the blog/Datalist.js it works fine



here is my changes to the previous blog/Datalist:

updateLoadDataPayload: function blog_DataList__updateLoadDataPayload(payload) {

         if (this.dataListToLoad != null)

         {

            payload.url = 'slingshot/datalists/data/node/' + this.dataListToLoad.nodeRef.replace('://', '/');

            payload.alfResponseScope = 'BLOG_LOAD_DATA_LIST';

         }

      }

Am I doing correct if no please suggest me



Thanks

Kumar
ddraper
Intermediate II
It shouldn't be necessary to set 'alfResponse' scope, in fact you should only set 'responseScope' as anything prefixed with 'alf' is for internal use only. The 'alfResponseScope' should automatically be added via the standard pub/sub mechanism (and should be taken from the pubSubScope of the widget that makes the publication) - it's possible that there is a but in the CrudService with scope setting - I know that we made some fixes in recent releases - see https://issues.alfresco.com/jira/browse/AKU-658) however that fix was included in 1.0.42 and you say you're on 1.0.44.