• State Not Answered
  • Replies 2 replies
  • Subscribers 10 subscribers
  • Views 343 views
  • Users 0 members are here
Related Discussions
Home » Discussions » User Interface

How to Custom Picker Filter the Editable Interface

ashwinir5622
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
© 2024 Appian. All rights reserved.
We want to hear from you! Submit a review on Gartner or G2.