0.0-présentation 3.0

8/6/2019 0.0-Prsentation 3.0

1/49

1

Openbravo ERP 3.0 UX [email protected]

Disclaimer: Target release candidates for features are tentative

8/6/2019 0.0-Prsentation 3.0

2/49

2

Master Detail - Header Level Active

This is the parentrecord, the header. Itcan be shown in formor grid view (with arow selected).

The Mother of all windows, this is what most users are looking at all day. The parent-child relation is repre-sented by the different vertical screen parts (parent at the top). Every part can show a form or grid.

Threads on multipletabs. One tabs contentis visible at a time buttasks can run simulta-neously.

3.1/RC4

Child documents are shown belowthe parent view. To activate thislevel, it needs to be clicked. Theorange strip will move to this level.Below this child, there can be morechilds and so on.

Orange vertical strip indicates theactive level together with a hori-zontal line on top of the active tab.

Form view is activehere. It sits on top of the grid and can bemaximized and closed.

8/6/2019 0.0-Prsentation 3.0

3/49

3

Master Detail - Child Level Active

The row that is se-lected in the parentlevel determines whatis shown in the childlevel.

In this example both the top level (header) and the bottom level (child/lines) are shown in grid view. Thebottom level is active (hence the orange strip on the left side of it).

3.1/RC4

The action and process buttons inthe toolbar apply to the selectedlevel and selected objects therein.

The child level is now active,which is indicated by the orange

vertical bar to the left. In casemore than row is selected, check-boxes appear.

8/6/2019 0.0-Prsentation 3.0

4/49

4

Top Navigation BarQuick launch, Quick new, application menu, (recent), (bookmarks), (Options), Alerts, change role and log-out, help, company logo, powered by Openbravo Logo

2.10/RC2

The Openbravo logo is mandatoryand cannot be removed/replacec.The Your Company logo is a place-holder for the customers logo andis optional.

8/6/2019 0.0-Prsentation 3.0

5/49

5

Toolbar

Action buttons. Somecan have a permanentpressed down state,such as the SumBarand Join buttons.

The light bulb but-ton contains a list of related windows, seemore details elsewherein this document.

The toolbar contains two types of buttons: action buttons and process buttons. Action buttons are used forform and grid manipulation, such as New Document, Delete, Copy, Undo, Save, Print. Process buttons areused to invoke processes, typically on a modal layer on top of the form or grid. The process invoked appliesto the selected object (the active form or selected row). The light bulb button offers shortcuts to relatedwindows / processes, as if they were launched via the application menu.

The toolbar is xed in place and its actions apply to the active level: parent, child, subchild etc. The avail-able buttons depend on whether a grid or form view is active, e.g. an Insert Row button is only available ingrid view.

3.20/RC4

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

8/6/2019 0.0-Prsentation 3.0

6/49

6

Sections

Section that cannotbe collapsed becausethe data is essential.This can be con guredin window de nition.

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

This section is ex-panded, the twistie in the section headerpoints downwards.

3.30/3.40/RC4

This section is collapsed. Thelabels marked with an * indicatemandatory elds. Red labels indi-cate mandatory elds that do nothave a value yet. Clicking a labelopens the section and jumps to therelated eld.

8/6/2019 0.0-Prsentation 3.0

7/49

7

Four Columns Layout



This section is ex-panded, the twistie points downwards.

3.50/RC4


8/6/2019 0.0-Prsentation 3.0

8/49

8

Status Bar

First status item con-veys save status

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 righthand corner: arrows (navigating to previous or next record), maximize form and close form.

Status items do notfollow the 4 columnlayout of the form. Asmany as t up to 5 isrecommended

3.60/RC4

Left and right arrowsto browse records.Maximize button tomaximize the view.

The close button closes the formview and returns to the underlyinggrid.

8/6/2019 0.0-Prsentation 3.0

9/49

9

Mandatory Fields Visual Cue



This section is ex-panded, the twistie points downwards.

3.70/RC4


8/6/2019 0.0-Prsentation 3.0

10/49

10

Grid

The top left headercells indicate thenumber of selectedand the total numberof rows in the grid.

Grids have rows and can be selected. When a row is selected it is highlighted. When multiple rows are se-lected they will all be highlighted but also their checkboxes will be ticked.

The other headersare attributes. The

rst three headers arewarning, memo andattachment.

3.18/RC4

Column lters are present foreach column. The magnifying glassinvokes a selector.

8/6/2019 0.0-Prsentation 3.0

11/49

11

Pick & Execute: Create Invoices / Shipments from Sales Orders

Checkboxes in the 1stcolumn and link-outicons in the 2nd

An independent process that does not apply to a selected document. Header and footer are frozen, contentsection scrolls.

Title and instructions Column lters

5.20/PROD

Grids used are similar to the UISelector ones. They do not spanthe full width of the page in orderto avoid two sliders bars too closeto each other.

Frozen header. The X button can-cels and closes the process window.

