User Preference to Show, Hide, Reorder Columns of a grid

I have a customer requirement to allow the users of the application to individually control which columns of information they see on the screen for a given interface.

The application will have a default column sequence and that's what every user gets initially.

Then each user will have the ability to:

  • Reorder the columns
  • Hide columns from the display
  • Add columns back into the grid that were previously hidden
  • Reset the grid back to the default columns in sequence

Anyone have some example code to try and deal with this situation?

I'm open to any approaches.

  Discussion posts and replies are publicly visible

  • +1
    Certified Lead Developer

    Both of these things (show/hide and reorder) are possible, though the reorder functionality will be quite a bit more tricky.

    For show/hide, you would initialize an array of column names that'll be shown by default, as well as an array of all column names (these may just be duplicates of each other, unless you decide to have some columns that start out as hidden in some use cases, etc).  Near your grid, usually right above or right below, you could have a rich text link (labelled i.e. "show/hide columns") that when clicked, will expose a Checkbox component where the user can check or uncheck various columns.  That would save just into the "current columns" array, either instantaneously or after a "save" click.  The grid columns would simply check whether the current column's name is contained within that array, in their showWhen parameters.  I've done this before on some projects and it works decently, though you should note it reverts back to default every time a user reloads the interface unless you take unusual extra steps, which is possible but quite a bit more labor intensive up-front.

    Reordering might be a lot harder or impossible depending on how unique the columns will be.  For the moment let's assume you have some subset of your columns that will be identical - i.e. all they'll have is a label ("My Field"), a sort value ("myField"), and a plaintext value i.e. "fv!row.myField".  You could define those columns as an array of text or an array of dictionary, i.e. local!fields:{ { fieldName: "myField", fieldLabel: "My Field" },  {}, ...}, then you could define your gridColumns by iterating over the list of dictionary using a!forEach, like: a!forEach(local!fields, a!gridColumn(label: fv!item.fieldLabel, sortField: fv!item.fieldName, value: property(fv!row, fv!item.fieldName, null())).  The issue is then all such columns need to remain configured identically (you could build in exceptions but it would get overly complicated if it's more than just a few).  Secondarily, you could build a separate area in the interface where you list all the columns available, in their current order, and provide buttons like "move up", "move down" that would cause their relative orders in the base array to be swapped.  The rendering of your grid columns should then update in real time to reflect the reordering.  My caveat here is that I haven't done this before so I can't promise with 100% confidence that it'll work out very easily for you.  But might be worth a shot, or at least a test run.  The secondary caveat is the same as above, which is that it'll revert to the default state every time a user reloads the interface unless you take extra steps.

  • Thank you for the detailed response.  We're going to challenge our client's 'need' for this capability prior to starting to develop it.  What you've provided helps provide expectation management on the workload to complete this request.