Page Comparison

...

You can find some more background in the general guidelines.

Above all, the UI’s main goal is to support ease of use in self-service solutions.

The design adheres to general design guidelines, which are derived from Google https://material.io/

Implementation has been, in part, executed through https://material.angular.io/ component libraries that support Material design guidelines.

Specific This also means that specific design choices have in general, have been made due to components used through Angular Material libraries. If an application does not use Angular material it on the premise of these components.

Info
In order to be considered within specifications the applications should at least loosely adhere to

the following guidelines, in order to be considered within specifications

these guidelines, or the general Material design guidelines.

The following is a general description of the different components used in the Common Workplace UI

Common Workplace UI shell

Describes menu structure and navigation within the Common Workplace UI shell application.

Left menu toggle
Global navigation
User information og login/out
Left menu
Main content area / Card
Contextual action
Breadcrumb Navigation

Image RemovedImage Added

General layout considerations are based on what type of content is to be displayed and edited i in Common Workplace UI.

Most parts are of a type, or derived from the following:

Navigable Data tables
Forms w./ formfields Buttons

Most of these components are implemented through https://material.angular.io/

...

Most components are used “out of the box“. But there are exceptions.

Specific in Common Workplace is to the Plan editor and Questionnaire editor, which includes a fully featured drag & drop implementation.This is a custom solution and the feature there is a custom drag and drop solution that is not part of the Angular material speccomponent library.

Everything under Spørgeskema (Questionnaire) menu item is NOT Angular Material, and does not use any of these components.

togglable left menu

The left menu can be displayed in to two different states. Unfolded and folded, making it possible for the user to take a reclaime a little bit more horizontal space.

Display all / unfolded
Clicking the “3 strip“ icon hides labels, displaying more horizontal space.
Minimal display / folded
Clicking the “3 stripe“ menu ikon shows displays icons as well as labels

...

In general the individual items (Micro frontends) in the left menu should be considered a

Status

colour	Green
title	Home

funktion.

Meaning This means that if the user clicks on the menu item they are returned to the starting state of the particular micro frontend. application.

Table design

Tables are used for displaying large sets of data that can be searched or browsed through. Specifically in the Common Workplace UI, they are used for displaying Care teams, Plans and Questionnaires.

The tables are generally displayed as follows.

Title
Contextual menu
If more than one functions are available the an overflow menu can be utilised.
Search & Filter options
Depending on content type, the filter options can vary.
Paging & navigation
Accordion Content
The rows are by default collapsed, but can be opened individually via the chevron icon on the left side.
This preview funktion is optional and should only be utilised if there is a need for it.

...

Card design

Cards are used for general input and editing of content.
Different content dictates different functionality, but cards generally follow these rules:

Card title
Description of content (optional)
Overflow menu
Form fields & controls

The overflow menu is for extra functionality that is not part of the primary flow of the form. These are typically functions that somehow are supportive of the main flow e.g. (New…, delete, copy).

Dependant on priority the functions can be displayed to the left of the 3 dots, or hidden under the overflow, which are displayed on click.

Image Added