To understand how to pull values from another form and display it as a list in a dropdown field by setting up an API connection, click here for an example.

Suppose the 'Contract Data' in the example referred under above link also has few other fields capturing related contract details like:

a 'Textbox' control with the field name 'Contract_Number'

a 'Textarea' control with the field name 'Contract_Description'

a 'Datepicker' control with the field name 'Contract_Start_Date'

a 'Repeating Table' control for capturing cost details based on cost code with the field name 'CostCode_Repeating_Table' with the 'Header' option selected in control properties and number of columns set to '3'

a 'Label' control with the field name 'CostCode_Label' for displaying 'Cost Code' as label in the table header of first column in 'Repeating Table'

control

a 'Label' control with the field name 'CostCode_Description_Label' for displaying 'Description' as label in the table header of second column in 'Repeating Table'

control

a 'Label' control with the field name 'CostCode_ContractValue_Label' for displaying 'Contract Value' as label in the table header of third column in 'Repeating Table'

control

a 'Textbox' control with the field name 'Cost_Code' as a field in the first column of 'Repeating Table' control. Remove label if any, as it is already defined in the table header.

a 'Textbox' control with the field name 'CostCode_Description' as a field in the second column of 'Repeating Table' control. Remove label if any, as it is already defined in the table header.

a 'Textbox' control with the field name 'CostCode_Value' as a field in the third column of 'Repeating Table' control. Remove label if any, as it is already defined in the table header.

Then there is another form type called 'Payments' where we need the user to select an option from the dropdown having field name as 'Contract' containing all contract names captured based on the forms created under 'Contract Data' form type.

Once the user selects a contract name from that dropdown, it should then fetch other details for selected contract name and auto-fill that information into the appropriate form fields as per the configuration shown below:

a 'Repeating Table' control for displaying responses of cost details based on cost code with the field name 'Repeating_Table' with the 'Header' option selected in control properties and number of columns set to '3'

a 'Label' control with the field name 'CostCode_Label' for displaying 'Cost Code' as label in the table header of first column in 'Repeating Table'

control

a 'Label' control with the field name 'CostCode_Description_Label' for displaying 'Description' as label in the table header of second column in 'Repeating Table'

control

a 'Label' control with the field name 'CostCode_ContractValue_Label' for displaying 'Contract Value' as label in the table header of third column in 'Repeating Table'

control

a 'Textbox' control with the field name 'Cost_Code' as a field in the first column of 'Repeating Table' control. Remove label if any, as it is already defined in the table header.

a 'Textbox' control with the field name 'CostCode_Description' as a field in the second column of 'Repeating Table' control. Remove label if any, as it is already defined in the table header.

a 'Textbox' control with the field name 'CostCode_Value' as a field in the third column of 'Repeating Table' control. Remove label if any, as it is already defined in the table header.

In such a case, you will need to setup an API connection to pull the contract information based on the contract name selected by the user in the 'Contract' dropdown.

Then, use the drag and drop code editor to define a condition upon the 'onChange' event of 'Contract' dropdown field, in 'Payments' form type. The condition would be to display all the contract information in separate form fields by mapping the related fields based on their field names in 'Contract Data' form type.

1. Follow the steps to setup an API connection on 'Contract' form type and enter information as follows:

Basic Information:

Name - << Enter name as 'Get Contracts Basic Information' >>

API Link - << Select 'Form - Search' >>

Filters:

Project Name == << Select the concerned project where the 'Contract Data' form type is setup and from where the form information is to be received >>

Form Name == << Select the 'Contract Data' form type from where the form information is to be received >>

Form Title == << Leave it Blank >>

Response:

Check if the filter applied is correct and click on 'Test Run' to get the results. Going through the results for the 'Test Run' can help you find out whether the API connection created is able to retrieve the expected form information based on the filter applied.

It is advisable to copy and paste the test run results separately, in case you need to use these API connection results to define AppBuilder scripts based on form data fields returned through API.

Click 'Save' to complete setting up the API connection if the 'Test Run' is returning form information as expected. If you are not getting expected results, you may need to create new / update existing form data / update the filter in the API connection to get relevant results as needed.

First Code Block for deleting unnecessary rows in a repeating table.

Second Code Block for displaying contract information in separate form fields by mapping the related fields based on their field names.

Note: Right click on the image and open in new window/tab for better clarity as needed.

First Code Block for deleting unnecessary rows in a repeating table.

1. From the left panel, go to block category 'Loops'. Select the first block 'repeat' to do some statement several times, drag it to the center of editor.

2. From the left panel, go to block category 'lists'. Select the fourth block 'length of' to return the length of a list, drag it to the center of editor adjoining 'repeat' block as shown below.

3. From the left panel, go to block category 'Repeating Table'. Select the second block 'Get Repeating Table Value', drag it to the center of editor adjoining 'length of' block as shown below.

In 'Select Control Name' dropdown, we will select 'Repeating_Table' to get values from the repeating table field configured in the 'Contract_Data' form type.

