Modules

A module resides in a page and contains all information of a certain subject that might be visually represented as a multiple tables, graphs or even a forms. It could be part of a microsite/SPA or act as its own placeholder.

Topview/subview

Since a module holds everything about a certain subject it may need to split the information on multiple levels. This leads to a need for the module to keep it’s own navigation for the different views.

A typical setup may include:

  • Overview of all items (i.e. all users accounts). On this level the items in the table is marked with a chevron on each line in the table, indicating that there is a sub-view.
  • Item view displaying every piece of information regarding one item (i.e. one account). This view may include tabs to split different subsets of information. It also holds a link to go back to the overview.
  • Detail or edit is the last point of information (i.e. a transaction detail or edit name). This should be a slide-out modal to keep the user in the same context.

Actions

All functions related to the module, such as print/import/export are found in the page header. Content within the module is responsible to make its own actions accessible within its context. Such actions could be inline search, filtering and affecting a table or graph layout.

Functions

  • It can not be removed from the page it resides
  • Ability to navigate from an item/row within the content of a module to a subpage. Example; account to account details which is usually shown in a slide-in modal.

Please note that the module is not responsible of what columns are shown in a table or how a graph is visually represented. The same applies for search and grouping of items. Those functions should be part of the actual table or graph content.

Differentiating a module from a widget is accomplished by having all the module content in a single card* and not divided into several smaller ones as used by widgets.

*A module is contained in a card when the zone 3 content is docked to the right side instead of being below zone 2. Visit the breakpoint section for more details.