RE: Checkbox

Question

Hi Everyone, 
 
 I am trying to achieve multi selection checkbox but its not working as expected 
 a!checkboxField(
 label: "",
 choiceLabels: cons!CR_TXT_CHOICE_LABELS_YES_NO[1],
 choiceValues: cons!CR_APP_INT_CHOICE_VALUES[1],
 value: if(
 contains(
 cons!CR_APP_INT_CHOICE_VALUES[1],
 tointeger(local!selectionFlag_int)
 ),
 tointeger(local!selectionFlag_int),
 null()
 ),
 saveInto: local!selectionFlag_int,
 align: "LEFT"
 ), Currently, If I select one checkbox it is selecting all checkbox ,But I want to select multi checkbox ,How would I achieve this, can anyone correct this code . 
 Thanks in Advance.

Soma · Answer

It seems like, In the choice labels and choice values you are indexing the first value of the constant. Pass the constant without any indexing and remove the if condition logic in the value parameter and pass local!selectionFlag directly. 
 a!localVariables(
 local!selectionFlag_int,
 a!checkboxField(
 label: "",
 choiceLabels: {"Yes","No","Maybe"},
 choiceValues: {1,2,3},
 value: local!selectionFlag_int,
 saveInto: local!selectionFlag_int,
 align: "LEFT"
 ),
)

Soma · Answer

Then you can just remove the choice label and pass list of empty text in choice labels. Note that number of empty text in choice label must match number of choice values 
 a!localVariables(
 local!selectionFlag_int,
 a!checkboxField(
 label: "",
 choiceLabels: {"","",""},
 choiceValues: {1,2,3},
 value: local!selectionFlag_int,
 saveInto: local!selectionFlag_int,
 align: "LEFT"
 )
)

Soma · Answer

Please refer "Grid with selection" pattern in the interface designer or refer the code below 
 {
 a!localVariables(
 /* This variable is used to persist the checkbox on selected items by holding the identifiers of the selected rows. */
 local!selection,
 /* This variable would be used to pass the full rows of data on the selected items out of this interface, such as to a process model. */
 local!selectedEmployees,
 {
 a!columnsLayout(
 columns:{
 a!columnLayout(
 contents:{
 a!gridField(
 label: "Employee Directory",
 /* Replace the dummy data with a query, rule, or function that returns a datasubset and uses fv!pagingInfo as the paging configuration. */
 data: todatasubset(
 {
 a!map(id: 11, name: "Elizabeth Ward", dept: "Engineering", role: "Senior Engineer", team: "Front-End Components", pto: 15, startDate: today()-500),
 a!map(id: 22, name: "Michael Johnson", dept: "Finance", role: "Payroll Manager", team: "Accounts Payable", pto: 2, startDate: today()-100),
 a!map(id: 33, name: "John Smith", dept: "Engineering", role: "Quality Engineer", team: "User Acceptance Testing", pto: 5, startDate: today()-1000),
 a!map(id: 44, name: "Diana Hellstrom", dept: "Engineering", role: "UX Designer", team: "User Experience", pto: 49, startDate: today()-1200),
 a!map(id: 55, name: "Francois Morin", dept: "Sales", role: "Account Executive", team: "Commercial North America", pto: 15, startDate: today()-700),
 a!map(id: 66, name: "Maya Kapoor", dept: "Sales", role: "Regional Director", team: "Front-End Components", pto: 15, startDate: today()-1400),
 a!map(id: 77, name: "Anthony Wu", dept: "Human Resources", role: "Benefits Coordinator", team: "Accounts Payable", pto: 2, startDate: today()-300)
 },
 fv!pagingInfo
 ),
 columns: {
 a!gridColumn(
 label: "Name",
 sortField: "name",
 value: fv!row.name
 ),
 a!gridColumn(
 label: "Department",
 sortField: "dept",
 value: fv!row.dept
 ),
 a!gridColumn(
 label: "Start Date",
 sortField: "startDate",
 value: fv!row.startDate,
 align: "END"
 )
 },
 pageSize: 7,
 selectable: true,
 selectionValue: local!selection,
 selectionSaveInto: {
 local!selection,
 /* This save adds the full rows of data for items selected in the most recent user interaction to local!selectedEmployees. */
 a!save(local!selectedEmployees, append(local!selectedEmployees, fv!selectedRows)),
 /* This save removes the full rows of data for items deselected in the most recent user interaction to local!selectedEmployees. */
 a!save(local!selectedEmployees, difference(local!selectedEmployees, fv!deselectedRows))
 }
 )
 }
 )
 },
 stackWhen: {
 "PHONE",
 "TABLET_PORTRAIT"
 }
 )
 }
 )
}