Kam-pickers consist of a number of several generic pickers which makes it possible for other solutions to reuse the already implemented pickers. See Description Of PickersIndholdsfortegnelse

Content

Using kam-pickers in applications other

...

than the Common Workplace

The pickers is are 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 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

...

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

...

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

Example of import

There is are several ways to import kam-pickers. The first approach it to add a remote entry in the ModuleFederationPlugin in in iswebpack.config.js. For demonstration purposes, the kam-pickers project is running on httpon http://localhost:4001.

const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
 
...
 
module.exports = {
  ...,
  plugins: [
    new ModuleFederationPlugin({
      name: 'kamUi',
      remotes: {
        kamPickers: 'kamPickers@http://localhost:4001/remoteEntry.js',
      },
      shared: share({
        '@angular/core': { singleton: true, strictVersion: true, eager: true, requiredVersion: 'auto' },
        '@angular/common': { singleton: true, strictVersion: true, eager: true, requiredVersion: 'auto' },
        '@angular/common/http': { singleton: true, strictVersion: true, eager: true, requiredVersion: 'auto' },
        '@angular/router': { singleton: true, strictVersion: true, eager: true, requiredVersion: 'auto' },
      }),
    }),
  ],
};

If you are using TypeScript in your host application, you have to make sure you have the following compiler options specified in tsconfig.json. To enable dynamic module loading.

{
...,
"compilerOptions": {
  ...,
  "moduleResolution": "node",
  "target": "es2017",
  "module": "es2020"
  },
  ...
}

Additionally, you have to declare a module to "trick" TypeScript into thinking the module exists. You do this by adding a kamPickers.d.ts file in the root of the project with the following content.

...

The above code snippets also showcases showcase how inputs which interacts with the web component are disabled while the web component loads. The tag <kam-pickers> is a custom tag for the WebComponent Web component and needs to be added before it is possible to trigger the pickers by custom events.

Dynamic import

When using Angular as frontend a front-end framework, a library called @angular-architects/module-federation and @angular-architects/module-federation-tools can be used instead of doing the ModuleFederation setup yourself. By using angular-architects solution, it is possible to load the module in code without specifying the remote in webpack.config.js. As shown below it is possible to call loadRemoteModule() instead.

...

To open the valueSet picker, sent send a custom event with name “openValueSetPicker”.

...

interface ValueSetPickerData {
  callerId: string;
  readonlyMode: boolean;
  multiSelect: boolean;
  language: string;
  designationUseCode: string;
  valueSetType: ValueSetType;
  selectedValues: CodeableConcept[];
}
 
enum ValueSetType {
  ObservationCodes = 'ObservationCodes',
  Conditions = 'Conditions',
}

Explanation:

• callerId: an a 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 were opened as the same picker can be used multiple timestimesdistinguish

• readonlyMode: true for readonly mode

• multiSelect: true if it should be possible to select more than one

• language: language code. eg. , "da" for danishDanish

• designationUseCode: display text targeting specific audience

  • valuesValues:

    • "consumer"

      • description: Designation for use in display to non-clinicians and those not in healthcare professions as a more friendly term for coommunicationcommunication.

• valueSetType:

  • values:

    • "ObservationCodes"

    • "Conditions"

    • “MediaCodes”

    • “BodySite”

    • “Program” - With Release FUT-I 2025.1

• selectedValues: Which CodeSystem should be preselected when the valueSet picker is opened.

  • Supported CodeableConcept:

    • Only one coding per CodeableConcept

...

interface ValueSetPickerDialogResult {
  callerId: string;
  codeableConcepts: CodeableConcept[];
}

Explanation:

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

• codeableConcepts: List of all the selected codes.

  • Always only one code per CodeableConcept

...

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

...

interface OrganizationPickerData {
  callerId: string;
  onlyAllowRootSelection: boolean;
  selectedIds: string[];
}

Explanation:

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

• onlyAllowRootSelection: If true, only organization on top level i is selectable. At the moment, the top level is : Regions and municipalities. Be aware that the top level for a municipality is the first organization from the top of type “OrganisationsEnhed” (system: http://ehealth.sundhed.dk/cs/oio-organization-type, code: OrganisationEnhed

• selectedIds: Which organization should be preselected when the organization picker is opened.?

Output data:

interface OrganizationPickerDialogResult {
  callerId: string;
  selected: Organization[];
}
 
interface Organization {
  id: string;
  name: string;
  source: Source | null;
  alias: string[];
  parentReferenceId: string | null;
  cvrNumber: string | null;
  referenceUrl: string;
}

...

• OrganizationPickerDialogResult

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

  • selected: List of all the selected organizations

• Organization

  • id: organization id

  • name: organization name

  • source: Possible values: 'SOR', 'STS-ORG', 'manual'

  • alias: A hierarchy from the root organization down to the specific organization

  • parentReferenceId: id ID of the parent organization

  • cvrNumber: cvr number

  • referenceUrl: URL to the specific organization

...

The questionnaire picker can be used to select a questionnaire. To open the questionnaire picker, sent send a custom event with the name “openQuestionnairePicker”.

...

interface QuestionnairePickerData {
    callerId: string;  
    selectedIds: string[];
    multiSelect: boolean;
}

Explanation:

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

• selectedIds: Which organization should be preselected when the organization picker is opened.?

• multiSelect: true if it must be possible to select more than one questionnaire

...

interface QuestionnairePickerDialogResult {
  callerId: string;
  selected: Questionnaire[];
}

Explanation:

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

• selected: List of all the selected questionnairequestionnaires

Timing picker

The timing picker can be used to setup set up timing expressions. To open the timing picker, sent send a custom event with the name “openTimingPicker”.

Example:

...

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

Explanation:

• callerId: an a unique id that will be returned with the output result. CallerId makes it possible for the caller to distingues distinguish which form field the pickers was were 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

...

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

Explanation:

• callerId: an a unique id that will be returned with the output result. CallerId makes it possible for the caller to distingues distinguish which form field the pickers was were 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

...

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

...

interface ReferenceRangePickerData {
  callerId: string;
  readonlyMode: boolean;
  measurementType: CodeableConcept;
  referenceRangeData: Extension[] | undefined;
}

Explanation:

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

• readonlyMode: true for readonly mode.

• measurementType: ValueSet: observation codes

  • Supported CodeableConcept:

    • Only one coding per CodeableConcept

• referenceRangeData: Extensions of type reference range

...

export interface ReferenceRangePickerDialogResult {
  callerId: string;
  referenceRangeData: Extension[];
}

Explanation:

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

• referenceRangeData: Extensions of type reference range