Main View Structure

The Admin UI is divided up into four main sections.

1
Header Bar

The header bar contains the logo, link to help and playback, user profile and language options.

2
Navigation Bar

The action bar is made up of navigational elements such as the navigation tabs, main menu and/or action buttons.

3
Main View

This is the main "work" area of the page where the content is loaded; replacing the existing elements depending on the menu item that is selected.

4
Footer

The footer holds the version information.


Table View Structure

The table view structure is used to display the majority of the information of the system and is used as entry point to the display of information in a modal or more intricate displays.

1
Header Bar

The header of the table view contains a section that shows the current table heading (with a sub-heading) and a section to filter and/or search the table.

To filter the table click on the add filter icon and select the column and value to filter the table on. Multiple filters can be selected at any one time.

Filters and search values can be saved and given a custom name and description for future use.

2
Header Bar

As with any other HTML table the structure is divided into a header and a body. The header consists of columns, that are sortable, and a link to edit the columns and their order.

The table body contains the information of an item in a row and the action buttons that allows a user to interact with that item.

3
Header Bar

The table footer contains a page selector and a dropdown to change the number of rows that are shown.