Need help on create a list of document (aikau dashlet)

[billydekid]

Hi,

I'm new on aikau development. My current small-project is to create a document list dashlet which the data come from my simple webscript that deployed to Repository (not to classpath). This webscript is return JSON data format and works normally (as single webscript page or application outside of Alfresco dashboard).

The simple dashlet I will build is as follow:

*It only shows part of current document properties.

The requirements for that dashlet are:

1. Select a Department from drop down list will request a HTTP REST API, such as on simple select HTML code:
   <option value="/alfresco/service/suj/docnotify/deeds.json?usergroup=SUJ_HO_FINANCE">Finance (HO)</option>
2. The default selection is select "All User Group" which will query all documents from whole departments, and the result will create a default table query result (all docs from all user groups).
3. The "Download as CSV" button will request a HTTP REST API with similar URI above (#1) with only different on its extension (.csv). It will download document list in csv format for selected department.
4. The content area (table view) is the result which parse JSON data and display as table.

Following are my study resources on aikau dashlet and widget development for this task:

1. Adding Views to Filtered Search
2. Aikau Widget Reference​
3. Aikau Dashlets​
4. How to Create an Aikau Dashlet for Share by Dave Draper​

Until now I successfully created dashlet below:

*the logo is only for my demo of "alfresco/layout/VerticalWidgets".

With above conditions I achieved, I have some questions remaining of development to finish:

1. How to populate the selections (options parameter) of drop down list? This DropDownButton documentation not made me clear on how to create the options. How we create the options like HTML code above? and return a JSON back. Or I got wrong component/module instead of DropDownButton?
2. When the option is selected, then "Download as CSV" button will also update the link (change the usergroup parameter; make it the same with dropdown list on its left side). How to make this button link updated? I just think and create the simple HTML button with Javascript onclick action: onclick="location.href='/alfresco/service/suj/docnotify/deeds.csv?usergroup=IT_DEPT';" which will automatically download a CSV file.
3. For the widget below the toolbar as the result area (table view). I just create only the HEADER (widgetsForHeader above of widgetsForBody block). This header is not shown, because I haven't created the right "table" which can capture the JSON data (CMIIW). But I already prepared it with development and documentations of: “alfresco/documentlibrary/views/layouts/Row”, “alfresco/documentlibrary/views/layouts/Cell”, “alfresco/renderers/SearchResultPropertyLink”,  “alfresco/renderers/Property”. It refer to my #1 study link above. Is it a right path to create this table widget result?

Thank you,

[bayu]

[ddraper]

OK... I might need some additional information to get you to the end of the path, but this is a very comprehensive question, so thanks for providing as much detail as you have.

With regards to the DropDownButton...

The main thing to understand is that Aikau operates over a publication/subscription model. The DropDownButton is for a very specific use case in which a button can contain a widget model for rendering more complex than a simple options menu. What you probably actually want to be using is a Select widget which is a representation of a more traditional HTML select (there are more complex variations available like FilteringSelect and MultiSelectInput). These are form controls so when they have their value changed they will publish the change on a specific topic.  If the content of your list changes according to the selected item in the drop-down then you should look to use a AlfFilteredList and use the drop-down form control to trigger reloading of data. An example of how to configure an AlfFilteredList with external filter contols can be found in the unit test application - see this test page controller.

The idea would be that each option in the drop-down has a label and value attribute and when the selected item is changed, the AlfFilteredList detects that change and makes a request to load a new set of data based on the value selected.

For the "Download CSV" button - it sounds like what you require is that the payload published when the button is clicked should change depending upon the user group selected. I would recommend that you use the AlfDynamicPayloadButton as this can be configured (as the name suggests) to change the payload published on clicked based on other publications made within the page. This would allow your button to request to download based on the item selected from the drop-down.

Finally... It sounds like you're on the right track with your table, however I'd question your use of the SearchResultPropertyLink unless your dashlet truly is rendering search results. Otherwise you may want to just use the PropertyLink widget.

Hopefully this information is of use... the one educational resource you didn't mention is the Aikau tutorial - if you've not worked through it yet and are new to Aikau development then I would definitely recommend it.

[billydekid]

Hi Dave,

Thank you for your answer, reviewing and suggestions. It really helps a beginner like me.

Aikau tutorial is forgot to mention, yes it's also one of my resource, the example codes there are really valuable.

OK, I will back to my dev and raise if any problems here.

Again, thank you!