Disable default Selection of all rows in a grid field

Hello,

We have a requirement to display certain statements in the form of checklist, so the user would read one by one and check it. The statement also contains links. Our initially idea was to have checkbox field in an array to display the items as a checklist. But now since links are involved in the items, we cannot really use checkbox field as the field labels can only be of text there. The other way around we could think of is displaying it in a grid field. Links is achievable here. But the check issue, when we disable the selection, we get a default selection option (Selecting all ) along with the column title. We would not want to have this option because, the primary goal is to read through every item in the list and click on the checkbox. So any idea to remove the All Selection option ? 

Thanks

Nandini

  Discussion posts and replies are publicly visible

  • Hi Nandini,

    We cannot hide the 'select all' checkbox if we go with the read-only grid's default selection style(CHECKBOX). Some workarounds are:

    • We can use the 'ROW_HIGHLIGHT' selection style if it is suitable for your use case.
    • If not, you can hide the default selection pattern of the read-only grid & can include a custom checkbox column using a rich text field. Provided a sample code here for reference(Note: The icon can be further customized as per your need).
      a!localVariables(
          /* 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!map(),
          {
            a!richTextDisplayField(
              label: "",
              labelPosition: "COLLAPSED",
              value: {
                a!richTextHeader(text: "Performance Review Portal")
              }
            ),
            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: "",
                          sortField: "",
                          value: a!richTextDisplayField(
                            value: if(
                              contains(local!selectedEmployees, fv!row),
                              a!richTextIcon(
                                icon: "check-square-o",
                                link: a!dynamicLink(
                                  saveInto: a!save(
                                    local!selectedEmployees,
                                    difference(local!selectedEmployees, fv!row)
                                  )
                                )
                              ),
                              a!richTextIcon(
                                icon: "square-o",
                                link: a!dynamicLink(
                                  saveInto: a!save(
                                    local!selectedEmployees,
                                    { local!selectedEmployees, fv!row }
                                  )
                                )
                              )
                            )
                          ),
                          width: "ICON"
                        ),
                        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: 3,
                      selectable: false()
                    )
                  }
                )
              },
              stackWhen: { "PHONE", "TABLET_PORTRAIT" }
            )
          }
        )

    Regards,

    Selva