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

  • ChoiceLabel:"Yes",
    ChoiceValue: 1

    No I do not want Any Choice Label here and there should be one Choice value.

  • Are you looking for a single check box without any label

  • Okay, I need a checkbox that user can select single or multiple checkbox at a time ,There is no checkbox label.

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

  • According to above code ,If I select one checkbox it is selected for all the rows by default, This should not happen like this User has to select checkbox  

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

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

Children
No Data