A process window always has afrozen footer with buttons to con-

rm the execution of the process orto cancel / go back.

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

8/6/2019 0.0-Prsentation 3.0

12/49

12

Pick & Execute: Quick Picking: individual lines

Read-only summaryinfo taken from theunderlying (related)document to createcontext.

A dependent process that allows the user to reuse lines.

5.20/PROD

Additional dedicated lters tospeed up the picking.

The yellow cells are being edited inthis example.

Bottom left shows a checkbox witha darker background, indicatingthat the lines grid below alreadycontains such an object.

Link to a slightly dif-ferent picker window,clicking it will changethe content of thiswindow.

8/6/2019 0.0-Prsentation 3.0

13/49

13

Pick & Execute: Quick Picking: entire ordersA dependent proces, the alternative window to the previous one (individual lines).

5.20/PROD

Filters can be kept for next time

Clicking a cell revealsa bubble with two op-tions (more on thiselsewhere in this docu-ment)

8/6/2019 0.0-Prsentation 3.0

14/49

14

Pick & Execute: Quick Line Picking for ShippingSimilar to the previous ones, this one uses a full master-detail layout. User picks lines from the order thatis selected in the top grid.

5.20/PROD

8/6/2019 0.0-Prsentation 3.0

15/49

15

Pick & Execute: Add PaymentA dependent process window. User comes from an invoice or order and has pressed the Make Paymentbutton to invoke this window.

5.20/PROD

This cell is being edited

Differences in amount paid andexpected can be allocated to creditor refund

8/6/2019 0.0-Prsentation 3.0

16/49

16

Pick & Execute: Reconciliation

Field section. Start-ing parameters for theprocess are entered.

Windows with sections with elds, 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.

5.20/PROD

Instead of offering lter elds withdefaults, the column lters havedefaults such as unreconciledonly.

Read only aggregated values.

Process execution buttons.

8/6/2019 0.0-Prsentation 3.0

17/49

17

Process Log

Document links canbe clicked: the docu-ment will be opened ona new tab

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.

5.50/RC4

8/6/2019 0.0-Prsentation 3.0

18/49

18

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

1.19/RCx

Sumbar for top grid, for last col-umn, showing the sum of all valuesin that column

Sumbar for bottom grid, for Quan-tity column, showing the average of all values in that column

8/6/2019 0.0-Prsentation 3.0

19/49

19

DialogSimple dialog layered popups that let the user con rm process execution. Essentially they represent 2ndlevel process windows, hence the lightbox. The bottom text shows background information and a link.

5.40/RC4

8/6/2019 0.0-Prsentation 3.0

20/49

20

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

1.17/RC4

8/6/2019 0.0-Prsentation 3.0

21/49

21

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

1.18/RC4

8/6/2019 0.0-Prsentation 3.0

22/49

22

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

Con rmation mes-sage.

5.30/RC4

8/6/2019 0.0-Prsentation 3.0

23/49

23

Manual Windows

Example of manualwindow that sits on topof another document(transactions).

There are roughly two kinds of manual windows in OB: dedicated ones (full window) and process ones inpopups. Both should be treated similarly and be placed on a tab.

Process windowshows a xed headerbar, a grid and someinteractivity, in thiscase matching.

Another example: aformer process popupshould now sit on atab.

5.60/RC4

8/6/2019 0.0-Prsentation 3.0

24/49

24

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

7.1/RC4

8/6/2019 0.0-Prsentation 3.0

25/49

25

Enhanced UI SelectorAlmost identical to a regular selector but now with additional dedicated lters at the top for speeding upthe ltering.

3.19, 7.20 / RC?

8/6/2019 0.0-Prsentation 3.0

26/49

26

Multiple Objects SelectorThis selector allows selection of multiple objects. The selected objects are collected in the column to theright. Details can be viewed by clicking object: a details panel appears on top

Selected objects Column lters

3.19,7.20/RC4/PROD

Details panel

8/6/2019 0.0-Prsentation 3.0

27/49

27

Numerical SelectorA selector that is used to build continuous or discontinuous ranges, used in column lters

3.19/RC4

The condition can be ipped intoan exclude rather than include

8/6/2019 0.0-Prsentation 3.0

28/49

28

Time Range SelectorSelector used to set time ranges for lters. A set of common values must be delivered by default, such as

last week.

3.19/RC4

8/6/2019 0.0-Prsentation 3.0

29/49

29

Modules InstalledUsers can view the currently installed modules on the Module Manager - Installed Modules tab. This is acustom 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 rede-sign into 3.0 style

Do not forget styleredesign for disabledmodules (current

grey, italic and strikedthrough + red alert)

8/6/2019 0.0-Prsentation 3.0

30/49

30

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


8/6/2019 0.0-Prsentation 3.0

31/49

31

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


8/6/2019 0.0-Prsentation 3.0

32/49

32

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

6.10/RC3

8/6/2019 0.0-Prsentation 3.0

