Page Comparison

Kam-pickers consist of a number of generic pickers which can be used by other micro frontends when loaded into the shell application “Fælles arbejdsplads”.

Indholdsfortegnelse

...

makes it possible for other solutions to reuse the already implemented pickers. See Description Of Pickers

Indholdsfortegnelse

Using kam-pickers in other applications than Common Workplace

The pickers is implemented as Web Components which makes it possible to use the generic pickers in other web applications using the Angular framework.

It has been tested under the following conditions:

• Angular version 12.2.16

• Angular Material 12.2.13

  • With the css class mat-typography added on the body tag in index.html

• angular-architects/module-federation 12.5.3

• angular-architects/module-federation-tools 12.5.3

Theming

If the theming for the pickers should be the same as for the Common Workplace. The below is the theme from Common Workplace:

@use '~@angular/material' as mat;

$kam-primary-palette: (
  50: #e4e8eb,
  100: #bbc5cd,
  200: #8e9eab,
  300: #617789,
  400: #285175,
  500: #1d3c57,
  600: #1a364f,
  700: #162c40,
  800: #11273c,
  900: #132638,
  A100: #ffffff,
  A200: #ffffff,
  A400: #ffffff,
  A700: #e8eaff,
  contrast: (
    50: #1a1a1a,
    100: #1a1a1a,
    200: #1a1a1a,
    300: #ffffff,
    400: #ffffff,
    500: #ffffff,
    600: #ffffff,
    700: #ffffff,
    800: #ffffff,
    900: #ffffff,
    A100: #1a1a1a,
    A200: #ffffff,
    A400: #ffffff,
    A700: #ffffff,
  ),
);

$kam-accent-palette: (
  50: #f2fef3,
  100: #e0fee0,
  200: #cbfdcb,
  300: #b6fcb6,
  400: #a6fba7,
  500: #96fa97,
  600: #8ef98f,
  700: #83f984,
  800: #79f87a,
  900: #68f669,
  A100: #ffffff,
  A200: #ffffff,
  A400: #ffffff,
  A700: #e8ffe8,
  contrast: (
    50: #1a1a1a,
    100: #1a1a1a,
    200: #1a1a1a,
    300: #1a1a1a,
    400: #1a1a1a,
    500: #1a1a1a,
    600: #1a1a1a,
    700: #1a1a1a,
    800: #1a1a1a,
    900: #1a1a1a,
    A100: #1a1a1a,
    A200: #1a1a1a,
    A400: #1a1a1a,
    A700: #1a1a1a,
  ),
);

$kam-typography: mat.define-typography-config(
  $title: mat.define-typography-level(20px, 20px, 400),
  $headline: mat.define-typography-level(24px, 24px, 400),
  $display-4: mat.define-typography-level(34px, 34px, 400),
  $display-3: mat.define-typography-level(48px, 48px, 400),
  $display-2: mat.define-typography-level(60px, 60px, 200),
  $display-1: mat.define-typography-level(96px, 96px, 200),
);

$kam-primary: mat.define-palette($kam-primary-palette);
$kam-accent: mat.define-palette($kam-accent-palette);

$kam-theme: mat.define-light-theme(
  (
    color: (
      primary: $kam-primary,
      accent: $kam-accent,
    ),
  )
);

@include mat.core($kam-typography);

@include mat.core-theme($kam-theme);

@include mat.all-component-themes($kam-theme);

Import kam-pickers

Kam-pickers is implemented as a WebComponent and can be imported by the use of WebPack and Module federation.

...

...
  webcomponent$ = from(
    loadRemoteModule({
      remoteEntry: 'http://localhost:4001/remoteEntry.js',
      exposedModule: './WebComponent',
      remoteName: 'kamPickers',
    })
  );
 ...
}

Anchor
DescriptionOfPickers DescriptionOfPickers

Description of Kam-pickers

Below is a technical guide for each of the pickers implemented by Kam-pickers.

...

The organization picker can be used to select organizations from STS-ORG or SORor SOR.

The organization picker also handles user-favourite organizations, which are stored in a Key-Value Store. That makes them available to users, even when using other devices or browsers than usual.

To open the organization picker, sent a custom event with name “openOrganizationPicker”.

...

window.dispatchEvent(
      new CustomEvent('openTimingPicker', {
        detail: {
          timingPickerData: {
            callerId: 'timingField',
            timing: timingObject,
            includeAsExtra: true,
          },
        },
      })
    );

Input data: 

interface TimingPickerData {
  callerId: string;
  timing: Timing;
  includeAsExtra: boolean;
}

Explanation:

• callerId: an unique id that will be returned with the output result. CallerId makes it possible for the caller to distingues which form field the pickers was opened as the same picker can be used multiple timestiming: fhir timing object. the pickers was opened as the same picker can be used multiple times

• timing: fhir timing object.

• includeAsExtra: a boolean value determining whether the activity (or group of activities) should be offered as additional activities that can be performed outside the specified timing

Output data:

interface TimingPickerData {
  callerId: string;
  timing: Timing;
  includeAsExtra: boolean;
}

Explanation:

• callerId: an unique id that will be returned with the output result. CallerId makes it possible for the caller to distingues which form field the pickers was opened as the same picker can be used multiple times

• timing: fhir timing object

• includeAsExtra: a boolean value determining whether the activity (or group of activities) should be offered as additional activities that can be performed outside the specified timing

Reference range picker

The reference range picker can be used to setup thresholds for measurement. To open the reference range picker, sent a custom event with name “openReferenceRangePicker”.

...