# Need assistance with ideas for user configurable data view

I'm hoping the folks here can help me with some ideas for UI that allows a user to select which fields should be displayed in a "data view". The twist here is that the data view is a mix between a straight-forward column oriented list view and a form details view.

A short example the output could be:

SomeField AnotherField ThirdField
--------- ------------ ----------
Value1    Value2       Value3
ForthField: Value4  FifthField: Value5
SixthField: Value6


Users need to be able to select which fields they want displayed as columns (aka "the first row") and then which fields they want to display as part of a form details view (aka "the 2nd through nth rows").

I'm thinking about using a grid of dropdowns (containing field names)... with n columns and m rows (limited to say... 25 columns by 10 rows). But... this won't result in a super appealing UI.

• Maybe I'm just having trouble envisioning this, but it seems pretty complex. Maybe to complex to make a one-size-fits-all interface. Can any of the fields be used either as columns or rows? Are the form detail fields/values associated with Value1 in your example? – Voodoo Apr 5 '11 at 20:10

Check the first example of the ExtJS grid plugin demo page, maybe it's what you need!

• The first example is close in functionality... except it does not provide any means to select fields to display/hide for the "data view" portion... only columns for the "list view" portion. Thanks though! – ConfusionReins Jan 18 '11 at 12:49
• True, that part is yet to be made, but given the already existing functionality, that shouldn't be too hard. – ammoQ Jan 18 '11 at 12:58

You can display all your data in columns in a standard way then allow the user to drag the headers of the columns to be displayed in the form details.

Take a look at the Telerik DataGrid grouping demo. You can drag a column header into the top area marking it for grouping. In your case that top area would mean "form details column". The layout of the grid row has then to be adapted to show the selected columns in the form details.

Form details: ForthField FifthField SixthField
---------------------------------
SomeField AnotherField ThirdField
--------- ------------ ----------
Value1    Value2       Value3
ForthField: Value4  FifthField: Value5
SixthField: Value6

• Interesting... drag a field out of the header and drop it "on a details row". Though... I really dislike a "mouse only" interaction (not looking for full accessibility right now... but maybe in the future). Thanks! – ConfusionReins Jan 18 '11 at 15:12
• You can avoid drag and drop. Just like removing a header from the "details row" is done by clicking on a red X icon next to the field name, you can imagine having another icon next to normal headers to move them to the "details row". A thing that you will miss without drag and drop is fields reordering, which is usually done by mouse in data grid headers. – Mart Jan 19 '11 at 15:20

Am I right that you have ±250 data fields, and that you want the user to arrange them? Then drop-down widgets are certainly not the way to go!

Maybe have a spreadsheet-like grid where you can type in plain text (to serve as labels) and fields (distinguished from plain text by starting them with \$, auto-complete). Would your users be comfortable with that?