View source | Discuss this page | Page history | Printable version   

User Interface Introduction

Back button.png   Back to User Guide


Contents

Introduction

The Openbravo 3 user interface is optimized for productivity. It is characterized by the following:

Log In

You access Openbravo through a Web browser.

View larger

1. Enter your Openbravo URL in the address bar of the browser.


The login window will display.

In case the login page does not display, verify the URL, or contact your system administrator.

2. Enter your user name and password. The user name and password are assigned by the system administrator. If you don´t know your user name and password contact your system administrator.


3. Click login

The OpenbravohHome page displays.

Google Account Association

You have the ability to log-in to an Openbravo instance using your Google Account by clicking the G-button that is shown on the log-in screen below the log-in button. There are two ways to use the Google Accounts authentication service:

  • Link an existing Openbravo user name with a Google Account
  • Configure an instance to allow any user with a Google Account to log-in into the application. If no Openbravo user is linked to that Google Account, a new one is created using defaults.

Learn more about Google Account association in the Configuration Manual

Screen Areas

View larger

The Openbravo 3 screen consists of the following components:

  • Top navigation
  • Main (1st level) tabs
  • Toolbar
  • Message area
  • Status bar
  • Header level (form or grid)
  • Sections
  • Child (2nd level) tabs
  • Column filters
  • Child grid
  • Grandchild (3rd level) tabs

Top Navigation

Top-nav.png

The top navigation offers the following menus or functionalities:

  • Quick Menus
    • Create New
    • Launch
  • Application Menu
  • Alerts
  • Log out
  • User Preferences
  • Help

Quick Menus

Quickmenu-buttons.png

Via the quick menus you can quickly launch new documents or jump to existing documents.

  • Create New: a new document of a specific type is started on a new tab in form view
  • Launch: a grid for a specific document type is opened on a new tab

Both QuickCreate and QuickLaunch work in the same way using auto-suggest based on the typed input. By simply entering the first couple of letters of the name of the document type, you will be offered suggestions for the type of document you are looking for.

WIK Quick.png

Application Menu

The Openbravo 3 application menu uses the same taxonomy as the 2.x versions, only the presentation has changed. Folders are replaced by expandable menus but its contents remain the same.

View larger

The contents of the Application Menu depends on the user's role. For example, one user can have various roles and see different things with each. Users and roles are usually created and maintained by the client's Administrator.

Alerts

View larger

WIK Alerticon.png

An alert is a notification that informs or warns its recipients about a critical or very important situation that has arisen. With one click you can see and edit all your active alerts.

The number of new alerts is shown in the top navigation as Alerts (n). Clicking this link will take you to the Alerts Management tab. This tab shows four sections, each one representing a status or stage in the alert life cycle:

  • New alerts: alerts that you have not marked as read/acknowledged and that are not ignored nor solved
  • Pending alerts: alerts that you have marked as read/pending because you don´t want to see them in the new section anymore. You would do this for example when you or your colleague have taken care of the problem but this has not been updated in the system. A typical example is: Stock of product x dropped below critical level. You just placed a new order by phone but it will still take a day to receive the orders.
  • Ignored alerts: alerts that you do not want to see back again. By placing them in the Ignore section, it means that they are now exceptions to the alert rule.
  • Solved alerts: alerts are automatically moved to the solved section when the system notices that the alerts threshold seized to be violated. Note that you cannot mark alerts as solved yourself.

In the Notes column, you can add a comment. You would typically do it when moving a New alert to (for example) the Acknowledged/read section. You can move alerts to a different section and clicking one of the buttons in the top right of the grid. The Record column contains clickable links. They let you open the (problematic) record on a new tab for further investigation.

More about Alerts

Help & About

The last item in the top navigation is the Help menu. It also contains an About item. Help content is opened on a new tab.

User Preferences

Click the user name in the top navigation to access a user preferences menu. The menu is split in two tabs: Profile and Change Password

