How to Custom Picker Filter the Editable Interface

Certified Senior Developer

When the screen loads Custom picker show load the Editable Interface. And while search example if searching any data from the grid it should return the respective row from editable grid

  Discussion posts and replies are publicly visible

Parents
  • 0
    Certified Senior Developer
    in reply to Stefan Helzle

    a!localVariables(
      local!availableDataIndex,
      local!selectedDataIndex,
      local!availableList: rule!example().data,
      local!selectedList,
      
      local!pickedUser,
      {
        a!sectionLayout(
          contents: {
            a!columnsLayout(
              columns: {
                a!columnLayout(
                  contents: {
                    a!cardLayout(
                      contents: {
                        a!pickerFieldCustom(
                          label: "Custom Picker",
                          labelPosition: "ABOVE",
                          suggestFunction: rule!DWS_Sample1(
                            filter: _,
                            labels:local!availableList['recordType!{63a0b9c7-fe03-4c99-8667-a1d9a63acf3f}example.fields.{e171b194-fd76-4716-b949-b321110771ea}userName'],
                            identifiers: local!availableList['recordType!{63a0b9c7-fe03-4c99-8667-a1d9a63acf3f}example.fields.{27db380a-2a73-451f-9a40-96a5c543624b}id']
                            
                          ),
                          selectedLabels: a!forEach(
                            items: local!pickedUser,
                            expression: index(local!availableList['recordType!{63a0b9c7-fe03-4c99-8667-a1d9a63acf3f}example.fields.{e171b194-fd76-4716-b949-b321110771ea}userName'], wherecontains(fv!item, local!availableList['recordType!{63a0b9c7-fe03-4c99-8667-a1d9a63acf3f}DIL Users.fields.{27db380a-2a73-451f-9a40-96a5c543624b}id']))
                          ),
                          value: local!pickedUser,
                          saveInto: a!save(local!pickedUser, union(save!value, save!value)),
                          validations: {}
                        ),
                        a!gridLayout(
                          headerCells: { "" },
                          rows: a!forEach(
                            local!availableList,
                            a!gridRowLayout(
                              id: fv!index,
                              contents: {
                                a!textField(
                                  value: fv!item['recordType!{63a0b9c7-fe03-4c99-8667-a1d9a63acf3f}example.fields.{e171b194-fd76-4716-b949-b321110771ea}userName'],
                                  readOnly: true()
                                )
                              }
                            )
                          ),
                          selectionValue: local!availableDataIndex,
                          selectionSaveInto:local!availableDataIndex,
                          selectable: true(),
                          selectionStyle: "ROW_HIGHLIGHT",
                          validations: {}
                        )
                        },
                      height: "MEDIUM_PLUS",
                      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(
                              local!selectedList,
                              append(
                                local!selectedList,
                                index(
                                  local!availableList,
                                  local!availableDataIndex,
                                  {}
                                )
                              )
                            ),
                            /* Remove from available list */
                            a!save(
                              local!availableList,
                              remove(
                                local!availableList,
                                local!availableDataIndex
                              )
                            ),
                            /* Clear out choices */
                            a!save(local!availableDataIndex, null)
                          },
                          width: "FILL",
                          style: "SECONDARY",
                          disabled: or(
                            a!isNullOrEmpty(local!availableDataIndex),
                            count(local!availableList)=0
                          )
                        ),
                        a!buttonWidget(
                          label: "Add All",
                          icon: "plus",
                          saveInto: {
                            /* Add all available items to selected list */
                            a!save(local!selectedList,append(local!selectedList,
                            local!availableList)),
                            /* Clear available list */
                            a!save(local!availableList, {}),
                            /* Clear out choices */
                            a!save(local!availableDataIndex, null)
                          },
                          width: "FILL",
                          style: "SECONDARY",
                          disabled: count(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(
                              local!availableList,
                              append(
                                local!availableList,
                                index(
                                  local!selectedList,
                                  local!selectedDataIndex,
                                  {}
                                )
                              )
                            ),
                            /* Remove from selected list */
                            a!save(
                              local!selectedList,
                              remove(
                                local!selectedList,
                                local!selectedDataIndex
                              )
                            ),
                            /* Clear out choices */
                            a!save(local!selectedDataIndex, null)
                          },
                          width: "FILL",
                          style: "SECONDARY",
                          disabled: or(
                            a!isNullOrEmpty(local!selectedDataIndex),
                            length(local!selectedList)=0
                          )
                        ),
                        a!buttonWidget(
                          label: "Remove All",
                          icon: "times",
                          saveInto: {
                            /* Add all selected items to available list */
                            a!save(local!availableList,append(local!availableList,
                            local!selectedList)),
                            /* Clear selected list */
                            a!save(local!selectedList, {}),
                            /* Clear out choices */
                            a!save(local!selectedDataIndex, null)
                          },
                          width: "FILL",
                          style: "SECONDARY",
                          disabled: count(local!selectedList)=0
                        )
                      },
                      align: "START"
                    )
                  },
                  width: "NARROW"
                ),
                a!columnLayout(
                  contents: {
                    a!cardLayout(
                      contents: {
                        a!pickerFieldCustom(
                          label: "Custom Picker",
                          labelPosition: "ABOVE",
                          saveInto: {},
                          validations: {}
                        ),
                       
                        a!gridLayout(
                          emptyGridMessage: " ",
                          headerCells: { "" },
                          rows: a!forEach(
                            local!selectedList,
                            a!gridRowLayout(
                              id: fv!index,
                              contents: {
                                a!textField(
                                  value:  fv!item['recordType!{63a0b9c7-fe03-4c99-8667-a1d9a63acf3f}examples.fields.{e171b194-fd76-4716-b949-b321110771ea}userName'],
                                  readOnly: true()
                                )
                              }
                            )
                          ),
                          selectionValue: local!selectedDataIndex,
                          selectionSaveInto:local!selectedDataIndex,
                          selectable: true(),
                          selectionStyle: "ROW_HIGHLIGHT",
                          validations: {}
                        )
                        
                      },
                      height: "MEDIUM_PLUS",
                      marginBelow: "STANDARD"
                    )
                  },
                  width: "MEDIUM"
                ),
                a!columnLayout(contents: {})
              },
              alignVertical: "MIDDLE"
            )
          }
        )
      }
    )

    When searching for the data in the picker field then it should return those filtered data from the editable grid below

