2

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.

Improve this question
1
  • 1
    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, 2011 at 20:10

4 Answers 4

Reset to default
1

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

Improve this answer
2
  • 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, 2011 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, 2011 at 12:58
0

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
Improve this answer
2
  • 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, 2011 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, 2011 at 15:20
0

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?

You can add more tools/markup for lines or other adornments.

Improve this answer
0

How about giving them the option of creating groups, or sets of fields.

Each of these groups could have one or many fields, and they could choose if the group would be shown as column view, or form detail view.

They would be able to drag (or just move) each group up or down to rearrange the layout.

Something like this:

Example interface drawing

The list of drop-downs for each group wouldn't have to be horizontal, but you get the idea.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.