Openbravo ERP

3.0 UX

Components

robgoris@openbravo.com
Disclaimer: Target release candidates for features are tentative

Master Detail - Header Level Active

The Mother of all windows, this is what most users are looking at all day. The parent-child relation is represented by the different vertical screen parts (parent at the top). Every part can show a form or grid. This is the parent record, the header. It can be shown in form or grid view (with a row selected). Threads on multiple tabs. One tabs content is visible at a time but tasks can run simultaneously. Form view is active here. It sits on top of the grid and can be maximized and closed.

3.1/RC4

Orange vertical strip indicates the active level together with a horizontal line on top of the active tab.

Child documents are shown below the parent view. To activate this level, it needs to be clicked. The orange strip will move to this level. Below this child, there can be more childs and so on. 2

Master Detail - Child Level Active

In this example both the top level (header) and the bottom level (child/lines) are shown in grid view. The bottom level is active (hence the orange strip on the left side of it). The row that is selected in the parent level determines what is shown in the child level.

3.1/RC4

The action and process buttons in the toolbar apply to the selected level and selected objects therein.

The child level is now active, which is indicated by the orange vertical bar to the left. In case more than row is selected, checkboxes appear.

Top Navigation Bar

Quick launch, Quick new, application menu, (recent), (bookmarks), (Options), Alerts, change role and logout, help, company logo, powered by Openbravo Logo

2.10/RC2

The Openbravo logo is mandatory and cannot be removed/replacec. The Your Company logo is a placeholder for the customers logo and is optional.

Toolbar
The toolbar contains two types of buttons: action buttons and process buttons. Action buttons are used for form and grid manipulation, such as New Document, Delete, Copy, Undo, Save, Print. Process buttons are used to invoke processes, typically on a modal layer on top of the form or grid. The process invoked applies to the selected object (the active form or selected row). The light bulb button offers shortcuts to related windows / processes, as if they were launched via the application menu. The toolbar is fixed in place and its actions apply to the active level: parent, child, subchild etc. The available buttons depend on whether a grid or form view is active, e.g. an Insert Row button is only available in grid view.

3.20/RC4

The orange process buttons start processes applied to the object(s) selected in the active level.

Action buttons. Some can have a permanent pressed down state, such as the SumBar and Join buttons.

The light bulb button contains a list of related windows, see more details elsewhere in this document.

Sections
Fields are grouped in sections that can be collapsed. Collapsed sections still show the contained field labels, clicking a label opens the section and moves the focus to the related field of that label.

3.30/3.40/RC4

Section that cannot be collapsed because the data is essential. This can be configured in window definition.

This section is expanded, the twistie in the section header points downwards.

This section is collapsed. The labels marked with an * indicate mandatory fields. Red labels indicate mandatory fields that do not have a value yet. Clicking a label opens the section and jumps to the related field.

Four Columns Layout

Fields are grouped in sections that can be collapsed. Collapsed sections still show the contained field labels, clicking a label opens the section and moves the focus to the related field of that label.

3.50/RC4

Section that cannot be collapsed because the data is essential. This can be configured in window definition.

This section is expanded, the twistie points downwards.

This section is collapsed. The labels marked with an * indicate mandatory fields. Red labels indicate mandatory fields that do not have a value yet. Clicking a label opens the section and jumps to the related field.

Status Bar
Displaying summary information above the form about the document status, its contents and its children. Assists the user in preventing errors, checking and identifying the record. Control buttons sit in the right hand corner: arrows (navigating to previous or next record), maximize form and close form.

3.60/RC4

First status item conveys save status

Status items do not follow the 4 column layout of the form. As many as fit up to 5 is recommended

Left and right arrows to browse records. Maximize button to maximize the view.

The close button closes the form view and returns to the underlying grid.

Mandatory Fields Visual Cue

Fields are grouped in sections that can be collapsed. Collapsed sections still show the contained field labels, clicking a label opens the section and moves the focus to the related field of that label.

3.70/RC4

Section that cannot be collapsed because the data is essential. This can be configured in window definition.

This section is expanded, the twistie points downwards.

This section is collapsed. The labels marked with an * indicate mandatory fields. Red labels indicate mandatory fields that do not have a value yet. Clicking a label opens the section and jumps to the related field.

Grid
Grids have rows and can be selected. When a row is selected it is highlighted. When multiple rows are selected they will all be highlighted but also their checkboxes will be ticked. The top left header cells indicate the number of selected and the total number of rows in the grid. The other headers are attributes. The first three headers are warning, memo and attachment.

3.18/RC4

Column filters are present for each column. The magnifying glass invokes a selector.

10

Pick & Execute: Create Invoices / Shipments from Sales Orders

