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

Parents
  • 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
                }
              )
            )
          }
        )
      )
    )

Reply
  • 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
                }
              )
            )
          }
        )
      )
    )

Children
No Data