Sort read only fields of an editable grid

Hi,
For editable grids there is no out of the box configuration available for sorting or paging. We can implement those features by having icons outside of gridLayout() congratulation.

Thanks Rama, Can you give me an example if you have one ?

Hi Ramanan,

Unfortunately, editable grids cannot be used to actively sort by clicking on the header cells as can be done with paging grids. I would suggest looking at other options when designing your user experience. For example, you could make the grid a paging grid, but allow the user to select a row. When they select a row, a field appears above or below the grid that allows the user to edit the information in that row.

If you are trying to sort the information before it gets populated in the editable grid, you can do so in the following ways:

The best way for you to achieve this is to sort the information as you pull it from the database. As you make your query, pass the paging info into the query entity with your sort information specfied using a!sortInfo(). Then, you can control how the information is sorted as it gets pulled from the DB. When you create the editable grid, pass the sorted data to your gridRowLayout and the rows should be in sorted order. You can read more about this in the documentation: docs.appian.com/.../fnc_system_a_sortinfo.html

If you aren't pulling from the database, you can also use todatasubset() to sort the data before populating it in the editable grid. See the documentation for further information: docs.appian.com/.../fnc_scripting_todatasubset.html

Hope that helps!
Jake

Its possible, just not pretty

 

load(
  local!data: {
    {
      id: 1,
      firstName: "Steve",
      lastName: "Jobs"
    },
    {
      id: 2,
      firstName: "Lebron",
      lastName: "James"
    },
    {
      id: 3,
      firstName: "Mark",
      lastName: "Zuckerberg"
    }
  },
  local!pagingInfo: a!pagingInfo(
    startIndex: 1,
    batchSize: - 1,
    sort: a!sortInfo(
      field: "id",
      ascending: true
    )
  ),
  with(
    local!sortedData: todatasubset(
      arrayToPage: local!data,
      pagingConfiguration: local!pagingInfo
    ),
    {
      a!columnsLayout(
        columns: {
          a!columnLayout(
            contents: {
              a!dropdownField(
                label: "field",
                choiceLabels: {
                  "ID",
                  "FIRST NAME",
                  "LAST NAME"
                },
                choiceValues: {
                  "id",
                  "firstName",
                  "lastName"
                },
                value: local!pagingInfo.sort.field,
                saveInto: local!pagingInfo.sort.field
              )
            }
          ),
          a!columnLayout(
            contents: {
              a!dropdownField(
                label: "ascending",
                choiceLabels: {
                  "TRUE",
                  "FALSE"
                },
                choiceValues: {
                  true,
                  false
                },
                value: local!pagingInfo.sort.ascending,
                saveInto: local!pagingInfo.sort.ascending
              )
            }
          )
        }
      ),
      a!gridLayout(
        headerCells: {
          a!gridLayoutHeaderCell(
            label: "ID"
          ),
          a!gridLayoutHeaderCell(
            label: "Name"
          ),
          a!gridLayoutHeaderCell()
        },
        columnConfigs: {
          a!gridLayoutColumnConfig(
            width: "ICON"
          ),
          a!gridLayoutColumnConfig(),
          a!gridLayoutColumnConfig(
            width: "ICON"
          )
        },
        rows: a!forEach(
          items: local!sortedData,
          expression: a!gridRowLayout(
            id: fv!index,
            contents: {
              a!integerField(
                value: fv!item.id,
                readOnly: true
              ),
              a!textField(
                value: concat(
                  fv!item.firstName & " " & fv!item.lastName
                ),
                saveInto: {
                  a!save(
                    fv!item.firstName,
                    index(
                      split(
                        save!value,
                        " "
                      ),
                      1,
                      ""
                    )
                  ),
                  a!save(
                    fv!item.lastName,
                    index(
                      split(
                        save!value,
                        " "
                      ),
                      2,
                      ""
                    )
                  )
                }
              ),
              a!imageField(
                images: a!documentImage(
                  document: a!iconIndicator(
                    icon: "REMOVE"
                  ),
                  link: a!dynamicLink(
                    value: wherecontains(
                      fv!item,
                      local!data
                    ),
                    saveInto: a!save(
                      local!data,
                      remove(
                        local!data,
                        save!value
                      )
                    )
                  )
                ),
                size: "ICON",
                align: "CENTER"
              )
            }
          )
        ),
        addRowLink: a!dynamicLink(
          label: "Add",
          value: {
            id: count(
              local!data
            ) + 1
          },
          saveInto: a!save(
            local!data,
            append(
              local!data,
              save!value
            )
          )
        )
      )
    }
  )
)

@Ramanan As per my understanding, in this case you should avoid Custom Sorting for your Editable Grid.

 

Reason:

As per your statement, your editable grid contains 5 read-only field along with 1 editable field means when you perform sorting, you will loose your input data of the editable field or you can expect some data mismatch (in case, if you are trying to retain the input value using some manipulation logic)

 

When to go for Editable Grid with Sorting

When you have a requirement of representing the data in a Grid(read-only) and also want to make the use of rich text display field(this cannot be used while working with paging grid), in such case you need to go for editable grid (read-only). In this case you want to sort the row by using either an icon or a drop-down/drop-downs.

 

Hope this will help.