Filter rows from read only grid using multichoice dropdown

Hi,

I have a read only grid as shown below, I want to filter data by selecting value from "Status" dropdown and by pressing "Search" button.

Please help me with it.

  Discussion posts and replies are publicly visible

  • Sure. a!recordData() is a rule which can only be used within a!gridField where you help describe where your data is located along with filters. To use data from a record type in other places in an interface you'll need to query that data using a!queryRecordType() which looks very similar https://docs.appian.com/suite/help/20.3/fnc_system_queryrecordtype.html

    Paging can seem tricky but it's actually very simple, just have a separate local variable for your a!pagingInfo. In general, if you want to have paging in a grid, you should use a!gridField().

    a!localVariables(
      local!pagingInfo: a!pagingInfo(1,15),
      local!myQuery: a!queryRecordType(
        recordType: 'recordType!Company',
        pagingInfo: local!pagingInfo,
        fetchTotalCount: true
      ),
      a!gridLayout(
        label: "My Grid",
        totalCount: local!myQuery.totalCount,
        rows: a!forEach(
          local!myQuery.data,
          a!gridRowLayout(
            id: fv!index + local!myQuery.startIndex - 1,
            contents: {}
          )
        )
      ),
      a!richTextDisplayField(
        align: "RIGHT",
        labelPosition: "COLLAPSED",
        value: {
          /* Double Left Arrow */
          a!richTextIcon(
            showWhen: local!pagingInfo.startIndex <> 1,
            icon: "angle-double-left",
            size: "MEDIUM",
            linkStyle: "STANDALONE",
            link: {
              a!dynamicLink(
                saveInto: {
                  a!save(
                    local!pagingInfo.startIndex,
                    1
                  )
                }
              )
            }
          ),
          "  ",
          /*  Left Arrow  */
          a!richTextIcon(
            showWhen: local!pagingInfo.startIndex <> 1,
            icon: "angle-left",
            size: "MEDIUM",
            linkStyle: "STANDALONE",
            link: {
              a!dynamicLink(
                saveInto: {
                  a!save(
                    local!pagingInfo.startIndex,
                    local!pagingInfo.startIndex - local!pagingInfo.batchSize
                  )
                }
              )
            }
          ),
          /*  Current Page Indices  */
          a!richTextItem(
            text: local!pagingInfo.startIndex-local!hiddenItems & " - " & if(
              local!pagingInfo.startIndex-local!hiddenItems < local!totalCount-local!hiddenItems - local!pagingInfo.batchSize + 1 = false,
              local!totalCount-local!hiddenItems,
              local!pagingInfo.startIndex - 1 + local!pagingInfo.batchSize-local!hiddenItems
            ),
            style: "STRONG"
          ),
          /*  Total Count  */
          a!richTextItem(
            text: " of " & local!totalCount
          ),
          /*  Right Arrow  */
          a!richTextIcon(
            showWhen: and(
              local!pagingInfo.batchSize < local!totalCount,
              local!pagingInfo.startIndex< local!totalCount - local!pagingInfo.batchSize + 1
            ),
            icon: "angle-right",
            size: "MEDIUM",
            linkStyle: "STANDALONE",
            link: {
              a!dynamicLink(
                saveInto: {
                  a!save(
                    local!pagingInfo.startIndex,
                    local!pagingInfo.startIndex + local!pagingInfo.batchSize
                  )
                }
              )
            }
          ),
          " ",
          /*  Double Right Arrow  */
          a!richTextIcon(
            showWhen: and(
              local!pagingInfo.batchSize < local!totalCount,
              local!pagingInfo.startIndex < local!totalCount - local!pagingInfo.batchSize + 1
            ),
            icon: "angle-double-right",
            size: "MEDIUM",
            linkStyle: "STANDALONE",
            link: {
              a!dynamicLink(
                saveInto: {
                  a!save(
                    local!pagingInfo.startIndex,
                    local!totalCount - local!pagingInfo.batchSize + 1
                  ),
                }
              )
            }
          )
        }
      )
    )

  • Hi ,

    I guess I have not been able to explain my question, let me try again.

    Below in an editable grid table, I want to filter data instantly (search on the data already fetched from DB, don't want to query table again and again) as soon as I select any value from the filter criteria (Start Date & Status) just above the table.

    Below is my SAIL:

    a!localVariables(
      local!currentStartDate,
      local!currentStatus,
      
      local!rwmActivityData:{
        {
          status:"Complete",
          startDate:"10/16/2020",
        },
        {
          status:"In Progress",
          startDate:"10/11/2020",
        },
        {
          status:"Cancelled",
          startDate:"11/01/2020",
        },
        {
          status:"Pending",
          startDate:"10/16/2020",
        }
      },
    
      {
        a!columnsLayout(
          columns: {
            a!columnLayout(
              contents: {
                a!dateField(
                  label: "Start Date",
                  labelPosition: "ABOVE",
                  value: local!currentStartDate,
                  saveInto: local!currentStartDate,
                  validations: {}
                )
              }
            ),
            a!columnLayout(
              contents: {
                a!multipleDropdownField(
                  label: "Status",
                  labelPosition: "ABOVE",
                  placeholder: "Select Status",
                  choiceLabels: {
                    "Pending",
                    "In Progress",
                    "Cancelled",
                    "Complete"
                  },
                  choiceValues: {
                    "Pending",
                    "In Progress",
                    "Cancelled",
                    "Complete"
                  },
                  value: local!currentStatus,
                  saveInto: local!currentStatus,
                  searchDisplay: "ON",
                  validations: {}
                )
              }
            )
          },
        
          marginBelow: "STANDARD",
          showDividers: false
        ),
    
        a!columnsLayout(
          columns: {
            /**Editable Grid**/
            a!columnLayout(
              contents: {
                a!gridLayout(
                  label: "",
                  labelPosition: "ABOVE",
                  headerCells: {
                    a!gridLayoutHeaderCell(label: "Start Date"),
                    a!gridLayoutHeaderCell(label: "Status")
                  },
                  columnConfigs: {
                   
                  },
                  rows: a!forEach(
                    items:if(
                      and(
                        rule!APN_isBlank(local!currentStartDate),
                        rule!APN_isBlank(local!currentStatus)
                      ),
                      local!rwmActivityData,
                      a!queryRecordType (
                        recordType: local!rwmActivityData,
                        filters: {
                         a!queryFilter(
                            field: fv!item.startDate,
                            operator: "=",
                            value: local!currentStartDate,
                            applyWhen: not(isnull(local!currentStartDate))
                          ),
                          a!queryFilter(
                            field: local!rwmActivityData.status,
                            operator: "in",
                            value: local!currentStatus,
                            applyWhen: not(
                              or(
                                local!currentStatus = "",
                                length(local!currentStatus) = 0
                              )
                            )
                          )
                        }
                      )
                    ),
                    expression: {
                      a!gridRowLayout(
                        contents: {
                          a!textField(
                            label: "Start Date",
                            labelPosition: "ABOVE",
                            value: fv!item.startDate,
                            saveInto: {},
                            refreshAfter: "UNFOCUS",
                            readOnly: true,
                            validations: {}
                          ),
                          a!textField(
                            label: "Status",
                            labelPosition: "ABOVE",
                            value: fv!item.status,
                            saveInto: {},
                            refreshAfter: "UNFOCUS",
                            readOnly: true,
                            validations: {}
                          )
                        },
                        selectionDisabled: false
                      )
                    }
                  ),
                  selectionSaveInto: {},
                  validations: {},
                  shadeAlternateRows: true
                )
              }
            )
          }
        ),
      }
    )

  • +1
    Certified Senior Developer
    in reply to shamima0001

    hi shamima,

    you need to update the local!filters of your queryEntity via saveInto parameter of the sail form elements.

    try to use an expresison rule with querEntity and ruleInput "any type".