4. From the left panel, go to block category 'Repeating Table'. Select the third block 'Set Repeating Table Functionality', drag it to the center of editor adjoining 'do' section in 'repeat' block as shown below.

In 'Select Type' dropdown, we will select 'Auto Delete Row' to delete all unnecessary rows. In the corresponding 'Select Control Name' dropdown, we will select 'Repeating_Table' to specify from where to delete all unnecessary rows.

Second Code Block for displaying contract information in separate form fields by mapping the related fields based on their field names.

1. From the left panel, go to block category 'Custom API Blocks'. Select the first block 'Select API' and drag it to the center of editor.

2. Under 'Select API Name' dropdown within the block, select the name of the API connection that we created as per above steps i.e. 'Get Contract Basic Information'.

3. From the left panel, go to block category 'Custom Functions'. Select the 'Set Value' block and drag it to the center adjoining the 'Select API' block as shown below.

In the 'Set Value' block, select the control name as 'Contract_Number'.

4. From the left panel, go to block category 'Custom API Blocks'. Select the block 'API Data' and place it opposite the 'Value' field.

5. From the left panel, go to block category 'lists'. Select the 7th block 'in list' with 'get' option selected in dropdown, and drag it to the block adjoining '.

7. Now replace the 'list' block inside the 'in list' block added as per step 6 with a new 'API Data' block. From the left panel, go to block category 'Custom API Blocks'. Select the block 'API Data' and place it in a way that it replaces the 'list' block.

Here, we need to select a value in the dropdown matches the variable as per the block setup in step 2 above. In this example, variable showing was 'i' so we will select that variable in the dropdown (instead of 'list').

In 'Select Field' dropdown, we will select 'FormList.Form' to get list of form fields as per API selected in step 2 above.

8. From the left panel, go to block category 'Math'. Select the 1st block 'A number' and drag it to the center adjoining he blank box opposite the 'API Data' block (created as per step 7) as shown below. Replace value '0' with '1'.

9. Select the field required for mapping with 'Contract_Number' control name in the corresponding dropdown.

10. Now select the entire 'Set Value' block that we created (as in step 9) and copy it below the same block as shown below.

Here, select the field required for mapping with 'Contract_Start_Date' control name in the corresponding dropdown.

11. Now select the entire 'Set Value' block that we created (as in step 9) and copy it below the second block as shown below.

Here, select the field required for mapping with 'Contract_Address' control name in the corresponding dropdown.

12. From the left panel, go to block category 'Loops'. Select the 1st 'repeat' block and drag it to the center below the 'Set Value' block created as per previous step.

13. (In the 'repeat' block added as per previous step 12)

From the block category 'Math', select the fourth block for getting the sum of two numbers, and drag it to the center adjoining the 'repeat' block as shown below.

14. (In the 'repeat' block added as per step 12)

From the block category 'lists', select the fourth block for returning the length of a list, and drag it to the center adjoining the 'repeat' block as shown below.

15. (In the 'repeat' block added as per step 12)

From the block category 'Custom API Blocks', select the second block 'API Data', and drag it to the center adjoining the 'length of' block as shown below.

16. (In the 'repeat' block added as per step 12)

From the left panel, go to block category 'lists'. Select the 7th block 'in list' with 'get' option selected in dropdown.

17. (In the 'repeat' block added as per step 12)

Now replace the 'list' block inside the 'in list' block added as per step 6 with a new 'API Data' block. From the left panel, go to block category 'Custom API Blocks'. Select the block 'API Data' and place it in a way that it replaces the 'list' block.

Here, we need to select a value in the dropdown matches the variable as per the block setup in step 2 above. In this example, variable showing was 'i' so we will select that variable in the dropdown (instead of 'list').

In 'Select Field' dropdown, we will select 'FormList.Form' to get list of form fields as per API selected in step 2 above.

18. (In the 'repeat' block added as per step 12)

From the left panel, go to block category 'Math'. Select the 1st block 'A number' and drag it to the center adjoining the blank box opposite the 'API Data' block (created as per step 7) as shown below. Replace value '0' with '1'.

In 'Select Field' dropdown, we will select repeating table field from the list of form fields to get data from API selected in step 2 above. In this example, we have selected the field 'FormDetails.DBCustomFields.myFields.Repeating_Table.value'.

19. (In the 'repeat' block added as per step 12)

Form the left panel, go to block category 'Repeating Table'. Select the 3rd block 'Set Repeating Table Functionality' and drag it to the center adjoining the 'repeat' block as shown below.

Here, select type as 'Auto Insert Row' and then control name as 'Repeating_Table'.
​

20. From the block category 'Variables', select the option 'Create Variable' and enter new variable name as 'RowIndex' and click 'OK'.

21. (Below the 'repeat' block added as per step 12)

From the block category 'Variables', select the second block for setting the selected variable to be equal to the input, and drag it to the center below the 'repeat' block.

Here, we need to ensure the variable selection in the dropdown matches the variable 'RowIndex' defined as per step 20 above.

