Siderail and Bottom Nav

Workspace v2 renders an action menu for workspace groups that have windows with icons. On desktop this appears as a side rail. On tablet and phone layouts it appears as a bottom action menu.

To add a button, register a workspaceWindows2 entry with an icon. O3 automatically registers that icon component as an extension in the slot named after the workspace group. The extension ID matches the window name, which is how ActionMenuButton2 knows which window it controls.


{
  "workspaces2": [
    {
      "name": "gastrodynamics-form-workspace",
      "component": "gastrodynamicsWorkspace",
      "window": "gastrodynamics"
    }
  ],
  "workspaceWindows2": [
    {
      "name": "gastrodynamics",
      "group": "patient-chart",
      "icon": "gastrodynamicsActionButton",
      "order": 4,
      "width": "narrow",
      "canMaximize": true
    }
  ]
}

Then export the icon component in index.ts:


import { getAsyncLifecycle } from '@openmrs/esm-framework';
 
const moduleName = '@myorg/esm-gastrodynamics-app';
 
const options = {
  featureName: 'gastrodynamics',
  moduleName,
};
 
export const gastrodynamicsActionButton = getAsyncLifecycle(
  () => import('./gastrodynamics-action-button.extension'),
  options,
);

The action button component should render ActionMenuButton2.


import React, { type ComponentProps } from 'react';
import { useTranslation } from 'react-i18next';
import { ActionMenuButton2, AddIcon } from '@openmrs/esm-framework';
import { type PatientChartWorkspaceActionButtonProps, useStartVisitIfNeeded } from '@openmrs/esm-patient-common-lib';
 
export default function GastrodynamicsActionButton({
  groupProps: { patientUuid },
}: PatientChartWorkspaceActionButtonProps) {
  const { t } = useTranslation();
  const startVisitIfNeeded = useStartVisitIfNeeded(patientUuid);
 
  return (
    <ActionMenuButton2
      icon={(props: ComponentProps<typeof AddIcon>) => <AddIcon {...props} />}
      label={t('gastrodynamics', 'Gastrodynamics')}
      workspaceToLaunch={{
        workspaceName: 'gastrodynamics-form-workspace',
        workspaceProps: { patientUuid },
      }}
      onBeforeWorkspaceLaunch={startVisitIfNeeded}
    />
  );
}

Behavior

ActionMenuButton2 is tied to the window whose name matches the extension ID. When clicked, it:

Launches the configured workspace if the window is not open.
Restores the window if it is open but hidden or behind another window.
Hides the window if it is currently focused.

If any workspace in the window has unsaved changes, the button displays an interruption badge.

Siderail and Bottom Nav

Adding a New Action Menu Button

Behavior