To understand how to pull values from another form and display them 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 to under the above link also has a 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 a label in the table header of the first column in 'Repeating Table'
control
a 'Label' control with the field name 'CostCode_Description_Label' for displaying 'Description' as a label in the table header of the second column in 'Repeating Table'
control
a 'Label' control with the field name 'CostCode_ContractValue_Label' for displaying 'Contract Value' as a label in the table header of the third column in 'Repeating Table'
control
a 'Textbox' control with the field name 'Cost_Code' as a field in the first column of the '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 the '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 the '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 the 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 a label in the table header of the first column in 'Repeating Table'
control
a 'Label' control with the field name 'CostCode_Description_Label' for displaying 'Description' as a label in the table header of the second column in 'Repeating Table'
control
a 'Label' control with the field name 'CostCode_ContractValue_Label' for displaying 'Contract Value' as a label in the table header of the third column in 'Repeating Table'
control
a 'Textbox' control with the field name 'Cost_Code' as a field in the first column of the '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 the '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 the 'Repeating Table' control. Remove label if any, as it is already defined in the table header.
In such a case, you will need to set up 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 the 'Contract' dropdown field, in the '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 the 'Contract Data' form type.
Below are the steps you need to follow for setting up an API connection to pull the contract information based on the contract name selected by the user in the 'Contract' dropdown.
Follow the steps to set up an API connection on the '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 set up 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 the 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.
Below are the steps to use the drag and drop code editor to define a condition upon the 'onChange' event of the 'Contract' dropdown field, in the '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 the 'Contract Data' form type.
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 a new window/tab for better clarity as needed.
First Code Block for deleting unnecessary rows in a repeating table.
From the left panel, go to the block category 'Loops'. Select the first block 'repeat' to repeat some statement several times, and drag it to the centre of the editor.
From the left panel, go to the block category 'lists'. Select the fourth block 'length of' to return the length of a list, drag it to the centre of the editor adjoining the 'repeat' block as shown below.
From the left panel, go to the block category 'Repeating Table'. Select the second block 'Get Repeating Table Value', drag it to the centre of the editor adjoining the 'length of' block as shown below.
In the 'Select Control Name' dropdown, we will select 'Repeating_Table' to get values from the repeating table field configured in the 'Contract_Data' form type.
From the left panel, go to the block category 'Repeating Table'. Select the third block 'Set Repeating Table Functionality', drag it to the centre of the editor adjoining the 'do' section in 'repeat' block as shown below.
In the '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.
From the left panel, go to the block category 'Custom API Blocks'. Select the first block 'Select API' and drag it to the centre of the editor.
Under the 'Select API Name' dropdown within the block, select the name of the API connection that we created as per the above steps, i.e. 'Get Contract Basic Information'.
From the left panel, go to the block category 'Custom Functions'. Select the 'Set Value' block and drag it to the centre adjoining the 'Select API' block as shown below.
In the 'Set Value' block, select the control name as 'Contract_Number'.
From the left panel, go to the block category 'Custom API Blocks'. Select the block 'API Data' and place it opposite the 'Value' field.
From the left panel, go to the block category 'lists'. Select the 7th block 'in list' with 'get' option selected in the dropdown, and drag it to the block adjoining.
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 the 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 that matches the variable as per the block setup in step 2 above. In this example, the variable shown was 'i' so we will select that variable in the dropdown (instead of 'list').
In the 'Select Field' dropdown, we will select 'FormList.Form' to get a list of form fields as per the API selected in step 2 above.
From the left panel, go to the block category 'Math'. Select the 1st block 'A number' and drag it to the centre adjoining he blank box opposite the 'API Data' block (created as per step 6) as shown below. Replace value '0' with '1'.
Select the field required for mapping with 'Contract_Number' control name in the corresponding dropdown.
Note: When selecting the fields, check to see that the field name starts with 'FormDetails.DBCustomFields'.
Now select the entire 'Set Value' block that we created (as in step 8) and copy it below the same block as shown below.
Here, select the field required for mapping with the 'Contract_Start_Date' control name in the corresponding dropdown.
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 the 'Contract_Address' control name in the corresponding dropdown.
From the left panel, go to the block category 'Loops'. Select the 1st 'repeat' block and drag it to the centre below the 'Set Value' block created as per the previous step.
(In the 'repeat' block added as per the previous step 11)
From the block category 'Math', select the fourth block for getting the sum of two numbers, and drag it to the centre adjoining the 'repeat' block as shown below.
(In the 'repeat' block added as per step 11)
From the block category 'lists', select the fourth block for returning the length of a list, and drag it to the centre adjoining the 'repeat' block as shown below.
(In the 'repeat' block added as per step 11)
From the block category 'Custom API Blocks', select the second block 'API Data', and drag it to the centre adjoining the 'length of' block as shown below.
(In the 'repeat' block added as per step 11)
From the left panel, go to the block category 'lists'. Select the 7th block 'in list' with 'get' option selected in the dropdown.
(In the 'repeat' block added as per step 11)
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 the 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 that matches the variable as per the block setup in step 2 above. In this example, the variable shown was 'i' so we will select that variable in the dropdown (instead of 'list').
In the 'Select Field' dropdown, we will select 'FormList.Form' to get a list of form fields as per the API selected in step 2 above.
(In the 'repeat' block added as per step 11)
From the left panel, go to the block category 'Math'. Select the 1st block 'A number' and drag it to the centre adjoining the blank box opposite the 'API Data' block (created as per step 6) as shown below. Replace value '0' with '1'.
In the 'Select Field' dropdown, we will select a repeating table field from the list of form fields to get data from the API selected in step 2 above. In this example, we have selected the field 'FormDetails.DBCustomFields.myFields.Repeating_Table.value'.
(In the 'repeat' block added as per step 11)
From the left panel, go to the block category 'Repeating Table'. Select the 3rd block 'Set Repeating Table Functionality' and drag it to the centre adjoining the 'repeat' block as shown below.
Here, select type as 'Auto Insert Row' and then control name as 'Repeating_Table'.
From the block category 'Variables', select the option 'Create Variable' and enter a new variable name as 'RowIndex' and click 'OK'.
--
(Below the 'repeat' block added as per step 11)
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 centre below the 'repeat' block.
Here, we need to ensure the variable selection in the dropdown matches the variable 'RowIndex' defined as per step 19 above.
(In the 'set' block added as per step 20)
From the left panel, go to the block category 'Math'. Select the 1st block 'A number' and drag it to the centre adjoining the 'set' block as shown below. Replace value '0' with '1'.
(Below the 'set' block added as per step 20)
From the left panel, go to the block category 'Loops'. Select the 4th block 'for each item in list' and drag it to the centre below the 'set' block.
Here, we need to set the variable selection in the dropdown to the relevant variable, different from the one defined earlier. In this example, we are selecting 'j'.
(In the 'for each item in list' block added as per step 22)
From the left panel, go to the block category 'Repeating Table'. Select the 2nd block 'Get Repeating Table Value' and drag it to the centre adjoining the 'for each item in list block' as shown below. In the dropdown for 'Get Repeating Table Value', select 'Repeating_Table'.
(In the 'for each item in list' block added as per step 22)
From the left panel, go to the block category 'Custom Functions'. Select the 'Set Value' block and drag it to the centre adjoining the 'for each item in list' block as shown below.
(In the 'for each item in list' block added as per step 22)
From the left panel, go to the block category 'Custom API Blocks'. Select the block 'API Data' and place it opposite the 'Value' field.
(In the 'for each item in list' block added as per step 22)
From the left panel, go to the block category 'lists'. Select the 7th block 'in list' with 'get' option selected in the dropdown, and place it opposite the 'API Data' field as shown below.
(In the 'for each item in list' block added as per step 22)
Now, replace the 'list' block inside the 'in list' block added as per step 26 with a new 'API Data' block. From the left panel, go to the block category 'Custom API Blocks'. Select the block 'API Data' and place it in a way that it replaces the 'list' block.
(In the 'for each item in list' block added as per step 22)
Again, from the left panel, go to the block category 'lists'. Select the 7th block 'in list' with 'get' option selected in the dropdown, and place it opposite the 'API Data' field as shown below.
(In the 'for each item in list' block added as per step 22)
Again, replace the 'list' block inside the 'in list' block added as per step 28 with a new 'API Data' block. From the left panel, go to the 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 the 'Select Field' dropdown, we will select 'FormList.Form' to get a list of form fields as per the API selected in step 2 above.
(In the 'for each item in list' block added as per step 22)
From the left panel, go to the block category 'Math'. Select the 1st block 'A number' and drag it to the centre adjoining he blank box opposite the 'API Data' block (created as per step 29) as shown below. Replace value '0' with '1'.
(In the 'for each item in list' block added as per step 22)
In the 'Select Field' dropdown, we will select the repeating table field from the list of form fields to get data of the repeating table from the API selected in step 2 above. In this example, we have selected the field 'FormDetails.DBCustomFields.myFields.Repeating_Table.value'.
(In the 'for each item in list' block added as per step 22)
From the left panel, go to the block category 'Variables'. Select the variable 'RowIndex' we created as per step 19 above, and drag it to the centre adjoining the 'in list' block that we added as per step 26.
Select the field row item required for mapping with the '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 the block category 'Variables'. Select the variable 'j' we selected as per step 22 above, and drag it to the centre opposite the 'Scope' field adjoining the 'Set Value' block.
(In the 'for each item in list' block added as per step 22)
Now select the entire 'Set Value' block that we created (as in step 24) and copy it below the same block as shown below.
Here, select the field required for mapping with the 'CostCode_Value' control name in the corresponding dropdown.
(In the 'for each item in list' block added as per step 22)
Now select the entire 'Set Value' block that we created (as in step 24) and copy it below the second block as shown below.
Here, select the field required for mapping with the 'CostCode_Description' control name in the corresponding dropdown.
(In the 'for each item in list' block added as per step 22)
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 centre 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 19 above.
(In the 'for each item in list' block added as per step 22)
From the block category 'Math', select the fourth block for getting the sum of two numbers, and drag it to the centre adjoining the 'set' block as shown below.
(In the 'for each item in list' block added as per step 22)
From the left panel, go to the block category 'Variables'. Select the variable 'RowIndex' we created as per step 20 above, and drag it to the centre adjoining the 'set' block that we added as per step 35.
While creating a new 'Payments' form next time onwards, the 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.