Skip to main content

🎨 User Interface Conventions

Before we talk about the different sections, let’s discuss some conventions about the user interface.

1. Dark mode​

If you find the default theme too bright you can enable the dark mode by clicking on the moon/sun icon located at the top of the screen

Dark mode

2. Tables​

Most of the information in OpenUEM is displayed on tables with columns and rows.

2.1 Sorting and filtering​

Next to a column’s name you can find two icons.

IconsDescription
Sort icon alphabetically Sort icon by dateIt allows you to sort the rows alphabetically or by date. You can click on it to change sort order (ascending, descending)
Filter icon Applied filter iconWhen clicked you can select some elements from the menu to filter results. If a filter is applied the icon is shown in red

If a filter is applied you should find a button above the table that allows you to clear all filters.

Clear filters

2.2 Items selection​

Some tables offer the possibility to select several items:

  • You can select item by item by clicking on the checkbox at the beginning of the row.
  • You can select all items on the current page by clicking on the checkbox that is shown in the table’s header. If you click on that icon to uncheck, all the rows in that page will be unchecked.
  • You can select all items on every page by clicking on the Select all button or deselect all items with the Deselect all button. Once you select some items, you’ll see that some buttons are enabled to apply an action on the selection.

Selection example

The number of selected items is updated with every selection and can be found next to the Select All and Deselect All buttons.

Items selected

2.3 Pagination​

Information can be paginated.

You can specify the number of items per page using the dropdown menu

Items per page

You navigate through the pages using the navigation bar. Next to it, you'll find the number of items displayed.

Pagination example

3. Automatic refresh​

Some pages are refreshed automatically where you'll find the following button. You can click on that button to perform a manual refresh.

Automatic refresh

By default, the refresh time is set to 5 minutes. You can change that time in Admin -> General Settings

Automatic refresh settings

Now, let's start with the Agents section.

4. More actions​

If you find three dots in table’s rows, that’s a button that offers more actions to perform on the element enclosed in that row.

Three dots

5. Go back​

You can use the back button of your browser to go back to a previous page or section. OpenUEM is not a Single Page Application and uses HTMX to build an user interface with hypertext.