An independent process that does not apply to a selected document. Header and footer are frozen, content section scrolls. Checkboxes in the 1st column and link-out icons in the 2nd Title and instructions Column filters

5.20/PROD

Frozen header. The X button cancels and closes the process window.

Grids used are similar to the UI Selector ones. They do not span the full width of the page in order to avoid two sliders bars too close to each other.

Link-out buttons (arrow shaped) to open the record on a new tab for further inspection.

A process window always has a frozen footer with buttons to confirm the execution of the process or to cancel / go back.

11

Pick & Execute: Quick Picking: individual lines

A dependent process that allows the user to reuse lines.

5.20/PROD

Read-only summary info taken from the underlying (related) document to create context.

Link to a slightly different picker window, clicking it will change the content of this window.

Additional dedicated filters to speed up the picking. The yellow cells are being edited in this example.

Bottom left shows a checkbox with a darker background, indicating that the lines grid below already contains such an object.

12

Pick & Execute: Quick Picking: entire orders

A dependent proces, the alternative window to the previous one (individual lines).

5.20/PROD

Clicking a cell reveals a bubble with two options (more on this elsewhere in this document)

Filters can be kept for next time

13

Pick & Execute: Quick Line Picking for Shipping

Similar to the previous ones, this one uses a full master-detail layout. User picks lines from the order that is selected in the top grid.

5.20/PROD

14

Pick & Execute: Add Payment

A dependent process window. User comes from an invoice or order and has pressed the Make Payment button to invoke this window.

5.20/PROD

This cell is being edited

Differences in amount paid and expected can be allocated to credit or refund

15

Pick & Execute: Reconciliation

Windows with sections with fields, a grid and read only values that can be related to the users selection. Bank reconciliation is a typical example of this kind of window. Field section. Starting parameters for the process are entered.

5.20/PROD

Instead of offering filter fields with defaults, the column filters have defaults such as unreconciled only.

Read only aggregated values.

Process execution buttons.

16

Process Log
A process log is dumped on a new tab by clicking the link View Process Log in the yellow message bars, after having completed a process. They simply show the outcome and the documents affected. Document links can be clicked: the document will be opened on a new tab

5.50/RC4

17

Sumbar
Sumbars can be shown/hidden by clicking the Sum button in the toolbar. They sit at the bottom of the grids and show aggregated values for columns with numerical values. User chooses sum, count or average

1.19/RCx

Sumbar for top grid, for last column, showing the sum of all values in that column

Sumbar for bottom grid, for Quantity column, showing the average of all values in that column

18

Dialog
Simple dialog layered popups that let the user confirm process execution. Essentially they represent 2nd level process windows, hence the lightbox. The bottom text shows background information and a link.

5.40/RC4

19

Column Settings
Columns can be reordered (dragging) and hidden/shown via a context menu.

1.17/RC4

20

Loading Slow Levels

For expensive queries exceeding 1 second, a process indicator (e.g. the spinning OB logo) is shown in the level that is loading its content.

1.18/RC4

21

Feedback Message
Feedback is given after process execution. This type of message typically communicates success or failure and can be accompanied with links to produced documents and the Process Log. Confirmation message.

5.30/RC4

22

Manual Windows
There are roughly two kinds of manual windows in OB: dedicated ones (full window) and process ones in popups. Both should be treated similarly and be placed on a tab. Example of manual window that sits on top of another document (transactions). Process window shows a fixed header bar, a grid and some interactivity, in this case matching. Another example: a former process popup should now sit on a tab.

5.60/RC4

23

UI Selector - Standard
UI Selectors are used for selecting attribute value(s) while being in a form. The selector is launched on a layer on top of the current window.

7.1/RC4

24

Enhanced UI Selector
Almost identical to a regular selector but now with additional dedicated filters at the top for speeding up the filtering.

3.19, 7.20 / RC?

25

Multiple Objects Selector

This selector allows selection of multiple objects. The selected objects are collected in the column to the right. Details can be viewed by clicking object: a details panel appears on top Selected objects Column filters

3.19,7.20/RC4/PROD

Details panel

26

Numerical Selector
A selector that is used to build continuous or discontinuous ranges, used in column filters

3.19/RC4

The condition can be flipped into an exclude rather than include

27

Time Range Selector

Selector used to set time ranges for filters. A set of common values must be delivered by default, such as last week.

3.19/RC4

28

Modules Installed
Users can view the currently installed modules on the Module Manager - Installed Modules tab. This is a custom window. It needs a 3.0 redesign due to strategic importance. This is linked to the Exchange project. Do not forget style redesign for disabled modules (current grey, italic and striked through + red alert)

?
Keep structure as it is for 3.0 nice to have is to do a visual redesign into 3.0 style

29

