Overview

Tabs

Located in top pane, Tabs provide direct access to views and functions. A tooltip with description of each tab’s function will be shown when the user hovers the mouseover each tab.

Tab layout is controlled through tab groups. Each tab group has a minimum number for visible tabs. When horizontal space is insufficient to show all the tabs inside a group, the hidden tabs will be collapsed under an expandable menu indicated by a “triangle” icon. Currently, the two tab groups are Vault Navigation and Details and Operations.

Style and layout parameters:
Tab-cell-size: 64px
Background-color (inactive): #b3b3b3
Background-color (active): # e6e6e6
Margin: 4px
Icon size: 32px
Icon-color (Inactive): #ffffff
Icon-color (active): # 999999
Font-size: 11px
Font-color: #555555

Vault Navigation

The Vault Navigation tab group contains tabs to navigate to the vault Home view, and common views such as Recently Accessed by Me, Assigned to Me, and Favorites.

Details and Operations

The Details and Operations tab group contains tabs to view the selected object’s metadata, to preview a selected file, or to search for objects.

Third party tabs created using the User Interface Extensibility Framework are located in the Details and Operations tab group.

Lists

A List is the typical method for displaying a collection of multiple items such as views or objects. Lists are mostly located within the Listing Area.

Style and layout parameters:
Row-height: 27px
Font-color (heading): #808080
Font-size (heading): 14px
Padding-left (heading): 20px:
Font-color (listing): #000000
Font-size (listing): 12px
Padding-left (listing): 8px:
Icon-size: 16px

List grouping header

A List Grouping can be used to organize listed objects, grouping them by object type or a specific metadata property. The grouping appears as a header component with textual title and expanding/collapsing control on right side.

Style and layout parameters:
Background-color: #fafafa
Height: 27px
Font-color: #5a5a5a
Font-size: 13px

Search

Search function in M-Files is hosted by Search bar, and enhanced by Search filters and Advanced search options.

Search bar

Right above the Listing area, a Search Bar with search field, search button and access to Advances search options can be found.

Search filter

Search Filters tab will be activated when search field is focused. User will found options to enhance the search function before or after search is performed.

Advanced search options

Advanced search options will be toggled on or off by clicking on the right most icon of the Search bar.

Dialogs

Example of a common Dialog in M-Files that consists a title, an icon, a dialog message and a button group.

Menus

Here is an example of a context menu activated by right-click on an object which provides corresponding functions.

Context menu items can be added using the User Interface Extensibility Framework.

Metadata card

Metadata Card is dedicated for displaying and editing Metadata for object classification and basic properties of selected object(s). User also can access object related functions from Function Ribbon.

Function Ribbon

By using function buttons on the ribbon, user are able to Follow, Pin, or add an object to their Favorites list. With the M-Files release, we also introduced the Analyze button. Clicking this button will execute any registered Intelligence Services for the document, and show any additional metadata suggestions on the metadata card.

Buttons

Buttons are used to move to the next step, confirm or cancel actions.