topic Re: How to create dynamic multi-select list box in custom form in Alfresco Archive

How to create dynamic multi-select list box in custom form

satheeshkumar — Fri, 13 Mar 2015 05:28:43 GMT

Hi All,I have created a custom form with few text box fileds. I would like to add one more filed called multi-select box with dynamic list loaded into it.The dynamic list I mean here is, looping through the specific sub folder of "Document Library" and create a list of folders available under this s

Re: How to create dynamic multi-select list box in custom form

s_palyukh — Mon, 16 Mar 2015 13:23:13 GMT

Take a look at the following post https://forums.alfresco.com/comment/149739#comment-149739

Re: How to create dynamic multi-select list box in custom form

satheeshkumar — Mon, 16 Mar 2015 17:17:10 GMT

Hi Palyukh,

Thanks for your response. I have gone through the linked post you have shared. I could not grasp much from it, sorry, I am pretty new to this.

In that you have mentioned like,

<blockcode>You should make custom control for form field where you will call Alfresco webscript.

This webscript should return information that you want to display in section.</blockcode>
I didn't get where to put that custom control for form field and how can I create a webscript that will return list of sub folders.
Can you please elaborate and provide some more details, which will be greatly helpful for me.

Re: How to create dynamic multi-select list box in custom form

s_palyukh — Tue, 17 Mar 2015 08:54:51 GMT

Introduction to the Share forms -> http://docs.alfresco.com/5.0/concepts/forms-intro.html
How to create custom form-field control -> http://docs.alfresco.com/5.0/tasks/forms-custom-formcontrol.html
Introduction to the Web Script -> http://ecmarchitect.com/alfresco-developer-series-tutorials/webscripts/tutorial/tutorial.html

 You should make custom control for form field where you will call Alfresco webscript. ‍

It means that you can add javascript code into the custom field control where you will make ajax request to the Alfresco interface.

 This webscript should return information that you want to display in section. ‍

It means you need to make custom webscript that will return data for dynamic control

Re: How to create dynamic multi-select list box in custom form

muralidharand — Tue, 17 Mar 2015 11:33:46 GMT

Hi Satheesh,
I hope, you're looking for the suggestion on Aikau style forms (building the JSON model in get.js file) and not the Form Service forms.

If so, there is no predefined widgets are available for the multi-select checkbox control, but you can use it from the dojox.

http://dojotoolkit.org/reference-guide/1.10/dojox/form/CheckedMultiSelect.html

http://jsfiddle.net/down_quark/cNATk/

Aikau is running on top of Dojo framework, so you should be able to use this in your case.

Please let me know, if you're not clear.

Re: How to create dynamic multi-select list box in custom form

satheeshkumar — Wed, 18 Mar 2015 11:03:34 GMT

Hi Palyukh,

Thanks for the links. I have gone through the links. Based on those details, I have created a Java backed webscript for returning a list of available folders under a specific path.

Here is my Java Backed Webscript code,


