Prepopulating Select Box With Multiple Row Selection in List

Introduction

This tutorial demonstrates how to prepopulate a select box in a form using multiple row selections from a list. You will learn how to configure both the list and the form to achieve this functionality.

How does it work?

1. In the figure below, you select 2 rows and click on the Add to Form button.
   
2. This would bring us to the page with a form, as shown below. The select box in the form has the 2 options that were checked earlier.
   

Implementing this would require just 2 steps. One at the list level and the other one at the form level.

Configure List Hyperlink Action

1. In the List Builder, add a Hyperlink action to and configure it.
   
2. In the field Hyperlink, point it to a form. In the example below, it is pointing to a new form in a CRUD menu.
3. Add a new parameter to the link and populate it with the ID value.
4. Remember the parameter name declared as we are going to read it from the form later on.
   

Read and populate selection in form builder

Open the intended form that will open up as a result of the button click in the list earlier.

1. In the Form Builder, add a Custom HTML element to read the parameter passed from the list and use it to prepopulate the select box in the form.
   
   
2. Paste the code into the custom HTML element.

   <script type="text/javascript">
       $(function(){
          var value = decodeURIComponent("#requestParam.applications#"); //replace with the parameter name you declared in List action
          var values = value.split(';');
           $.each( values, function( index, value ){
               if(value != ""){
                   $(FormUtil.getField("applications")).find("option[value='" + value + "']").attr('selected', 'selected'); //replace with the field ID of the select box in your form
               }
           });
           //$(FormUtil.getField("applications")).trigger("chosen:updated"); //enable this line if you are using Multi Select Box, replace with the field ID of the select box in your form
       });
   </script>