View larger
  • See the current role information.
  • Change the session options such as role, entity, organization, language you want to work with.
  • Set your default session options .
  • Change password (on the second tab in the menu)

Log out

Logout-icon.png

This button logs you out of the application. A confirmation dialog lets you confirm.

Tabs

View larger

Openbravo 3 allows you to have multiple transactions open a the same time on different tabs. You can switch between active tabs, just as you do using a modern internet browser. Tabs can be closed by pressing the X button.

In case of overflow, when the total width of the tabs exceed the available horizontal space, three buttons appear to the right of the last tab that allow you to scroll through the tabs and easily navigate to one.

Levels & Views

View larger

An application window consists of one or more levels: parent, child and sometimes even grandchildren and deeper. They are separated by a horizontal splitter bar. Each level can be displayed in grid or form view.

Grid View

View larger

The grid view functions as the base view and often as a starting point to filtering and drilling down. The user can open a record in form view on top of the grid. The interaction metaphor that is used is that of a file explorer of an operating system. The grid is the folder with files, a double click opens the record. The record in form view can be closed at any time by clicking the close (X) button in the top right corner of the form.

A record in the grid can be opened via:

  • A double click on the row
  • Pressing the <ENTER> key on the keyboard
  • Clicking the form/document icon on the left hand side of the row

Form View

View larger

The form view is used for more complex editing of individual records. Normally header records are created in form view because they e.g. a description which usually is too long to enter comfortably in grid view.

The form view can be closed by

  • Clicking the close (X) button in the top right of the form.
  • Clicking the Save&Close button in the toolbar, this is the button with the floppy disk combined with the X symbol.

Form Personalization

This feature allows you to change the order and visibility of fields, and several other settings:

  • assign fields to the status bar and assign fields to existing field groups
  • set the colspan or rowspan
  • define if a field should be placed on a new row
  • the field which will get the first focus

WIK FormPersonalization.png

More detailed documentation:Window_Personalization

Bulbgraph.png   This is a Premium functionality. Learn more about the benefits of Openbravo's commercial editions

Activating, resizing, maximizing and toggling levels

View larger

Each application window is split in two visible levels. This can be either parent-child or child-grandchild (or even deeper down). The distribution of the height of each level is not fixed as it can be changed by dragging the horizontal splitter bar that divides the two levels.

Only one level can be active at a time. An active level is marked with an orange vertical strip on the left hand side and an orange horizontal strip on top of the tab. You can toggle between active levels simply by clicking in a non-active level. The orange markers will move along.

The standard view is parent-child (also known as header-lines). In case there is a third level available, it will sit at the bottom of the window in collapsed state. In order to expand the third level, you can simply click on its tab. It will then pop out and push the other levels upwards. In this case you will notice that the top level (header) will become collapsed. Here the same interaction principle applies: a single click on the header tab will make it re-appear.

A level can be maximized by double clicking on its tab. Double clicking it again will restore its size to the previous size.

View larger

Saving Views

Saving Views stores grid and form settings, column filters and even the entire layout of the screen, for example the position of the splitterbar between the header and lines. So imagine that you rearranged your grid and it´s perfectly adapted to your task. You even added some column filters, for example you only want to see invoices that are more than 21 days overdue for organization East Coast. Now you save all this in one go using a name. Now when you need to work on another task that needs other filters and grid or form settings, you can easily retrieve this view later. You can access Saved Views through a pull down menu that sits underneath the Saved Views button in the toolbar.

WIK SavingViews.png

A saved view can be set as default and can be deleted. The active view is indicated by a little arrow in front of the view name.

As an administrator you are able to save predefined views on different levels (client, org, role) which are made available to users. As a regular user you can only edit/save views on your own levels and not change views entered by an administrator.

More detailed documentation: Window_Personalization

Bulbgraph.png   This is a Premium functionality. Learn more about the benefits of Openbravo's commercial editions

Advanced Grid Functionality

The Openbravo 3 grids let you browse, select, filter and organize high volumes of records with ease. Listed below are the main capabilities of the new grids.

