Editable Grid

Question

Hi, 
 
 I have a requirement in where user can add new element in drop down field. 
 For ex: if drop down field contains element : {"apple" , "orange" , "pineapple" , other }. 
 Then on clicking other he/she should be able to add new element in dropdown. 
 Thanks and Regards,

Harsha Sharma · Accepted Answer

Yeah you can achieve this just need to modify the code somewhat. Something like: 
 load(
 local!choiceData: {
 "apple",
 "orange",
 "pineapple",
 "other"
 },
 local!selectedData,
 local!newOption,
 a!formlayout(
 contents: {
 a!gridLayout(
 label: "Grid",
 headerCells: {
 a!gridLayoutHeaderCell(
 label: "Field 1"
 )
 },
 columnConfigs: {
 a!gridLayoutColumnConfig(
 width: "DISTRIBUTE"
 )
 },
 rows: a!gridRowLayout(
 contents: {
 a!dropdownField(
 label: "Example",
 choiceLabels: local!choiceData,
 placeholderLabel: "Select",
 choiceValues: local!choiceData,
 value: local!selectedData,
 saveInto: {
 local!selectedData,
 a!save(
 local!newOption,
 null
 )
 },
 showWhen: local!selectedData <> "other"
 ),
 a!textField(
 label: "Enter new value",
 value: local!newOption,
 saveInto: {
 local!newOption,
 a!save(
 local!choiceData,
 if(
 rule!APN_isBlank(
 save!value
 ),
 local!choiceData,
 append(
 local!choiceData,
 save!value
 )
 )
 ),
 a!save(
 local!selectedData,
 save!value
 )
 },
 showWhen: local!selectedData = "other"
 )
 }
 )
 )
 }
 )
) 
 This will change the dropdown into a textfield in place as soon as user enters the new element automatically changes textfield back to dropdown. You can modify as required.

Harsha Sharma · Answer

You can achieve this by enabling a textField() whenever user selects "Other" option. The user can enter new option in the said text field and inside the saveInto of this textField, you can update the elements array that is provided in dropdown. 
 load(
 local!choiceData: {
 "apple",
 "orange",
 "pineapple",
 "other"
 },
 local!selectedData,
 local!newOption,
 a!formlayout(
 contents: {
 a!dropdownField(
 label: "Example",
 choiceLabels: local!choiceData,
 placeholderLabel: "Select",
 choiceValues: local!choiceData,
 value: local!selectedData,
 saveInto: local!selectedData
 ),
 a!textField(
 label: "Enter new value",
 value: local!newOption,
 saveInto: {
 local!newOption,
 a!save(
 local!choiceData,
 if(
 rule!APN_isBlank(
 save!value
 ),
 local!choiceData,
 append(
 local!choiceData,
 save!value
 )
 )
 )
 },
 showWhen: local!selectedData = "other"
 )
 }
 )
) 
 You can refer this if it helps, for a grid you will need to make some tweeks though! 
 Hope this helps.

Editable Grid

Top Replies