nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

As we transition to the new Hyland Community, some post links may be temporarily disrupted as we finalize redirects. We apologize for the inconvenience and are working to resolve this as quickly as possible. Details.

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

satheeshkumar

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 sub folder and pass it as a list to that multi-select box.
Is there any OOTB widgets available to be used, or do I need to write a custom widget, if so can you please help me with a sample example on how to do this.

Thanks in Advance.

Find more posts tagged with

Comments

s_palyukh

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

satheeshkumar

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.

s_palyukh

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

muralidharand

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.

satheeshkumar

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?

response.JPG

satheeshkumar

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.

muralidharand

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.

s_palyukh

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

satheeshkumar

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.