33/49

33

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

6.10/RC3

8/6/2019 0.0-Prsentation 3.0

34/49

34

Save ViewViews, including screen layout, lters, sumbars and column visibility/order can be saved.

Menu for Save View

3.36/RC?

8/6/2019 0.0-Prsentation 3.0

35/49

35

Editable GridAttribute values can be modi ed in grid cells directly. Cells that are have selector values show a dropdownand magnifying glass that invokes a selector. Clicking a cell once shows a bubble with options, twice edits.

3.37/PROD

Single click invokes the optionsbubble, double click edits.

New row with cell inedit mode

8/6/2019 0.0-Prsentation 3.0

36/49

36

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

3.37/PROD

Single click invokes the optionsbubble, double click edits.

8/6/2019 0.0-Prsentation 3.0

37/49

37

Column lters

Binary column ltersuse buttons instead of

elds. You click the *

to lter. You click thelter button to clear.

Only one type of search will be used for 3.0: Column Search. It does implicit ANDs by default and shouldalso support the following:

Filter elds behaveaccording to the col-umn value type. Here

a data picker is used.

The X clears thelter.

RC3

In case of multiple lters that areobtained via a selector, the amountof lter criteria is shown. It can beclicked to launch the selector again.

8/6/2019 0.0-Prsentation 3.0

38/49

38

Attachments

Attachments can beadded and removedhere. Icons for most

common le types areused.

Forms have three asset sections: Attachments, notes and linked items. They can be collapsed and expand-ed.

3.20/RC4

8/6/2019 0.0-Prsentation 3.0

39/49

39

NotesForms have three asset sections: Attachments, notes and linked items. They can be collapsed and expand-ed.

Notes can be added just by typing in the

eld and hitting the

Save button.

3.29/RC4

8/6/2019 0.0-Prsentation 3.0

40/49

40

Linked ItemsForms have three asset sections: Attachments, notes and linked items. They can be collapsed and expand-ed.

3.30/RC4

Linked items follow the samestructure as in 2.50 but now in amore usable graphical representa-tion. The last column has a link tothe full record.

8/6/2019 0.0-Prsentation 3.0

41/49

41

HelpContextual help can be accessed either via the help button in the toolbar. Help content opens on a newtab.

Help item in top navi-gation

RC1

8/6/2019 0.0-Prsentation 3.0

42/49

42

Inner & Outer JoinJoins are complex queries that are used in the grids to show all records that contain the child records se-lected. In this example: all sales orders that have a product called Sleeping Bag Meow.

These buttons ac-tivate inner or outer

joins

3.26/RC?

8/6/2019 0.0-Prsentation 3.0

43/49

43

Linked Labels

Link button in processgrid.

In both grids or forms, the user can click the link (arrow) button to open the current object (when the eldhas a value) or a new object on a new tab.

Link button in eldlabel

3.9/RC4

8/6/2019 0.0-Prsentation 3.0

44/49

44

Use as lter ( lter on me)Clicking a cell in a grid invokes a bubble with the option Use as lter. This will use the selected value as acolumn lter.

Bubble

RC3

8/6/2019 0.0-Prsentation 3.0

45/49

45

Related WindowsThe light bulb button in the toolbar gives access to a nifty list of related windows, for example the mostlogical next steps in the users task. These shortcuts can be preset by an admin or be de ned on user level

It is very likely thata user wants to createshipments from a list

of orders when in theShipments window.

3.41/PROD

8/6/2019 0.0-Prsentation 3.0

46/49

46

Mobile DevicesIt is not a focus but it should be kept in the back of our minds that OB ERP could be run on PDAs. The im-pact of new mobile devices such as touch screen input based iPad should not be underestimated.

Typical PDA resolu-tions are 480x320 (Ap-ple iPhone) 800x480

(HTC Android NexusOne) pixels.

Touch screen inputbecomes more ubiqui-tous.

1.14/PROD

iPad resolution is 1024x768: aworthy screen size for OB!

Touch based screen devices havespeci c requirements for GUI com-ponents. Hover or right-mouse clickfor example are not used. Manycomplex javascript components donot work awlessly.

8/6/2019 0.0-Prsentation 3.0

47/49

47

Drag & Drop Menu BuilderAvailable in 2.50 but less relevant for 3.0 because of the shift to navigation via launch pads, contextuallinks and bookmarks, recent and saved objects. Perhaps give it a quick graphical x and leave it then.

8.10/RC?

8/6/2019 0.0-Prsentation 3.0

48/49

48

Standard ReportStandard reports in OB 2.X need a x.

9.10, 9.20 / RC?To be designed.

8/6/2019 0.0-Prsentation 3.0

49/49

Integration with 3rd party dashboardsIntegrating Actuate/BIRT/Pentaho functionality in Openbravo is under discussion. This has an impact onthe My Openbravo and BI/Family Grid designs.

4.6/RC?To be determined.

0.0-présentation 3.0

Documents