Selecting Rows

View larger

Row(s) in grids can be selected as follows:

  • Selecting a single row is simply done by clicking on it. There is no need to tick the checkbox in front of the row.
  • Multiple selection is done by either ticking the checkboxes in front of the rows or using CTRL-click or SHIFT-click combinations.

In the top right of the grid, two numbers are shown. The first one indicates the number of selected rows, the second one the total number of rows in the grid.

Column Filters

View larger

On top of the columns in a grid you will find column filters. There are three types of column filters:

  • Regular column filters: These are fields that are empty by default but once you start typing the first characters of a search term, the grid will be filtered in real-time.
  • Date column filters: Clicking it will launch a dialog where you can set a range, for example 8 days ago till today.
  • Dropdown column filters: Filters that contain a limited set of values. Just open the dropdown and select a value. One of the values is always "blank" in case you do not want to filter the column.

The following symbols can be used in regular column filter fields to create more complex filter expressions. Note that once you start typing a filter expression in a numerical value column, the real-time filtering is switched off and you will need to hit Enter to apply the filter.


Symbol Filter Example Which means
< less than (also works for strings) <100 Only show amounts less than 100
> greater than (also works for strings) >100 Only show amounts greater than 100
 ! not equal (also works for strings)  !100 Show everything except amounts that equal 100
^ starts with ^H Only show values that start with "H"
EndsWithSymbol.png ends with EndsWithSymbol.pngH Only show values that end with "H"
 !^ does not start with  !^H Only show values that do not start with "H"
 !@ does not end with  !@H Only show values that do not end with "H"
~ contains (this is the default for most column filters) ~buenas Only show values that contain "buenas"
 !~ does not contain  !~buenas Only show values that do not contain "buenas"
# is Null # Only show records without a value in this column
 !# is not Null  !# Only show records with a value in this column
== exact match (for fields where 'contains' is the default) ==FV/1 Only show values that equal exactly "FV/1"
a...b range (between a and b) 0...100 Only show values between 0 and 100.
=.fieldName equals other column =.dueAmount Only show records which values equal those of another column. First letter of column label in lowercase, other parts start with uppercase


Filters can be cleared by clicking the funnel icon in the top right of the grid.

Implicit Filters

Some grids, especially those with large data volumes, have preset hidden filters, the so called implicit filters. Typical implicit filters are set to filter out already process transactional documents or documents before a certain date. Implicit filters can be cleared by clicking the funnel icon in the top right of the grid.

Filtering in Selector Grids

View larger

Selectors make use of modal dialogs containing grids. Selector grids work in the same way as regular grids. Often, they also contain preset implicit filters that can be cleared by clicking the funnel icon. Typical cases where selectors are used are business partner and product selection.

Setting Column Visibility

View larger

Via a right-mouse-click on any column header, a context menu can be invoked. In this menu, you can set the column visibility via the Columns item by ticking or unticking the column (field) names.

Setting Column Order & Widths

View larger

Column order and width can simply be modified by dragging the column header or separating split line to another position.

Sorting

View larger

Columns can be sorted by clicking on a column header. A second click sorts the column in the reverse order. A triangle symbol conveys the current ordering.

Freezing Columns

View larger

Freezing columns means that they will be kept in the same position regardless of the position of the horizontal slider bar. Freezing column(s) is typically done when information in the right hand side of the grid (that is accessed via horizontal scrolling) needs to be viewed in the context of columns on the left hand side.

Columns can be frozen via the grid context menu that is invoked via a right mouse click on a column header.

Formula Columns

View larger

A formula column shows the outcome of an equation using values of two or more columns. Via the context menu (right mouse click on column header) the formula dialog is launched. Here, you enter the title of the column and the actual definition. Every column containing numerical values is represented by a capital letter. These letters are used to build the formula. For example:

  • A = Total Paid
  • B = Outstanding Amount

The formula to sum these two is: A+B

Summary Columns

View larger