22. (In the 'set' block added as per step 21)

From the left panel, go to block category 'Math'. Select the 1st block 'A number' and drag it to the center adjoining the 'set' block as shown below. Replace value '0' with '1'.

23. (Below the 'set' block added as per step 21)

From the left panel, go to block category 'Loops'. Select the 4th block 'for each item in list' and drag it to the center below the 'set' block.

Here, we need to set the variable selection in the dropdown to the relevant variable which is different from the one defined earlier. In this example, we are selecting 'j'.

24. (In the 'for each item in list' block added as per step 23)

From the left panel, go to block category 'Repeating Table'. Select the 2nd block 'Get Repeating Table Value' and drag it to the center adjoining the 'for each item in list block' as shown below. In the dropdown for 'Get Repeating Table Value' select 'Repeating_Table'.

25. (In the 'for each item in list' block added as per step 23)

From the left panel, go to block category 'Custom Functions'. Select the 'Set Value' block and drag it to the center adjoining the 'for each item in list' block as shown below.

26. (In the 'for each item in list' block added as per step 23)

From the left panel, go to block category 'Custom API Blocks'. Select the block 'API Data' and place it opposite the 'Value' field.

27. (In the 'for each item in list' block added as per step 23)

From the left panel, go to block category 'lists'. Select the 7th block 'in list' with 'get' option selected in dropdown, and place it opposite 'API Data' field as shown below.

28. (In the 'for each item in list' block added as per step 23)

Now replace the 'list' block inside the 'in list' block added as per step 27 with a new 'API Data' block. From the left panel, go to block category 'Custom API Blocks'. Select the block 'API Data' and place it in a way that it replaces the 'list' block.

29. (In the 'for each item in list' block added as per step 23)

Again, from the left panel, go to block category 'lists'. Select the 7th block 'in list' with 'get' option selected in dropdown, and place it opposite 'API Data' field as shown below.

30. (In the 'for each item in list' block added as per step 23)

Again, replace the 'list' block inside the 'in list' block added as per step 29 with a new 'API Data' block. From the left panel, go to block category 'Custom API Blocks'. Select the block 'API Data' and place it in a way that it replaces the 'list' block.

In the 'list' dropdown, select value 'i'.

In 'Select Field' dropdown, we will select 'FormList.Form' to get list of form fields as per API selected in step 2 above.

31. (In the 'for each item in list' block added as per step 23)

From the left panel, go to block category 'Math'. Select the 1st block 'A number' and drag it to the center adjoining he blank box opposite the 'API Data' block (created as per step 30) as shown below. Replace value '0' with '1'.

32. (In the 'for each item in list' block added as per step 23)

In 'Select Field' dropdown, we will select repeating table field from the list of form fields to get data of repeating table from API selected in step 2 above. In this example, we have selected the field 'FormDetails.DBCustomFields.myFields.Repeating_Table.value'.

33. (In the 'for each item in list' block added as per step 23)

From the left panel, go to block category 'Variables'. Select the variable 'RowIndex' we created as per step 20 above, and drag it to the center adjoining the 'in list' block that we added as per step 27.

Select the field row item required for mapping with 'Cost_Code' control name in the corresponding dropdown. In this example, we have selected 'FormDetails.DBCustomFields.myFields.RepeatingTable.defauultRowData.Cost_Code'

From the left panel, go to block category 'Variables'. Select the variable 'j' we selected as per step 26 above, and drag it to the center opposite the 'Scope' field adjoining the 'Set Value' block.

34. (In the 'for each item in list' block added as per step 23)

Now select the entire 'Set Value' block that we created (as in step 25) and copy it below the same block as shown below.

Here, select the field required for mapping with 'CostCode_Value' control name in the corresponding dropdown.

35. (In the 'for each item in list' block added as per step 23)

Now select the entire 'Set Value' block that we created (as in step 25) and copy it below the second block as shown below.

Here, select the field required for mapping with 'CostCode_Description' control name in the corresponding dropdown.

36. (In the 'for each item in list' block added as per step 23)

From the block category 'Variables', select the second block for setting the selected variable to be equal to the input, and drag it to the center below the third 'Set Value' block.

Here, we need to ensure the variable selection in the dropdown matches the variable 'RowIndex' defined as per step 20 above.

37. (In the 'for each item in list' block added as per step 23)

From the block category 'Math', select the fourth block for getting the sum of two numbers, and drag it to the center adjoining the 'set' block as shown below.

38. (In the 'for each item in list' block added as per step 23)

From the left panel, go to block category 'Variables'. Select the variable 'RowIndex' we created as per step 20 above, and drag it to the center adjoining the 'set' block that we added as per step 36.

39. Once done, click 'OK' (at bottom right) to save the changes and exit the code editor, then save / publish the form design as needed. Once the form design is published and executed, the changes will be applicable for the new forms created under the related form type.

40. While creating a new 'Payments' form next time onwards, user can select the contract value from the dropdown list and based on the selected option, other details in the form will get pre-populated.