BluePrint: User Interface

Requirements

1. Users should be able to easily navigate to their desired functionality
2. Users should be presented with the minimum possible number of navigation options / menu items (while still being able to easily navigate to their desired functionality)
3. There should be a standard layout between different "resources"
4. Page Elements which require heavy server load (Maps, Advanced Search Forms, etc) should only be loaded when they are needed
5. It should be clear to a user what a specific page is required for

Create Read Update Delete (CRUD) (+List Search) Page Layout

Design

Some designs for improving the page layout have been documented and discussed here: ​https://docs.google.com/document/d/15TGk9H_iFKIz2VdTeOM6A38Sht0KTFP9aM51aqeLP30/edit

Tasks

This is a draft list of some tasks which could be implemented to improve the page layouts: Easy

• All Search pages should have a single text search on their simple search form
• There should be a button to unhide a create form on the search page
• There should be a button to unhide an import form on the search page
• List pages should be replaced with Search pages
• Records should open in read view by default
• There should be a button to toggle between the read view and an edit view
• When a record is saved (updated) the next page should be the read view for that record.

Hard

• The advanced search should only load when it is viewed
• There should be a button to toggle between the rheader and an edit form
  • Is this a button? We already have the 'basic details' tab which does this?
• When an item is opened from a list, it should be loaded by JS on top of the list page. When it is closed, the list should refresh to show the changes to the item (Or is there a better way to achieve this?)

Module Index Pages

Design

There is a draft design document here ​https://docs.google.com/document/d/1EKt6lSs1d2kuyCfCM8hQZdeL2zfCJ2JKvPU-dm81TUQ/edit with some ideas for module page content.

Tasks

• Page template with Predefined DIV classes to be able to create 2-5 panes in which content such as the following can be inserted
  • Simple Search box which doesn't display the unfiltered results by default & opens both search results &/or Advanced Search in a separate page
  • List of 'Top 5' either Actionable Items or FYI 'recently added/modified' for one or more resources (with hyperlinks to their details), with a 'More' button to see the full list
  • KPIs (Key Performance Indicators) / Summary Statistics
  • Maps only included where they add value - e.g. 'Recent Incidents' clearly adds value, whereas 'My Warehouses' far less so.
  • instructional text
  • Links / Big Buttons

Questions

• Should the ability to search multiple resources be done as separate search boxes or a single box with a dropdown to select the resource?
• Should the initial default page for a user be filtered for their Organisation (which could be their Branch, so is a reasonable default for many of both HQ & Field staff, where Branches are used) or should it be a set of New User instructions explaining the usage/terminology of the module (with perhaps a diagram) & a clear 'Personalise this Page' option which allows the user to configure the default filter settings for the page (e.g. Region/Country/Organisation/Branch/Office/Team)

Dashboards

See: BluePrint/UserInterface/Dashboard

DataTables

The dataTables should be set up using column names rather than numbers. This would mean that list-fields in the controller that creates the dataTable can be modified and reused by export formats within the same controller. That is the table can be displayed on the screen with one set of fields and then printed out as a PDF with a slightly different set of fields. The sort and filter information from the dataTable will be preserved and so the pdf will as close as possible reflect the table on the screen when printed. To achieve this the following will need to be considered:

• Set up the mData values in the javascript and use the mDataProps that is returned from the browser
• Check the initialation within the javascript, typically:
  • cache, columnSettings, rowActions, bulkActions and groupCoulmns
• may need to add some checks to the fnDataTablesPipline function
• possibly (but probably not) the group and row collapsing functions
• s3FormatRequest will need some changes
• the S3DataTable functions typically html() & json()