Sorting for user in Grid Field

I want to have user defined sorting for 3 columns in grid field. I want to have it like we get in appian record(an up/down arrow beside column name). How can I achieve it?

  Discussion posts and replies are publicly visible

  • Hi,
    Yes, you can achieve it by adding the field :"value" in gridTextColumn(),

    Please refer this link: docs.appian.com/.../Grid_Text_Column_Component.html
    Mention the field for gridTextColumn(), where ever sorting required.


    Rama
  • 0
    Certified Lead Developer

    I think you are after something like this?

     

    load(
      local!data: {
        {
          id: 1,
          value: "Monday"
        },
        {
          id: 2,
          value: "Tuesday"
        },
        {
          id: 3,
          value: "Wednesday"
        }
      },
      a!gridLayout(
        required: true,
        emptyGridMessage: "No schedule available for Case Type",
        headerCells: {
          a!gridLayoutHeaderCell(
            label: "ID"
          ),
          a!gridLayoutHeaderCell(
            label: "Value"
          ),
          a!gridLayoutHeaderCell(
            label: ""
          ),
          a!gridLayoutHeaderCell(
            label: ""
          ),
          a!gridLayoutHeaderCell(
            label: ""
          )
        },
        columnConfigs: {
          a!gridLayoutColumnConfig(
            width: "NARROW"
          ),
          a!gridLayoutColumnConfig(
            width: "DISTRIBUTE"
          ),
          a!gridLayoutColumnConfig(
            width: "ICON"
          ),
          a!gridLayoutColumnConfig(
            width: "ICON"
          ),
          a!gridLayoutColumnConfig(
            width: "ICON"
          )
        },
        rows: a!forEach(
          items: local!data,
          expression: a!gridRowLayout(
            contents: {
              a!integerField(
                value: local!data[fv!index].id
              ),
              a!textField(
                value: local!data[fv!index].value
              ),
              a!imageField(
                images: a!documentImage(
                  caption: if(
                    fv!index = 1,
                    null,
                    "Move up"
                  ),
                  document: a!iconIndicator(
                    if(
                      fv!index = 1,
                      "MOVE_UP_DISABLED",
                      "MOVE_UP"
                    )
                  ),
                  link: if(
                    fv!index = 1,
                    null,
                    a!dynamicLink(
                      value: null,
                      saveInto: {
                        a!save(
                          local!data,
                          updatearray(
                            local!data,
                            {
                              fv!index - 1,
                              fv!index
                            },
                            {
                              local!data[fv!index],
                              local!data[fv!index - 1]
                            }
                          )
                        )
                      }
                    )
                  )
                )
              ),
              a!imageField(
                images: a!documentImage(
                  caption: if(
                    fv!index = count(
                      local!data
                    ),
                    null,
                    "Move down"
                  ),
                  document: a!iconIndicator(
                    if(
                      fv!index = count(
                        local!data
                      ),
                      "MOVE_DOWN_DISABLED",
                      "MOVE_DOWN"
                    )
                  ),
                  link: if(
                    fv!index = count(
                      local!data
                    ),
                    null,
                    a!dynamicLink(
                      value: null,
                      saveInto: {
                        a!save(
                          local!data,
                          updatearray(
                            local!data,
                            {
                              fv!index + 1,
                              fv!index
                            },
                            {
                              local!data[fv!index],
                              local!data[fv!index + 1]
                            }
                          )
                        )
                      }
                    )
                  )
                )
              ),
              a!imageField(
                images: a!documentImage(
                  caption: "Remove",
                  document: a!iconIndicator(
                    "REMOVE"
                  ),
                  link: a!dynamicLink(
                    value: null,
                    saveInto: a!save(
                      local!data,
                      remove(
                        local!data,
                        fv!index
                      )
                    )
                  )
                )
              )
            }
          )
        ),
        addRowLink: a!dynamicLink(
          label: "Add Row",
          value: max(
            local!data.id
          ) + 1,
          saveInto: {
            a!save(
              local!data,
              append(
                local!data,
                {
                  id: save!value
                }
              )
            )
          }
        )
      )
    )

  • Hi,

    Please give the value for "field" in the a!gridTextColumn component. For sorting using the arrow please declare a a!pagingInfo() local variable and configure the same in the grid component. That should achieve your requirement. For more details let me know.

    Thanks,
    Abishek
  • I am using grid field. I have added "field" to the gridTextColumn() and the sorting arrow came but it is not working on clicking. Do I need to configure anything else? Can you show me an example?
  • Hi Sudiptab,

    Please see the below link:
    docs.appian.com/.../recipe_display_data_with_cdt_fields_in_a_grid.html

    The idea is to use load() to define your pagingInfo along with the sortInfo.
    Then use with() to define your data and grid. The with() should save the paging info.

    Let us know if this works,

    Thanks
  • Hello Sudiptab,

    Please Take a look at the recipe provided hemn89.

    When quering the information you need to pass the paging info with the sort as you need, even you can sort with multiple fields.

    In the gridfield you need to define on each column( a!gridTextColumn for example) the “field” parameter so each column will sort using that field, just use the field name as is in the CDT.


    When the user clicks the column the paging info of the gridField gets updated using the saveInto of the gridField. So, additionally you can query again in the same saveInto.
    Or the easy way is using the with function (as mentioned above) which works ok if you don’t have a bunch of other fields or grids, because the win will refresh each user interaction.

    I am not able to provide an example but hope this explanation helps you

    Jose
  • Thank you hedn89 and josep for helping me out. My cdt names and field names were mismatching, so that was that the confusion. Now it's working fine. Thank you guys! :)