Reply
  • 0
    Certified Senior Developer
    in reply to Stefan Helzle

    a!localVariables(
      local!availableDataIndex,
      local!selectedDataIndex,
      local!availableList: rule!example().data,
      local!selectedList,
      
      local!pickedUser,
      {
        a!sectionLayout(
          contents: {
            a!columnsLayout(
              columns: {
                a!columnLayout(
                  contents: {
                    a!cardLayout(
                      contents: {
                        a!pickerFieldCustom(
                          label: "Custom Picker",
                          labelPosition: "ABOVE",
                          suggestFunction: rule!DWS_Sample1(
                            filter: _,
                            labels:local!availableList['recordType!{63a0b9c7-fe03-4c99-8667-a1d9a63acf3f}example.fields.{e171b194-fd76-4716-b949-b321110771ea}userName'],
                            identifiers: local!availableList['recordType!{63a0b9c7-fe03-4c99-8667-a1d9a63acf3f}example.fields.{27db380a-2a73-451f-9a40-96a5c543624b}id']
                            
                          ),
                          selectedLabels: a!forEach(
                            items: local!pickedUser,
                            expression: index(local!availableList['recordType!{63a0b9c7-fe03-4c99-8667-a1d9a63acf3f}example.fields.{e171b194-fd76-4716-b949-b321110771ea}userName'], wherecontains(fv!item, local!availableList['recordType!{63a0b9c7-fe03-4c99-8667-a1d9a63acf3f}DIL Users.fields.{27db380a-2a73-451f-9a40-96a5c543624b}id']))
                          ),
                          value: local!pickedUser,
                          saveInto: a!save(local!pickedUser, union(save!value, save!value)),
                          validations: {}
                        ),
                        a!gridLayout(
                          headerCells: { "" },
                          rows: a!forEach(
                            local!availableList,
                            a!gridRowLayout(
                              id: fv!index,
                              contents: {
                                a!textField(
                                  value: fv!item['recordType!{63a0b9c7-fe03-4c99-8667-a1d9a63acf3f}example.fields.{e171b194-fd76-4716-b949-b321110771ea}userName'],
                                  readOnly: true()
                                )
                              }
                            )
                          ),
                          selectionValue: local!availableDataIndex,
                          selectionSaveInto:local!availableDataIndex,
                          selectable: true(),
                          selectionStyle: "ROW_HIGHLIGHT",
                          validations: {}
                        )
                        },
                      height: "MEDIUM_PLUS",
                      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(
                              local!selectedList,
                              append(
                                local!selectedList,
                                index(
                                  local!availableList,
                                  local!availableDataIndex,
                                  {}
                                )
                              )
                            ),
                            /* Remove from available list */
                            a!save(
                              local!availableList,
                              remove(
                                local!availableList,
                                local!availableDataIndex
                              )
                            ),
                            /* Clear out choices */
                            a!save(local!availableDataIndex, null)
                          },
                          width: "FILL",
                          style: "SECONDARY",
                          disabled: or(
                            a!isNullOrEmpty(local!availableDataIndex),
                            count(local!availableList)=0
                          )
                        ),
                        a!buttonWidget(
                          label: "Add All",
                          icon: "plus",
                          saveInto: {
                            /* Add all available items to selected list */
                            a!save(local!selectedList,append(local!selectedList,
                            local!availableList)),
                            /* Clear available list */
                            a!save(local!availableList, {}),
                            /* Clear out choices */
                            a!save(local!availableDataIndex, null)
                          },
                          width: "FILL",
                          style: "SECONDARY",
                          disabled: count(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(
                              local!availableList,
                              append(
                                local!availableList,
                                index(
                                  local!selectedList,
                                  local!selectedDataIndex,
                                  {}
                                )
                              )
                            ),
                            /* Remove from selected list */
                            a!save(
                              local!selectedList,
                              remove(
                                local!selectedList,
                                local!selectedDataIndex
                              )
                            ),
                            /* Clear out choices */
                            a!save(local!selectedDataIndex, null)
                          },
                          width: "FILL",
                          style: "SECONDARY",
                          disabled: or(
                            a!isNullOrEmpty(local!selectedDataIndex),
                            length(local!selectedList)=0
                          )
                        ),
                        a!buttonWidget(
                          label: "Remove All",
                          icon: "times",
                          saveInto: {
                            /* Add all selected items to available list */
                            a!save(local!availableList,append(local!availableList,
                            local!selectedList)),
                            /* Clear selected list */
                            a!save(local!selectedList, {}),
                            /* Clear out choices */
                            a!save(local!selectedDataIndex, null)
                          },
                          width: "FILL",
                          style: "SECONDARY",
                          disabled: count(local!selectedList)=0
                        )
                      },
                      align: "START"
                    )
                  },
                  width: "NARROW"
                ),
                a!columnLayout(
                  contents: {
                    a!cardLayout(
                      contents: {
                        a!pickerFieldCustom(
                          label: "Custom Picker",
                          labelPosition: "ABOVE",
                          saveInto: {},
                          validations: {}
                        ),
                       
                        a!gridLayout(
                          emptyGridMessage: " ",
                          headerCells: { "" },
                          rows: a!forEach(
                            local!selectedList,
                            a!gridRowLayout(
                              id: fv!index,
                              contents: {
                                a!textField(
                                  value:  fv!item['recordType!{63a0b9c7-fe03-4c99-8667-a1d9a63acf3f}examples.fields.{e171b194-fd76-4716-b949-b321110771ea}userName'],
                                  readOnly: true()
                                )
                              }
                            )
                          ),
                          selectionValue: local!selectedDataIndex,
                          selectionSaveInto:local!selectedDataIndex,
                          selectable: true(),
                          selectionStyle: "ROW_HIGHLIGHT",
                          validations: {}
                        )
                        
                      },
                      height: "MEDIUM_PLUS",
                      marginBelow: "STANDARD"
                    )
                  },
                  width: "MEDIUM"
                ),
                a!columnLayout(contents: {})
              },
              alignVertical: "MIDDLE"
            )
          }
        )
      }
    )

    When searching for the data in the picker field then it should return those filtered data from the editable grid below

Children
No Data