RE: Checkbox

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.

  Discussion posts and replies are publicly visible

Parents Reply Children
  • May i know why you attached a checkbox field code in the question?

    Are you using an editable grid?

    If it is a readonly grid, I suggest you to use the selection parameter which comes as part of the grid. Please pass selectable as true and use the following parameters.

    selectable: true,
    selectionValue: local!selection,
    selectionSaveInto: 

  • yeah It is ReadOnly grid But I need to provide one option to user to select multiple rows and on select of multiple rows need to enable multidrop down.

  • 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"
            }
          )
        }
      )
    }