Modules Add
Users can add modules on the Module Manager - Add Modules tab. This is a custom window. It needs a 3.0 redesign due to strategic importance. This is linked to the Exchange project.

?
Keep structure as it is for 3.0 nice to have is to do a visual redesign into 3.0 style

30

Modules - Rebuild
The last step in module installation is rebuilding the system. This custom process window shows progress and gives feedback on warnings and errors. It needs a redesign for 3.0 due to strategic importance.

?
Keep structure as it is for 3.0 nice to have is to do a visual redesign into 3.0 style

31

Log On
Log on screens in a conceptual redesign. The two versions, for the demo instance and for a customer instance need to be based on the same template. They also need be modular and skinnable.

6.10/RC3

32

Auto logout
Auto log-out needs to be pushed by the system after x minutes of inactivity. In the current version, the user loses the session. The redesign pushes a dialog to the user with the possibility to re-login and keep on working in the current session.

6.10/RC3

33

Save View
Views, including screen layout, filters, sumbars and column visibility/order can be saved.

3.36/RC?

Menu for Save View

34

Editable Grid
Attribute values can be modified in grid cells directly. Cells that are have selector values show a dropdown and magnifying glass that invokes a selector. Clicking a cell once shows a bubble with options, twice edits. New row with cell in edit mode

3.37/PROD

Single click invokes the options bubble, double click edits.

35

Contextual Menu
Cells in grids can be single-clicked to invoke a bubble menu. Depending on the context, the options offered are: Use as Filter, Open on Tab, Edit Cell.

3.37/PROD

Single click invokes the options bubble, double click edits.

36

Column filters
Only one type of search will be used for 3.0: Column Search. It does implicit ANDs by default and should also support the following: Binary column filters use buttons instead of fields. You click the * to filter. You click the filter button to clear. Filter fields behave according to the column value type. Here a data picker is used. The X clears the filter.

RC3

In case of multiple filters that are obtained via a selector, the amount of filter criteria is shown. It can be clicked to launch the selector again.

37

Attachments
Forms have three asset sections: Attachments, notes and linked items. They can be collapsed and expanded. Attachments can be added and removed here. Icons for most common file types are used.

3.20/RC4

38

Notes
Forms have three asset sections: Attachments, notes and linked items. They can be collapsed and expanded. Notes can be added just by typing in the field and hitting the Save button.

3.29/RC4

39

Linked Items
Forms have three asset sections: Attachments, notes and linked items. They can be collapsed and expanded.

3.30/RC4

Linked items follow the same structure as in 2.50 but now in a more usable graphical representation. The last column has a link to the full record.

40

Help
Contextual help can be accessed either via the help button in the toolbar. Help content opens on a new tab. Help item in top navigation

RC1

41

Inner & Outer Join

Joins are complex queries that are used in the grids to show all records that contain the child records selected. In this example: all sales orders that have a product called Sleeping Bag Meow. These buttons activate inner or outer joins

3.26/RC?

42

Linked Labels
In both grids or forms, the user can click the link (arrow) button to open the current object (when the field has a value) or a new object on a new tab. Link button in process grid. Link button in field label

3.9/RC4

43

Use as filter (filter on me)

Clicking a cell in a grid invokes a bubble with the option Use as filter. This will use the selected value as a column filter. Bubble

RC3

44

Related Windows
The light bulb button in the toolbar gives access to a nifty list of related windows, for example the most logical next steps in the users task. These shortcuts can be preset by an admin or be defined on user level It is very likely that a user wants to create shipments from a list of orders when in the Shipments window.

3.41/PROD

45

Mobile Devices
It is not a focus but it should be kept in the back of our minds that OB ERP could be run on PDAs. The impact of new mobile devices such as touch screen input based iPad should not be underestimated. Typical PDA resolutions are 480x320 (Apple iPhone) 800x480 (HTC Android Nexus One) pixels. Touch screen input becomes more ubiquitous.

1.14/PROD

iPad resolution is 1024x768: a worthy screen size for OB!

Touch based screen devices have specific requirements for GUI components. Hover or right-mouse click for example are not used. Many complex javascript components do not work flawlessly. 46

Drag & Drop Menu Builder

Available in 2.50 but less relevant for 3.0 because of the shift to navigation via launch pads, contextual links and bookmarks, recent and saved objects. Perhaps give it a quick graphical fix and leave it then.

8.10/RC?

47

Standard Report
Standard reports in OB 2.X need a fix.

9.10, 9.20 / RC?

To be designed.

48

Integration with 3rd party dashboards

Integrating Actuate/BIRT/Pentaho functionality in Openbravo is under discussion. This has an impact on the My Openbravo and BI/Family Grid designs.

4.6/RC?
To be determined.

49