RE: 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.

Sushil — Tue, 18 Apr 2023 05:42:08 GMT
It's really helpful. Thank you so much.
RE: 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.

aryan — Tue, 18 Apr 2023 05:38:37 GMT
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"
        )
      }
    )
  }
)
RE: 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.

Amaan Shekh — Tue, 18 Apr 2023 05:25:28 GMT
you can take references from this Interface pattern Dual pickList.
RE: 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.

sanchitg0002 — Tue, 18 Apr 2023 05:25:23 GMT
There is a pattern waiting for you in Interface designer called "Dual Picklist".