Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Parts of these guidelines were originally developed for both administrative and clinical solutions.

Therefore they are very general in nature generic and can be found here: General guidelines.

...

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.

...

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

Specific design choices have in general been made due to components used through Angular Material libraries.

If an application does not use Angular material it should at least adhere to the following guidelines, in order to be considered within specifications.

Layout & navigation

  1. Left menu toggle

  2. Global navigation

  3. User information og login/out

  4. Left menu

  5. Main content area / Card

  6. Contextual action

  7. Breadcrumb Navigation

...

Image Added

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

Most parts are of type or derived from the following

  • Navigable Data tables

  • Forms w./ formfields

  • Buttons

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

  • UI components: HTML + CSS. This could be a button, a radio-button or an input-field or anything else consisting of just HTML and CSS.

  • Functional components: HTML + CSS + JS. This could be an accordion, a carousel or a modal.

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

Specific in Common Workplace is the Plan editor and Questionnaire editor, which includes a fully featured drag & drop implementation.

This is a custom solution and the feature is not part of the Angular material spec.

togglable left menu

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

...

  • General icons for confirm, copy, delete, search

  • navigation: Home, back arrows.

...

Content and layout

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

Most parts are of type or derived from the following

  • Navigable Data tables

  • Forms w./ formfields

  • Buttons

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

  • UI components: HTML + CSS. This could be a button, a radio-button or an input-field or anything else consisting of just HTML and CSS.

  • Functional components: HTML + CSS + JS. This could be an accordion, a carousel or a modal.

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

Specific in Common Workplace is the Plan editor and Questionnaire editor, which includes a fully featured drag & drop implementation.

...

Smaller Screens And Responsiveness

The https://material.angular.io/ spec fully supports responsive layout. And most components are laid out in a flexible gridmodel.

...

Until further notice there will be no support for mobile or smaller screens.

...