protected Map<String, Object> executeImpl(WebScriptRequest req,
         Status status, Cache cache) {
      String typeOfLibrary = req.getParameter("retrieve");
      
      if (typeOfLibrary == null || "".equals(typeOfLibrary)) {
         status.setCode(Status.STATUS_BAD_REQUEST);
         status.setRedirect(true);
         status.setMessage("Please provide typeofLibrary");
         logger.debug("Please provide typeofLibrary");
         return null;
      }
      else if (!("Product Library".equals(typeOfLibrary)) && !("Image Library".equals(typeOfLibrary))) {
         status.setCode(Status.STATUS_BAD_REQUEST);
         status.setRedirect(true);
         status.setMessage("Please provide valid typeofLibrary");
         logger.debug("Please provide valid typeofLibrary");
         return null;
      }
      StoreRef storeRef = new StoreRef(StoreRef.PROTOCOL_WORKSPACE, "SpacesStore");
      String queryStrings = "";
      if (("Product Library".equals(typeOfLibrary))) {
         queryStrings = "PATH:\"/app:company_home/st:sites/cm:retail-channels-product-management/cm:documentLibrary/cm:Product_x0020_Library/*\"";
      }
      else if(("Image Library".equals(typeOfLibrary))){
         queryStrings = "PATH:\"/app:company_home/st:sites/cm:retail-channels-product-management/cm:documentLibrary/cm:Image_x0020_Library/*\"";
      }
      ResultSet rs1 = serviceRegistry.getSearchService().query(storeRef, SearchService.LANGUAGE_LUCENE, queryStrings);
      Map<String, Object> model = new HashMap<>();
      List<String> productLibraryList = new ArrayList<>();
      try {
         if(rs1 != null && rs1.length() != 0) {      
            
            FileFolderService fileFolderService = serviceRegistry.getFileFolderService();
            for (int i = 0; i < rs1.length(); i++) {
               NodeRef rsNodeRef = rs1.getNodeRef(i);
               String productTypeFolder = fileFolderService.getFileInfo(rsNodeRef).getName();
               productLibraryList.add(productTypeFolder);               
               logger.info("The ProductTypeFolder Name is :"+productTypeFolder);               
            }
         }
      }
      finally {
         rs1.close();
      }
      if(!productLibraryList.isEmpty()){
         model.put("isEmpty", false);
         model.put("libraryList", productLibraryList);
      }
      else{
         model.put("isEmpty", true);
         model.put("libraryList", null);
      }
      return model;
   }
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Web Descriptor,


<webscript>
   <shortname>Retrieves the Library List of the type of library passed.</shortname>
   <description>Retrieves the Library List of the type of library passed.</description>
   <family>Harland Clarke WebScripts</family>
   <url>/retrieve-library-list?retrieve={typeOfLibrary}</url>   
   <format default="json">extension</format>
   <authentication>admin</authentication>
</webscript>
‍‍‍‍‍‍‍‍‍‍

Response template, but I am not sure this is how it should be,


