• State Verified Answer
  • Replies 13 replies
  • Subscribers 13 subscribers
  • Views 4692 views
  • Users 0 members are here
Related Discussions
Home » Discussions » New to Appian

Filter rows from read only grid using multichoice dropdown

shamima0001

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

Parents
  • 0
    Appian Employee

    Can you paste the current SAIL you have? It will help explain how to filter correctly. 

  • 0 in reply to Danny Verb

    Hi Danny,

    Please have a look on the SAIL below.

    {
  a!columnsLayout(
    columns: {
      a!columnLayout(
        contents: {
          a!multipleDropdownField(
            label: "Status",
            labelPosition: "ABOVE",
            placeholder: "Select Status",
            choiceLabels: {
              "Option 1",
              "Option 2",
              "Option 3",
              "Option 4",
              "Option 5",
              "Option 6",
              "Option 7",
              "Option 8",
              "Option 9",
              "Option 10",
              "Option 11",
              "Option 12"
            },
            choiceValues: { 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 },
            saveInto: {},
            searchDisplay: "AUTO",
            validations: {}
          )
        }
      )
    },
    showDividers: false
  ),
  a!sectionLayout(
    label: "",
    contents: {
      a!columnsLayout(
        columns: {
          a!columnLayout(
            contents: {
              a!buttonArrayLayout(
                buttons: {
                  a!buttonWidget(
                    label: "Search",
                    icon: "search",
                    submit: true,
                    style: "LINK"
                  )
                },
                align: "END"
              )
            }
          )
        }
      )
    },
    marginBelow: "NONE"
  ),
  a!gridField(
    label: "",
    labelPosition: "ABOVE",
    data: 'recordType!{dc0053d9-f64e-4075-99f9-0f4948307dab}ABC_Exam',
    columns: {
      a!gridColumn(
        label: "Start Date",
        sortField: 'recordType!{dc0053d9-f64e-4075-99f9-0f4948307dab}ABC_Exam.fields.{startDate}startDate',
        value: fv!row['recordType!{dc0053d9-f64e-4075-99f9-0f4948307dab}ABC_Exam.fields.{startDate}startDate'],
        align: "START"
      ),
      a!gridColumn(
        label: "End Date",
        sortField: 'recordType!{dc0053d9-f64e-4075-99f9-0f4948307dab}ABC_Exam.fields.{endDate}endDate',
        value: fv!row['recordType!{dc0053d9-f64e-4075-99f9-0f4948307dab}ABC_Exam.fields.{endDate}endDate'],
        align: "START"
      ),
      a!gridColumn(
        label: "Status",
        sortField: 'recordType!{dc0053d9-f64e-4075-99f9-0f4948307dab}ABC_Exam.fields.{status}status',
        value: fv!row['recordType!{dc0053d9-f64e-4075-99f9-0f4948307dab}ABC_Exam.fields.{status}status']
      )
    },
    pageSize: 25,
    initialSorts: {
      a!sortInfo(
        field: 'recordType!{dc0053d9-f64e-4075-99f9-0f4948307dab}ABC_Exam.fields.{changeOrderNumber}changeOrderNumber',
        ascending: true
      )
    },
    selectable: false,
    validations: {},
    spacing: "STANDARD",
    rowHeader: null,
    refreshOnReferencedVarChange: true,
    refreshAfter: "RECORD_ACTION",
    showSearchBox: false,
    showRefreshButton: false,
    actionsDisplay: "LABEL"
  )
}

  • +1
    Appian Employee
     in reply to shamima0001

    In the data parameter on your grid, use the function a!recordData(). Here you can add a!queryFilter() to the filters parameter. To filter by the dropdown, you should create a local variable called local!selection. See code below:

    a!localVariables(
    local!selection,
    {
      a!columnsLayout(
        columns: {
          a!columnLayout(
            contents: {
              a!multipleDropdownField(
                label: "Status",
                labelPosition: "ABOVE",
                placeholder: "Select Status",
                choiceLabels: {
                  "Option 1",
                  "Option 2",
                  "Option 3",
                  "Option 4",
                  "Option 5",
                  "Option 6",
                  "Option 7",
                  "Option 8",
                  "Option 9",
                  "Option 10",
                  "Option 11",
                  "Option 12"
                },
                choiceValues: { 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 },
                value: local!selection,
                saveInto: local!selection,
                searchDisplay: "AUTO",
                validations: {}
              )
            }
          )
        },
        showDividers: false
      ),
      a!sectionLayout(
        label: "",
        contents: {
          a!columnsLayout(
            columns: {
              a!columnLayout(
                contents: {
                  a!buttonArrayLayout(
                    buttons: {
                      a!buttonWidget(
                        label: "Search",
                        icon: "search",
                        submit: true,
                        style: "LINK"
                      )
                    },
                    align: "END"
                  )
                }
              )
            }
          )
        },
        marginBelow: "NONE"
      ),
      a!gridField(
        label: "",
        labelPosition: "ABOVE",
        data: a!recordData(
            recordType: 'recordType!{dc0053d9-f64e-4075-99f9-0f4948307dab}ABC_Exam',
            filters: {
                a!queryFilter(
                    recordType!ABC_EXam.fields.status,
                    "in",
                    local!selection
                )
            }
        ),
        columns: {
          a!gridColumn(
            label: "Start Date",
            sortField: 'recordType!{dc0053d9-f64e-4075-99f9-0f4948307dab}ABC_Exam.fields.{startDate}startDate',
            value: fv!row['recordType!{dc0053d9-f64e-4075-99f9-0f4948307dab}ABC_Exam.fields.{startDate}startDate'],
            align: "START"
          ),
          a!gridColumn(
            label: "End Date",
            sortField: 'recordType!{dc0053d9-f64e-4075-99f9-0f4948307dab}ABC_Exam.fields.{endDate}endDate',
            value: fv!row['recordType!{dc0053d9-f64e-4075-99f9-0f4948307dab}ABC_Exam.fields.{endDate}endDate'],
            align: "START"
          ),
          a!gridColumn(
            label: "Status",
            sortField: 'recordType!{dc0053d9-f64e-4075-99f9-0f4948307dab}ABC_Exam.fields.{status}status',
            value: fv!row['recordType!{dc0053d9-f64e-4075-99f9-0f4948307dab}ABC_Exam.fields.{status}status']
          )
        },
        pageSize: 25,
        initialSorts: {
          a!sortInfo(
            field: 'recordType!{dc0053d9-f64e-4075-99f9-0f4948307dab}ABC_Exam.fields.{changeOrderNumber}changeOrderNumber',
            ascending: true
          )
        },
        selectable: false,
        validations: {},
        spacing: "STANDARD",
        rowHeader: null,
        refreshOnReferencedVarChange: true,
        refreshAfter: "RECORD_ACTION",
        showSearchBox: false,
        showRefreshButton: false,
        actionsDisplay: "LABEL"
      )
    }
)

  • 0 in reply to Danny Verb

    Filter worked, but my expectation is it should filter on "Search" button press.

  • 0
    Certified Senior Developer
     in reply to shamima0001

    Hi,
    why do you want to do it on the search button? is there any UX advantag?
    if not, the following code should support you:

    a!localVariables(
local!selection,
local!search,
    {
        a!columnsLayout(
            columns: {
                a!columnLayout(
                    contents: {
                        a!multipleDropdownField(
                            label: "Status",
                            labelPosition: "ABOVE",
                            placeholder: "Select Status",
                            choiceLabels: {
                            "Option 1",
                            "Option 2",
                            "Option 3",
                            "Option 4",
                            "Option 5",
                            "Option 6",
                            "Option 7",
                            "Option 8",
                            "Option 9",
                            "Option 10",
                            "Option 11",
                            "Option 12"
                            },
                            choiceValues: { 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 },
                            value: local!selection,
                            saveInto: local!selection,
                            searchDisplay: "AUTO",
                            validations: {}
                        )
                    }
                )
            },
            showDividers: false
        ),
        a!sectionLayout(
            label: "",
            contents: {
                a!columnsLayout(
                    columns: {
                        a!columnLayout(
                            contents: {
                                a!buttonArrayLayout(
                                    buttons: {
                                        a!buttonWidget(
                                            label: "Search",
                                            icon: "search",
                                            saveInto: {
                                                a!save(
                                                    target: local!search,
                                                    value: local!selection
                                                )
                                            },
                                            submit: true,
                                            style: "LINK"
                                        )
                                    },
                                    align: "END"
                                )
                            }
                        )
                    }
                )
            },
            marginBelow: "NONE"
        ),
        a!gridField(
            label: "",
            labelPosition: "ABOVE",
            data: a!recordData(
                recordType: 'recordType!{dc0053d9-f64e-4075-99f9-0f4948307dab}ABC_Exam',
                filters: {
                    a!queryFilter(
                        recordType!ABC_EXam.fields.status,
                        "in",
                        local!search
                    )
                }
            ),
            columns: {
                a!gridColumn(
                    label: "Start Date",
                    sortField: 'recordType!{dc0053d9-f64e-4075-99f9-0f4948307dab}ABC_Exam.fields.{startDate}startDate',
                    value: fv!row['recordType!{dc0053d9-f64e-4075-99f9-0f4948307dab}ABC_Exam.fields.{startDate}startDate'],
                    align: "START"
                ),
                a!gridColumn(
                    label: "End Date",
                    sortField: 'recordType!{dc0053d9-f64e-4075-99f9-0f4948307dab}ABC_Exam.fields.{endDate}endDate',
                    value: fv!row['recordType!{dc0053d9-f64e-4075-99f9-0f4948307dab}ABC_Exam.fields.{endDate}endDate'],
                    align: "START"
                ),
                a!gridColumn(
                    label: "Status",
                    sortField: 'recordType!{dc0053d9-f64e-4075-99f9-0f4948307dab}ABC_Exam.fields.{status}status',
                    value: fv!row['recordType!{dc0053d9-f64e-4075-99f9-0f4948307dab}ABC_Exam.fields.{status}status']
                )
            },
            pageSize: 25,
            initialSorts: {
                a!sortInfo(
                    field: 'recordType!{dc0053d9-f64e-4075-99f9-0f4948307dab}ABC_Exam.fields.{changeOrderNumber}changeOrderNumber',
                    ascending: true
                )
            },
            selectable: false,
            validations: {},
            spacing: "STANDARD",
            rowHeader: null,
            refreshOnReferencedVarChange: true,
            refreshAfter: "RECORD_ACTION",
            showSearchBox: false,
            showRefreshButton: false,
            actionsDisplay: "LABEL"
        )
    }
)

