Button in Grid

Hi Everyone,

I have ha grid having four columns that have a button at the last column.

The button is record field action and the grid is selectable. I would like to display the button in that row only which is selected. Can anyone please help me how to achieve this.

  Discussion posts and replies are publicly visible

  • 0
    Certified Associate Developer

    Hi Rahul,

     I hope we are saving the selected rows locally. If yes, we can use a particular condition to do so. Take the reference from the below code, You can compare the unique column in the "contains" function.

     

    Let me know if you need more clarification on this.


  • 0
    Certified Senior Developer

    Please refer to this code. You can replace the button with Record action

    {
      a!localVariables(
        local!employees: {
          {id: 1, name: "Elizabeth Ward",  dept: "Engineering",     role: "Senior Engineer",      team: "Front-End Components",     pto: 15, startDate: today()-500},
          {id: 2, name: "Michael Johnson", dept: "Finance",         role: "Payroll Manager",      team: "Accounts Payable",         pto: 2,  startDate: today()-100},
          {id: 3, name: "John Smith",      dept: "Engineering",     role: "Quality Engineer",     team: "User Acceptance Testing",  pto: 5,  startDate: today()-1000},
          {id: 4, name: "Diana Hellstrom", dept: "Engineering",     role: "UX Designer",          team: "User Experience",          pto: 49, startDate: today()-1200},
          {id: 5, name: "Francois Morin",  dept: "Sales",           role: "Account Executive",    team: "Commercial North America", pto: 15, startDate: today()-700},
          {id: 6, name: "Maya Kapoor",     dept: "Sales",           role: "Regional Director",    team: "Front-End Components",     pto: 15, startDate: today()-1400},
          {id: 7, name: "Anthony Wu",      dept: "Human Resources", role: "Benefits Coordinator", team: "Accounts Payable",         pto: 2,  startDate: today()-300}
        },
        local!selectedEmployee,
        local!selectedId,
        local!isButtonSelected,
        {
          a!columnsLayout(
            columns: {
              a!columnLayout(
                contents: {
                  a!sectionLayout(
                    label: "Employees",
                    contents: {
                      a!gridField(
                        data: todatasubset(
                          local!employees,
                          fv!pagingInfo
                        ),
                        columns: {
                          a!gridColumn(
                            label: "Name",
                            value: fv!row.name
                          ),
                          a!gridColumn(
                            label: "Department",
                            value: fv!row.dept
                          ),
                          /*Here you can replace this button with record action*/
                          a!gridColumn(
                            label: "Button",
                            value: a!buttonArrayLayout(
                              buttons:a!buttonWidget(
                                label:"Take Action",
                                style:"SOLID",
                                confirmMessage:"Do you want to take action?",
                                width:"MINIMIZE",
                                value:true,
                                saveInto: local!isButtonSelected,
                                /*Logic to show the button. */
                                showWhen:contains(tointeger(local!selectedId),fv!identifier)
                              ))
                          )
                        },
                        pageSize: 7,
                        selectable: true,
                        selectionStyle: "CHECKBOX",
                        selectionValue: index(local!selectedEmployee, "id", {}),
                        selectionSaveInto: {
                          /*Storing id to enable the button*/
                          local!selectedId,
                          /*Below logic is for selecting only recently selected*/
                          /* This save replaces the value of the previously selected item with that of the newly selected item, ensuring only one item can be selected at once.*/
                          a!save(
                            local!selectedEmployee,
                            if(
                              length(fv!selectedRows) > 0,
                              fv!selectedRows[length(fv!selectedRows)],
                              null
                            )
                          ),
                          a!save(
                            local!selectedId,
                            if(
                              length(fv!selectedRows) > 0,
                              fv!selectedRows[length(fv!selectedRows)].id,
                              null
                            )
                          ),
                          
                        },
                        shadeAlternateRows: false,
                        rowHeader: 1
                      )
                    }
                  )
                }
              ),
              a!columnLayout(
                contents: {
                  
                }
              )
            },
            stackWhen: {
              "PHONE",
              "TABLET_PORTRAIT"
            }
          )
        }
      )
    }