<#if isEmpty> [] 
<#else>
{"libraryList":{<#list libraryList as listItem>
"${listItem}"<#if listItem_has_next>,</#if>
</#list>}}
</#if>‍‍‍‍‍‍‍

I am getting a response as shown in the screen shot, when I access this custom webscript.
But I am not able to iterate this and show it up in my custom form control.

My Custom Form control, I haven't changed much in it except the URL and "result.people.length"


<div class="form-field">
 
    <script type="text/javascript">//<![CDATA[
    YAHOO.util.Event.onAvailable("${fieldHtmlId}_assign", function(){
        new selectAuthor("${fieldHtmlId}");
    });
 
    function selectAuthor(currentValueHtmlId) {
        this.currentValueHtmlId = currentValueHtmlId;
        var selectAuthors = Dom.get(this.currentValueHtmlId);
 
        this.register = function () {
// Call webscript
            Alfresco.util.Ajax.jsonGet({
                url: "http://localhost:8080/alfresco/service/retrieve-library-list?retrieve=Product%20Library",
                successCallback: {
                    fn: this.updateOptions,
                    scope: this
                },
                failureCallback: {
                    fn: function () {
                    },
                    scope: this
                }
            });
        };
 
// Add options into <select>
        this.updateOptions = function (res) {
            var result = Alfresco.util.parseJSON(res.serverResponse.responseText);
            if (result.libraryList.length > 0) {
                var people = result.libraryList;
                selectAuthors.options[selectAuthors.options.length] = new Option("", "", true, true);
                for (var i in people) {
                    var option = new Option(people, people);
                    selectAuthors.options[selectAuthors.options.length] = option;
                }
            }
        };
 
        this.register();
    }
    //]]></script>
 
    <label for="${fieldHtmlId}">${field.label?html}:<#if field.mandatory><span class="mandatory-indicator">${msg("form.required.fields.marker")}</span></#if></label>
    <select id="${fieldHtmlId}" name="${field.name}" tabindex="0"
            <#if field.description??>title="${field.description}"</#if>
            <#if field.control.params.size??>size="${field.control.params.size}"</#if>
            <#if field.control.params.styleClass??>class="${field.control.params.styleClass}"</#if>
            <#if field.control.params.style??>style="${field.control.params.style}"</#if>
            <#if field.disabled  && !(field.control.params.forceEditable?? && field.control.params.forceEditable == "true")>disabled="true"</#if>>
    </select>
</div>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Can you please point me out, where I am going wrong. I am trying "result.libraryList.length", is this the way to access the list return by my custom wescript?
If so, why am I getting a blank dropdown? Or is there anything wrong in my code?

Re: How to create dynamic multi-select list box in custom form

satheeshkumar — Wed, 18 Mar 2015 11:51:57 GMT

Even changed my Java Backed webscript to render a Json response directly. But still could not access them in the form field.


@Override
   public void execute(WebScriptRequest req,
         WebScriptResponse res) throws IOException {
      
      String typeOfLibrary = req.getParameter("retrieve");
      
      
      StoreRef storeRef = new StoreRef(StoreRef.PROTOCOL_WORKSPACE, "SpacesStore");
      String queryStrings = "";
      if (("Product Library".equals(typeOfLibrary))) {
         queryStrings = "PATH:\"/app:company_home/st:sites/cm:retail-channels-product-management/cm:documentLibrary/cm:Product_x0020_Library/*\"";
      }
      else if(("Image Library".equals(typeOfLibrary))){
         queryStrings = "PATH:\"/app:company_home/st:sites/cm:retail-channels-product-management/cm:documentLibrary/cm:Image_x0020_Library/*\"";
      }
      ResultSet rs1 = serviceRegistry.getSearchService().query(storeRef, SearchService.LANGUAGE_LUCENE, queryStrings);
      
      List<String> productLibraryList = new ArrayList<>();
      try {
         if(rs1 != null && rs1.length() != 0) {      
            
            FileFolderService fileFolderService = serviceRegistry.getFileFolderService();
            for (int i = 0; i < rs1.length(); i++) {
               NodeRef rsNodeRef = rs1.getNodeRef(i);
               String productTypeFolder = fileFolderService.getFileInfo(rsNodeRef).getName();
               productLibraryList.add(productTypeFolder);               
               logger.info("The ProductTypeFolder Name is :"+productTypeFolder);               
            }
         }
      }
      finally {
         rs1.close();
      }
      
      JSONObject jsonObject = new JSONObject();
      try {
         jsonObject.put("libraryList", productLibraryList);
      } catch (JSONException e) {
         
         logger.error("Error occured while creating Json Object."+e.getMessage());
         
      }
      
      String jsonString = jsonObject.toString();
      res.getWriter().write(jsonString);
      
   }
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Can someone help me on how to access this list in the custom form field.

Re: How to create dynamic multi-select list box in custom form

muralidharand — Wed, 18 Mar 2015 12:11:11 GMT

Hi Satheesh,

It looks your JSON data is invalid format.
The child items should have "[ ]" for the array and you have used "{}" for the child elements.

Here is the correct format.



{
"libList":
[
   "Banner Small",
   "Banner Large"
]
}
‍‍‍‍‍‍‍‍‍‍

Change the FTL like,



<#if isEmpty> [] 

<#else>

{"libraryList":[
<#list libraryList as listItem>

"${listItem}"<#if listItem_has_next>,</#if>

</#list>
]
}

</#if>

‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

You can use the below link to verify the JSON format.
http://json.parser.online.fr/

Please let me know, if it is not helping you.

Re: How to create dynamic multi-select list box in custom form

s_palyukh — Wed, 18 Mar 2015 13:53:34 GMT

Yes, muralidharand is right, you have incorrect JSON response.

Also I think you need to change url from "http://localhost:8080/alfresco/service/retrieve-library-list?retrieve=Product%20Library" to Alfresco.constants.PROXY_URI + "service/retrieve-library-list?retrieve=Product%20Library", if you don't do it you will see popup to fill login and password when your js code will be executed

Re: How to create dynamic multi-select list box in custom form

satheeshkumar — Wed, 18 Mar 2015 17:04:34 GMT

I too noticed the format was wrong after I changed my Java Backed Web Script to render the JSON Response directly. I figured out the correct format, it looks just like yours.
Here is my JSON Output.

{"libraryList":["Banner Small","Buiness Vertical","Banner Medium","Business Accessories","Banner Large"]}‍

But, yeah, it is not helping me yet, my actual problem lies in accessing this JSON List and showing up in my custom form control.
Can you please help me out, I have shown my control template in my above post.

That I tried based on the example given in the link https://forums.alfresco.com/comment/149739#comment-149739
But I was not able to show up this JSON list in that template.

Thanks in Advance.

Re: How to create dynamic multi-select list box in custom form

s_palyukh — Thu, 19 Mar 2015 09:11:48 GMT

It hard to say where is a mistake, you need to debug your JS code… Take a look what do you get in the "res" variable also pay attention on "selectAuthors" maybe it equals null

Re: How to create dynamic multi-select list box in custom form

satheeshkumar — Tue, 07 Apr 2015 06:55:51 GMT

Hi Murali, Can you please let me know the usage syntax of this CheckedMultiSelect in AIKAU.

I don't know the systax of how can I use this widget in AIKAU form.

I have tried with few other widgets like "MultipleEntryFormControl", "SimplePicker", I am able to generate the custom list and show in UI, but each one is creating different problems while submitting the form.

For Example,
With "SimplePicker" widget, I am getting Error while submitting the form,

//Error I see in the logs when I submit this form

 

2015-04-06 00:06:51,760 [DEBUG] org.alfresco.repo.jscript.RhinoScriptProcessor.executeScriptImpl(RhinoScriptProcessor.java:437) form.post.json.js Start

2015-04-06 00:06:51,762 [DEBUG] org.alfresco.repo.jscript.ScriptLogger.debug(ScriptLogger.java:50) json form submission for item:

2015-04-06 00:06:51,762 [DEBUG] org.alfresco.repo.jscript.ScriptLogger.debug(ScriptLogger.java:50)      kind = type

2015-04-06 00:06:51,763 [DEBUG] org.alfresco.repo.jscript.ScriptLogger.debug(ScriptLogger.java:50)      id = hccm:productTypeFolder

2015-04-06 00:06:51,860 [DEBUG] org.alfresco.repo.jscript.ScriptLogger.debug(ScriptLogger.java:50) java.lang.IllegalArgumentException: Node properties must be fully serializable, including values contained in collections.

   Property: Name: {http://www.mycompany.com/model/content/1.0}imageLibraryList

Title: null

Description: null

Default Value: null

DataType Name: {http://www.alfresco.org/model/dictionary/1.0}text

ContainerClass Name: {http://www.mycompany.com/model/content/1.0}productTypeFolder

isMultiValued: true

isMandatory: false

isMandatoryEnforced: false

isProtected: false

isIndexed: true

isStoredInIndex: false

isIndexedAtomically: true

indexTokenisationMode: TRUE

 

   Index:    0

   Value:    {"index":0,"prop_cm_name":"Images1","alfTopic":"4137d6fa-4ee5-4673-8657-5e707916c89aALF_ITEM_SELECTED","isLastItem":false}

2015-04-06 00:06:51,861 [DEBUG] org.alfresco.repo.jscript.ScriptLogger.debug(ScriptLogger.java:50) Returning 500 status code

2015-04-06 00:06:51,861 [DEBUG] org.alfresco.repo.jscript.RhinoScriptProcessor.executeScriptImpl(RhinoScriptProcessor.java:535) form.post.json.js End 101 ms‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

With "MultipleEntryFormControl", no issues in submitting the form, but the Xpath search ("lucene" and "fts-alfresco") of parent folder not retrieving the child folders created by the form with "MultipleEntryFormControl" widget in it.

So if you let me know the usage syntax of "CheckedMultiSelect", it would be greatly helpful to me.