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

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

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

Children
No Data