Similar to the formula columns, the summary columns simply combine to non-numerical values into a single string. The columns are represented by capital letters. When building the expression the pound sign (#) needs to be used to identify them as values.

Exporting grid content to a spreadsheet

Openbravo 3 allows the user to export grid content to a CSV file (Comma-Separated Values) via a button in the toolbar(WIK button Export.png). This file can then be imported in most spreadsheet applications such as Microsoft Excel and OpenOffice.

To configure the export functionality correctly, follow these guidelines:

  • The exported file is by default formatted using the iso-8859-1 encoding, which is the standard used in Windows environments and which works correctly with Microsoft Excel. In case any odd characters appear in the spreadsheet after importing a file, such as accented letters, then probably the iso-8859-1 encoding is not the best for your environment. This is probably because you are not using the Windows operating system or you are using a different spreadsheet. In case you are encountering this problem, look into the next section to find out how you can change this.
  • Openbravo has a decimal separator character, used to format numbers with decimals in the application. The Export to Spreadsheet functionality uses this character when exporting the file. This character is very important in some spreadsheets because it's used when importing a CSV file to detect whether a field should be treated as a number or not. In case a wrong decimal separator is chosen, numbers will be imported into the spreadsheet appliction as strings and problems will occur when trying to do mathematical operations on them. If you encounter this problem, you should check that your decimal separator is correctly configured in your Openbravo environment. Here you can find more information on how to configure the Format.xml file. If you are still interested in configuring the decimal separator of the exported files differently from the one used in the application, then check the next section to find out how to do it.
  • The file uses a specific character (which is the comma by default) to separate each field. This works flawlessly in general but in some spreadsheet applications it might be necessary to use a different one. Check the next section if you want to find out how to do it.

Configuring export parameters in your Openbravo environment

You can change the decimal separator, the field separator, and the encoding of the file you get when you use the Export to Spreadsheet functionality in Openbravo if you need them to be different from the default values.

This is done via preferences. After logging in to Openbravo, go to the Preference window and do the following:

  • If you want to change the decimal separator: create a new record. Select the "CSV Decimal Separator" in the "Property" field. In the "value" field, type your selected decimal separator (for example, the comma character (,), or the decimal point (.)). Save the record.
  • If you want to change the field separator: create a new record. Select the "CSV Field Separator" in the "Property" field. In the "value" field, type your selected field separator. Save the record.
  • If you want to change the file encoding: create a new record. Select the "CSV Text Encoding" field in the "Property" field. In the "value" field, type the selected file encoding (for example, UTF-8 should work in most non-Windows non-Excel environments). Save the record.

After creating the preference (or preferences), log out of the application. Log in again, and try the Export to Spreadsheet functionality, to see the results.

Workspace & Widgets

View larger

The first tab contains the Openbravo Workspace, a customized portal-style home page. This tab cannot be closed as its contents are essential.

Widgets are customizable and the available set will be dependent on role and instance activation status.

To add widgets, simply click the Add Widget>> link in the left column in the workspace and select from the library.

Administrate widgets for other clients or roles

View larger

With the appropriate administrative rights, you can pick widgets for others users or clients in your organization. Via the Admin Others >> link on the left hand side of the workspace you can choose for which entity you want to define a widget set.

On the subsequent page you can then add widgets to this user´s / client´s workspace. Once done, click the Publish button to broadcast the selected widgets to the user(s) in the chosen entity. The next time they log in, they will find the newly added widgets on their workspace.

Toolbar

The Toolbar contains two types of buttons: Action buttons (green) and Process buttons (orange). Actions are generic and can be applied to almost all selected records. Processes are record specific and depend on the record status and the active level (header or lines or lower).

WIK Toolbar.png

The action buttons perform the following actions:

WIK button NewForm.pngNew FormCreate a new record in form view
WIK button InsertRow.pngInsert RowInsert a new row in grid view
WIK button Save.pngSaveSave the record
WIK button SaveClose.pngSave and CloseSave the record, close the form view and go back to the grid view
WIK button SaveCloseX.pngCloseClose the record in form view and go back to the grid view
WIK button Cancel.pngCancelRefresh the window and revert changes
WIK button Delete.pngDeleteDelete the selected record(s)
WIK button Refresh.pngRefreshRefresh the window
WIK button Export.pngExportExport the grid to CSV format
WIK button Clone.pngCloneClone the selected record(s) - (Only for Sales Orders)
WIK button Print.pngPrintPrint the selected record(s)
WIK button Email.pngEmailEmail the selected record(s)
WIK button Attach.pngAttach a FileAttach a file to the active record
WIK button AttachOn.pngFile(s) attachedAttach a file. Status: file(s) attached.
WIK button Tree.pngTreeRearrange account tree element value
WIK button URL.pngCreate linkCreate a URL to the selected document that can be pasted into email or IM
WIK button Audit.pngAudit TrailEnable audit trail for this window (Basic and Professional Edition only)
WIK button PersonalizeForm.pngPersonalize Form LayoutPersonalize the form layout (Basic and Professional Edition only)
WIK button SaveView.pngSave ViewSave and retrieve views (Basic and Professional Edition only)
WIK button Dunning.pngDunningApply dunning workflow (Commercial Extension Module)

Statusbar

WIK Statusbar.png

The statusbar conveys the editing status of the document (New, Editing or Saved) together with a user-defined set of read-only attributes. These allow the user to get an overview of the document without having to scan the remainder of the form. The statusbar is only visible in form view. On the right side of the statusbar the following buttons are available:

WIK button Next.pngBrowse to next record
WIK button Previous.pngBrowse to previous record
WIK button Max.pngMaximize form
WIK button Restore.pngRestore form to previous size
WIK button Close.pngClose form (save and return to grid)

User Messages

User Messages are displayed centrally and their function is to inform or warn the user about some occurring situation in the application. There are four different types of user messages.

WIK message Error.pngError Message
WIK message Success.pngSuccess Message
WIK message Info.pngInfo Message
WIK message Warning.pngWarning Message
WIK message Tip.pngTip Message

The messages can be hidden by clicking the little X icon in the top right of the message.

Sections

View larger

Forms contain sections that group assets such as linked items, notes, attachments and groups of related fields. Sections can be expanded and collapsed by clicking on their header or the twisti (triangle shaped icon).

More Info

In this section the less frequently used fields are placed so they won´t bother you in the main part of the form.

Audit

In this section the fields related to audit are placed. Just as for the More Info section, the reason they were tucked away here is to reduce the visual clutter in the main part of the form.

Notes

View larger

In this section you can add notes related to the document. These could be notes to self or to colleagues. The bar on the left hand side is colored gray for your own notes and green for notes added by someone else. This way you can identify in one glimpse which notes aren't yours.

Linked Items

View larger

In this section all related documents to the active document are shown. The left column contains the window types with the amount of related documents shown in brackets. By selecting one of the window types to the left, the actual documents appear in the right column. The links are clickable and will launch the document on a new tab.

Attachments

In this section the attachments to a record are stored.

Keyboard Shortcuts

Type Shortcut Action

Keyboard shortcuts for Openbravo 3 can be found in this GoogleDoc

This list is just a starting point. As it is virtually impossible to find the ideal set of keyboard shortcuts for all platforms and languages it is recommended to modify and create your own. You can do this in the General Setup || Application || Preference window. In the grid, use the column filter for the Properties column to find the Keyboard shortcut records.

Instruction videos & demo

You can find instruction videos and an online demo environment at the following link: Videos & demo. For a short introduction, watch: Openbravo 3 in 2 minutes.


Back button.png   Back to User Guide

Retrieved from "http://wiki.openbravo.com/wiki/User_Interface_Introduction"

This page has been accessed 17,394 times. This page was last modified on 3 April 2012, at 14:22. Content is available under Creative Commons Attribution-ShareAlike 2.5 Spain License.