Dropdown field configuration

Question

Hi Experts, 
 
 I have a requirement where I need to configure gridLayout in such a way that I can add rows maximum to number of data I have in a local variable, i.e if value in localVariable is {"ABC","DEF","GHI","JKL"} the only 4 row can be added at max. 
 Grid needs to have 2 columns where first column will display the value in a dropdown field, the value once selected in the row should not appear in the next row, i.e if value stored in localVariable is: {"ABC","DEF","GHI","JKL"}, we should be able to select any of the four value in the dropdown of the first row, in next row we should only be able to select from the remaining three options and so on 
 On the same time the second column will display the data in dropdown, value being dependent on the value selected in first column of the same row. 
 
 Need your suggestion on the above configuration.

Chris · Accepted Answer

Hi, here's a sample grid to get us going. This should satisfy your requirements, with the exception of modifying the second column to handle whatever you need for the that dropdown for local!rows[fv!index].col2 based on local!rows[fv!index].col1. This allows a maximum of rows added to match the options list, and removes values from the dropdowns as they are selected in other rows. 
 a!localVariables(
 local!options: {"ABC","DEF","GHI","JKL"},
 local!rows,
 
 a!gridLayout(
 headerCells: {
 a!gridLayoutHeaderCell(label: "Column 1"),
 a!gridLayoutHeaderCell(label: "Column 2"),
 },
 rows: {
 a!forEach(
 items: local!rows,
 expression: a!gridRowLayout(
 id: fv!index,
 contents: {
 a!localVariables(
 local!ddlOptions: reject(
 fn!isnull,
 append(
 difference(
 local!options,
 a!forEach(
 items: local!rows.col1,
 expression: tostring(fv!item)
 )
 ),
 local!rows[fv!index].col1
 )
 ),
 a!dropdownField(
 placeholder: "-- Select --",
 choiceLabels: local!ddlOptions,
 choiceValues: local!ddlOptions,
 value: fv!item.col1,
 saveInto: local!rows[fv!index].col1
 )
 ),
 a!textField(
 readOnly: true,
 value: fv!item.col1
 )
 }
 )
 )
 },
 addRowLink: a!dynamicLink(
 showWhen: count(local!rows)<count(local!options),
 label: "Add a Row",
 saveInto: a!save(local!rows,append(local!rows,{col1: null, col2: null}))
 )
 )
)

Dropdown field configuration

Top Replies