Reply
  • 0
    Certified Senior Developer
     in reply to shamima0001

    Hi,
    why do you want to do it on the search button? is there any UX advantag?
    if not, the following code should support you:

    a!localVariables(
local!selection,
local!search,
    {
        a!columnsLayout(
            columns: {
                a!columnLayout(
                    contents: {
                        a!multipleDropdownField(
                            label: "Status",
                            labelPosition: "ABOVE",
                            placeholder: "Select Status",
                            choiceLabels: {
                            "Option 1",
                            "Option 2",
                            "Option 3",
                            "Option 4",
                            "Option 5",
                            "Option 6",
                            "Option 7",
                            "Option 8",
                            "Option 9",
                            "Option 10",
                            "Option 11",
                            "Option 12"
                            },
                            choiceValues: { 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 },
                            value: local!selection,
                            saveInto: local!selection,
                            searchDisplay: "AUTO",
                            validations: {}
                        )
                    }
                )
            },
            showDividers: false
        ),
        a!sectionLayout(
            label: "",
            contents: {
                a!columnsLayout(
                    columns: {
                        a!columnLayout(
                            contents: {
                                a!buttonArrayLayout(
                                    buttons: {
                                        a!buttonWidget(
                                            label: "Search",
                                            icon: "search",
                                            saveInto: {
                                                a!save(
                                                    target: local!search,
                                                    value: local!selection
                                                )
                                            },
                                            submit: true,
                                            style: "LINK"
                                        )
                                    },
                                    align: "END"
                                )
                            }
                        )
                    }
                )
            },
            marginBelow: "NONE"
        ),
        a!gridField(
            label: "",
            labelPosition: "ABOVE",
            data: a!recordData(
                recordType: 'recordType!{dc0053d9-f64e-4075-99f9-0f4948307dab}ABC_Exam',
                filters: {
                    a!queryFilter(
                        recordType!ABC_EXam.fields.status,
                        "in",
                        local!search
                    )
                }
            ),
            columns: {
                a!gridColumn(
                    label: "Start Date",
                    sortField: 'recordType!{dc0053d9-f64e-4075-99f9-0f4948307dab}ABC_Exam.fields.{startDate}startDate',
                    value: fv!row['recordType!{dc0053d9-f64e-4075-99f9-0f4948307dab}ABC_Exam.fields.{startDate}startDate'],
                    align: "START"
                ),
                a!gridColumn(
                    label: "End Date",
                    sortField: 'recordType!{dc0053d9-f64e-4075-99f9-0f4948307dab}ABC_Exam.fields.{endDate}endDate',
                    value: fv!row['recordType!{dc0053d9-f64e-4075-99f9-0f4948307dab}ABC_Exam.fields.{endDate}endDate'],
                    align: "START"
                ),
                a!gridColumn(
                    label: "Status",
                    sortField: 'recordType!{dc0053d9-f64e-4075-99f9-0f4948307dab}ABC_Exam.fields.{status}status',
                    value: fv!row['recordType!{dc0053d9-f64e-4075-99f9-0f4948307dab}ABC_Exam.fields.{status}status']
                )
            },
            pageSize: 25,
            initialSorts: {
                a!sortInfo(
                    field: 'recordType!{dc0053d9-f64e-4075-99f9-0f4948307dab}ABC_Exam.fields.{changeOrderNumber}changeOrderNumber',
                    ascending: true
                )
            },
            selectable: false,
            validations: {},
            spacing: "STANDARD",
            rowHeader: null,
            refreshOnReferencedVarChange: true,
            refreshAfter: "RECORD_ACTION",
            showSearchBox: false,
            showRefreshButton: false,
            actionsDisplay: "LABEL"
        )
    }
)

Children
No Data
© 2024 Appian. All rights reserved.
We want to hear from you! Submit a review on Gartner or G2.