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

Question

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.

Mike Schmitt · Accepted Answer

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.

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

Top Replies