Skip to main content
sushilk5185
New Participant
April 18, 2023
Solved

How to implement two grid with functionality select some item from grid 1 and click add button to put all that item to grid 2.

  • April 18, 2023
  • 4 replies
  • 4 views

I want to make UI where two grid will be shown grid 1 will have all data and grid 2 will be initially empty. In grid 1 we have checkbox where we can select different row and when we click add button then all selected items will be transferred to the second grid and selected item will be deleted from grid 1.

 

Best answer by amans0009

you can take references from this Interface pattern Dual pickList.

4 replies

Inspiring
April 18, 2023

There is a pattern waiting for you in Interface designer called "Dual Picklist".

amans0009
amans0009Answer
Participating Frequently
April 18, 2023

you can take references from this Interface pattern Dual pickList.

sushilk5185
New Participant
April 18, 2023

It's really helpful. Thank you so much.

Inspiring
April 18, 2023

Just an example of how you can implement the dual picklist pattern in terms of grids.

a!localVariables(
  local!availableList: {
    a!map(id: 11, name: "Item 1"),
    a!map(id: 21, name: "Item 2"),
    a!map(id: 31, name: "Item 3"),
    a!map(id: 51, name: "Item 5"),
    a!map(id: 61, name: "Item 6")
  },
  local!selectedList: {},
  local!availableListChoices: {},
  local!selectedListChoices: {},
  {
    a!sectionLayout(
      label: "Items",
      labelSize: "SMALL",
      labelColor: "SECONDARY",
      contents: {
        a!columnsLayout(
          columns: {
            a!columnLayout(
              contents: {
                a!richTextDisplayField(
                  labelPosition: "COLLAPSED",
                  value: {
                    "Available",
                    " ",
                    a!richTextItem(
                      text: "(" & length(local!availableList) & ")",
                      style: "STRONG"
                    )
                  }
                ),
                a!cardLayout(
                  contents: {
                    a!gridField(
                      data: local!availableList,
                      columns: {
                        a!gridColumn(
                          label: "Items",
                          value: fv!row.name,
                          sortField: fv!currentPage
                        )
                      },
                      selectable: true,
                      selectionSaveInto: {
                        a!save(
                          local!availableListChoices,
                          if(
                            a!isNotNullOrEmpty(save!value),
                            index(
                              index(
                                local!availableList,
                                save!value,
                                null()
                              ),
                              "id",
                              null()
                            ),
                            null()
                          )
                        )
                      },
                      selectionValue: wherecontains(
                        tointeger(local!availableListChoices),
                        index(local!availableList, "id", tointeger(null()))
                      )
                    )
                  },
                  height: "TALL",
                  marginBelow: "STANDARD"
                )
              },
              width: "MEDIUM"
            ),
            a!columnLayout(
              contents: {
                a!buttonArrayLayout(
                  buttons: {
                    a!buttonWidget(
                      label: "Add Selected",
                      icon: if(
                        a!isPageWidth("PHONE"),
                        "chevron-down",
                        "chevron-right"
                      ),
                      saveInto: {
                        /* Add chosen available items to selected list */
                        a!save(
                          target: local!selectedList,
                          value: cast(
                            typeof(local!selectedList),
                            todatasubset(
                              arrayToPage: append(
                                local!selectedList,
                                index(
                                  local!availableList,
                                  wherecontains(
                                    local!availableListChoices,
                                    local!availableList.id
                                  ),
                                  {}
                                )
                              ),
                              pagingConfiguration: a!pagingInfo(
                                startIndex: 1,
                                batchSize: - 1,
                                sort: a!sortInfo(field: "id", ascending: true)
                              )
                            ).data
                          )
                        ),
                        /* Remove from available list */
                        a!save(
                          local!availableList,
                          remove(
                            local!availableList,
                            wherecontains(
                              local!availableListChoices,
                              local!availableList.id
                            )
                          )
                        ),
                        /* Clear out choices */
                        a!save(local!availableListChoices, null)
                      },
                      width: "FILL",
                      style: "SECONDARY",
                      disabled: or(
                        a!isNullOrEmpty(local!availableListChoices),
                        length(local!availableList) = 0
                      )
                    ),
                    a!buttonWidget(
                      label: "Add All",
                      icon: "plus",
                      saveInto: {
                        /* Add all available items to selected list */
                        a!save(
                          target: local!selectedList,
                          value: cast(
                            typeof(local!selectedList),
                            todatasubset(
                              arrayToPage: append(local!selectedList, local!availableList),
                              pagingConfiguration: a!pagingInfo(
                                startIndex: 1,
                                batchSize: - 1,
                                sort: a!sortInfo(field: "id", ascending: true)
                              )
                            ).data
                          )
                        ),
                        /* Clear available list */
                        a!save(local!availableList, {}),
                        /* Clear out choices */
                        a!save(local!availableListChoices, null)
                      },
                      width: "FILL",
                      style: "SECONDARY",
                      disabled: length(local!availableList) = 0
                    )
                  },
                  align: "START",
                  marginBelow: "EVEN_MORE"
                ),
                a!buttonArrayLayout(
                  buttons: {
                    a!buttonWidget(
                      label: "Remove Selected",
                      icon: if(
                        a!isPageWidth("PHONE"),
                        "chevron-up",
                        "chevron-left"
                      ),
                      saveInto: {
                        /* Add chosen selected items to available list */
                        a!save(
                          target: local!availableList,
                          value: cast(
                            typeof(local!availableList),
                            todatasubset(
                              arrayToPage: append(
                                local!availableList,
                                index(
                                  local!selectedList,
                                  wherecontains(
                                    local!selectedListChoices,
                                    local!selectedList.id
                                  ),
                                  {}
                                )
                              ),
                              pagingConfiguration: a!pagingInfo(
                                startIndex: 1,
                                batchSize: - 1,
                                sort: a!sortInfo(field: "id", ascending: true)
                              )
                            ).data
                          )
                        ),
                        /* Remove from selected list */
                        a!save(
                          local!selectedList,
                          remove(
                            local!selectedList,
                            wherecontains(
                              local!selectedListChoices,
                              local!selectedList.id
                            )
                          )
                        ),
                        /* Clear out choices */
                        a!save(local!selectedListChoices, null)
                      },
                      width: "FILL",
                      style: "SECONDARY",
                      disabled: or(
                        a!isNullOrEmpty(local!selectedListChoices),
                        length(local!selectedList) = 0
                      )
                    ),
                    a!buttonWidget(
                      label: "Remove All",
                      icon: "times",
                      saveInto: {
                        /* Add all selected items to available list */
                        a!save(
                          target: local!availableList,
                          value: cast(
                            typeof(local!availableList),
                            todatasubset(
                              arrayToPage: append(local!availableList, local!selectedList),
                              pagingConfiguration: a!pagingInfo(
                                startIndex: 1,
                                batchSize: - 1,
                                sort: a!sortInfo(field: "id", ascending: true)
                              )
                            ).data
                          )
                        ),
                        /* Clear selected list */
                        a!save(local!selectedList, {}),
                        /* Clear out choices */
                        a!save(local!selectedListChoices, null)
                      },
                      width: "FILL",
                      style: "SECONDARY",
                      disabled: length(local!selectedList) = 0
                    )
                  },
                  align: "START"
                )
              },
              width: "NARROW"
            ),
            a!columnLayout(
              contents: {
                a!richTextDisplayField(
                  labelPosition: "COLLAPSED",
                  value: {
                    "Selected",
                    " ",
                    a!richTextItem(
                      text: "(" & length(local!selectedList) & ")",
                      style: "STRONG"
                    )
                  }
                ),
                a!cardLayout(
                  contents: {
                    a!gridField(
                      data: local!selectedList,
                      columns: {
                        a!gridColumn(
                          label: "Items",
                          value: fv!row.name,
                          sortField: fv!currentPage
                        )
                      },
                      selectable: true,
                      selectionSaveInto: {
                        a!save(
                          local!selectedListChoices,
                          if(
                            a!isNotNullOrEmpty(save!value),
                            index(
                              index(
                                local!selectedList,
                                save!value,
                                null()
                              ),
                              "id",
                              null()
                            ),
                            null()
                          )
                        )
                      },
                      selectionValue: wherecontains(
                        tointeger(local!selectedListChoices),
                        index(local!selectedList, "id", tointeger(null()))
                      )
                    )
                  },
                  height: "TALL",
                  marginBelow: "STANDARD"
                )
              },
              width: "MEDIUM"
            ),
            a!columnLayout(contents: {})
          },
          alignVertical: "MIDDLE"
        )
      }
    )
  }
)