New grid widgets to replace grid/template grid / listviews for UI flexibility

200

Why do I wish for the restructuring of grids/template grids/listviews?

Currently the grids come with pre-defined structures. And they feel so limiting when it comes to UI design and UX.

In all honesty each project I've built I'm currently creating CSS or widget workarounds to facilitate better UX. 

And this is just taking a huge amount of extra time which I often get into discussions about with our clients and my managers because they don't understand the extra efforts it requires to work around the default structure of grids / template grids, and when you offer them the listview as an alternative which is more flexible in styling. You then have to explain to them that the listview can't be sorted by the user and also searching is limited compared to grids / template grids.

Both the normal buttons and paging buttons at the top are just horrendous.
As most grids get so long that buttons drop off the screen at the top. 
If there is multiple pages the user needs to scroll back-up to see whether there is another page.

Also almost every client wants the edit / delete / action buttons inline with the items. 
Because it isn't clear that you need to select an item and then click a button at the top of the grid.

How often have you've not experienced yourself: "you don't have an item selected" before clicking a button.
So yeah, we've created a widget that can actually replace columns of a normal grid with new content like buttons or images but the fact that we need a widget for that is just stupid.

And the reason we created the widget is because to achieve buttons inline with the items, you could choose to use the template grid, but then there is the issue of headers, grids have headers by default. Whereas if you want a template grid to have headers you're in trouble because it is not possible unless you javascript inject them into the DOM or CSS hack the paging buttons to the bottom of the grid and disable search. 

Same goes for a listview you can get there by going stylingless listviews and creating a table above and inside each list item aligning them as best as you can with CSS. But all this extra effort for such simple UX is just plain annoying.

SO to conclude my "rant", here is some constructive feedback as to how I would like to construct my lists of data.

Using a set of new core widgets:
 

- New grid widget that replaces grid / template grid / list view:

• Center body for actual list content ( required and this will be filled by the grid body data columns widget)
• Add css classes for grid body
• Add one or multiple top/left/right/bottom toolbars (can only contain the toolbars mentioned below)

- Grid body data column(s) widget:

• Displayed list size for grid body
• DISPLAY EMPTY VALUES AS NOTHING INSTEAD OF <label>&nbsp</label>!!!! Or give it the class "hidden"
• Setup the number of columns
• Set column widths by pixels, % or bootstrap grid widths (for example the current listview is a single column)
• Template selection per column per specialization (allow for setting a "is empty" template and "is null" template)
• Column editable toggle on / off
• Column visibility settings per user role
• Aggregate column attribute
• Working page tooltips per column . Currently grids even have a tooltip page option but this doesn't work at all.
• Column content (buttons,links,images,attributes,dataviews,listviews or pretty much any other Mendix widget/component)
• Selection modes
• Actions (left click / double click / right click / touch gestures for swipe-left swipe -right on row)
  • Open mendix page inside the row item (allow for selection of transition effect like the sidebar slide in effects so that it can look like a button menu is uncovered or edit page is expanded).
  • Open mendix page in context
  • Trigger button from button toolbar widget.

- Header toolbar:

• Toggle sort functionality by clicking on it (set sorting attribute to sort by when clicked)
• Add css classes per column
• The max number of columns inherited from grid body, per header segment it should allow for combining columns
• Inherit width is calculated by combining the width of the selected body column(s) per header

- Paging toolbar widget:

• Load more button as currently implemented for the listview (with possible auto-load more feature)
• Add css classes
• Hide paging toolbar when only 1 result displayed boolean
• Paging buttons (first data set, previous data set, next data set, last data set)
• A range of pages to display, for example:  1 - 2 - 3 - 4 - 5
• Number input (select data page by number)

- List summary toolbar widget:

• hide summary toolbar when only 1 result displayed boolean
• css class
• displayed page number, total number of pages, total content count and displayed content count as text variables that can be used in the summary toolbar
• definable text for grid to summarize what is displayed aka "item"/"items", "customer"/"customers" or "product"/"products" as text variables that can be used in the summary toolbar

Examples: 

1-50 customers displayed out of 1000 customers

1 product displayed out of 50 products

- Button toolbar widget:

• Allows for adding buttons that listen to selection(s) and is the equivalent of the current button bar functionality, only change is that now the buttons can be positioned on any side of the grid body.
• Dropdown button
• Toggle button group on/off to display the buttons as a collective.

- Search toolbar widget:

• Visibility toggle
• Initial visibility setup
• Text input search field widget which works like the list view, please include referenced attributes as possible searchable attributes.
  • Filter options as dropdown selection
    • is equal to
    • is not equal to
    • starts with
    • ends with
    • contains
    • does not contain
    • is empty
    • is not empty
    • is null
    • is not null
  • Toggle case insensitive
• Dropdown selection search input
  • Single select option or assocation attributes
  • Multi selection options or association attributes
  • Filter options as dropdown selection
    • is equal to
    • is not equal to
    • contains
    • does not contain
    • is empty
    • is not empty
    • is null
    • is not null
• Date/time selection search input
  • Select date attribute
  • Filter options for date selection
    • is not null
    • is null
    • is before
    • is before or equal to
    • is after
    • is after or equal to
    • is not equal to
    • is equal to
• Date/time range input
  • Select date attribute
  • Filter options for date range
    • is between
    • is exact duration
• Number/Decimal input
  • Select integer or decimal attribute
  • Filter options for numbers / decimals
    • is equal to
    • is not equal to
    • is greater or equal to
    • is greater
    • is less than or equal to
    • is less than
    • is null
    • is not null
• Number/Decimal range
  • Select integer or decimal attribute
  • Filter options for number range
    • is between

 

- Customized toolbar widgets from Appstore

• Don't know if it is needed but might be nice if new toolbars could be created.

asked 2017-07-18

30 answers