Skip to main content
eliceljoyf0873
November 30, 2023
Question

User-Driven Grid Customization in Appian: How to Hide/Show Columns?

  • November 30, 2023
  • 3 replies
  • 0 views

Hello everyone,

I'm currently working on an interface in Appian, and I'm looking to implement a record action that allows users to customize the displayed columns in a grid. Ideally, the user would be presented with a checklist containing the column field names, enabling them to select the specific columns they want to see. The unchecked fields should then be hidden from the grid.

Is this functionality achievable within Appian? I appreciate any insights or guidance you can provide. Thank you!

3 replies

sriramk5349
November 30, 2023

Hi [mention:9596a3623d7444559b7421fd0d9bf267:e9ed411860ed4f2ba0265705b8793d05] ,

I think this might work. Please create the grid with every column and add showWhen condition to every column. Now save the selected columns in a list and with those columns' names, all the showWhen conditions will comply and you will achieve the outcome.

eliceljoyf0873
December 1, 2023

Thanks! I will try this out!

amans0009
November 30, 2023

You can take reference from this code snippet 

a!localVariables(
  local!data: {
    a!map(Id: 1, name: "aman", age: 22),
    a!map(Id: 2, name: "aman2", age: 23),
    a!map(Id: 3, name: "aman3", age: 24)
  },
  local!allColumns:{ "Id", "name","age" },
  local!selectedColumn: { "Id", "name" },
  {
    a!multipleDropdownField(
      choiceLabels: local!allColumns,
      choiceValues: local!allColumns,
      label: "show columns",
      labelPosition: "ABOVE",
      saveInto: {local!selectedColumn},
      value: local!selectedColumn,
      searchDisplay: "AUTO",
      validations: {}
    ),
    a!gridField(
      label: "Read-only Grid",
      labelPosition: "ABOVE",
      data: local!data,
      columns: {
        a!gridColumn(
          label: "Id",
          value: fv!row.Id,
          showWhen: contains(local!selectedColumn, "Id")
        ),
        a!gridColumn(
          label: "name",
          value: fv!row.name,
          showWhen: contains(local!selectedColumn, "name")
        ),
        a!gridColumn(
          label: "age",
          value: fv!row.age,
          showWhen: contains(local!selectedColumn, "age")
        )
      },
      validations: {}
    )
  }
)


result 


as You mentioned record action , I'm assuming  you want to store the selected columns in database so that user can see the selected columns even after refreshing the page then you have to store the value in database as per user and if You have multiple grids for multiple records then you can store the value user specific and grid specific for more powerful out come