Implementation of Workspaces: Under the hood

Owned by Grace Potma
Jul 20, 2024
2 min read

This is how things work under the hood with the Workspace system. You probably don't need to know about this!

Workspaces are implemented using global store, which can be imported as:

import { getWorkspaceStore } from "@openmrs/esm-patient-common-lib"; // Accessing the state of the workspace storeconst store = getWorkspaceStore();const state = store.getState();

Workspace window's properties

Workspace store has the following properties, defining the workspace window:

  1. patientUuid: string - Current patient's UUID

  2. openWorkspaces: OpenWorkspaces[] - The list of workspaces launched by the user

  3. prompt: Prompt - The prompt to be shown to the user, usually for confirming an action

  4. workspaceWindowState: 'normal' | 'maximized' | 'hidden' - The state of the workspace window

The workspace properties can be accessed by either 2 ways:

  1. Using the getWorkspaceStore function, which returns the workspace store

import { getWorkspaceStore } from '@openmrs/esm-patient-common-lib'; const store = getWorkspaceStore();const state = store.getState(); // To update the state of the workspace store, use the `store.setState` functionstore.setState({ ... })// ORstore.setState((state) => { ... })

  1. For react components, you can access the workspace state from the useWorkspaces hook

import { useWorkspaces } from "@openmrs/esm-patient-common-lib"; const MyComponent = () => { const { workspaces, prompt, workspaceWindowState } = useWorkspaces(); // To update the state of the workspace store, use the `setState` return <div></div>;};

Multiple workspaces can be opened at the same time but only one visible at a time, i.e. the workspace at the top. The workspace window is rendered on the right corner of the patient chart.

To know whether a workspace is active or not: