Web application is main mCom ONE user interface.

Application Layout

Web application design follows best UI design practices in order to deliver seamless and intuitive user experience.

mCom ONE Web Application

Following chapters describes selected common controls used within application which are used on most application pages.

Menu

Application menu is used to swicht between different functionalities. Menu is clickable and (if necessary) provides tooltips on hover. Following images shows different types of menu.

Main menu

Side menu

Project machine menu

Dropdown menu

Dropdown menu

Breadcrumbs

Breadcurms are used to allow better orientation in hierarchical views. Breadcrumbs are clickable and provides tooltips on hover.

Breadcrumbs

Filtering

Filtering is used to reduce items in tables. There are 2 types of filters:

  • Quick filter - available above tables and directly accessible

  • Advanced filter - available after clicking on Advanced filter button near Quick filter

Quick filter

Quick filter is activated by entering (or choosing) a value and clicking on search icon or pressing Enter key. In order to disable quick filter, entered values needs to be cleared manually and clicking on search icon or pressing Enter key.

Quick filter

Advanced filter

Advanced filter is activated by entering (or choosing) correspondent values and pressing Filter button. Pressing Reset button will clear all selected values in advanced filter but will not reload table content. Advanced filter is disabled by closing advanced filter panel (by clicking on the same button by which it was opened).

Advanced filter

Ordering

When applicable, table columns can be ordered ascending or descending by clicking on arrows near table column name.

Table ordering

Pagination

Pagination is used to display table content on multiple pages. By clicking on arrows it display next or previous page of table content. By directly entering a page number and pressing Enter key, table content jumps directly to specified page. Right side of pagination displays number of total records in table (in respect to filtering if applied).

Pagination

Multivalue Selection

Some fields allow multivalue selection from list of predefined values. Values are search by typing and then selecting from found values. Value can be removed by clicking on X near value. Pressing Backspace key removes last added value.

Multivalue selection

Modal Dialogs

Modal dialogs are displayed from right side of screen. If a modal dialog is displayed, the content of application outside of modal dialog cannot be manipulated. They can be closed either by clicking on X or by clicking outside of modal dialog.

Modal dialog

Confirmations

Confirmations are used to ask user for confirmation before executing potentionally dangerous operations. Following are examples of confirmations used in mcOm ONE application.

Button confirmation

Modal dialog confirmation

Drag & Drop Files Upload

Files within application can be uploaded either by selecting then from open dialog or just by draging and dropping them into application.