Rail latéral et navigation inférieure

Workspace v2 rend un menu d’actions pour les groupes d’espaces de travail qui ont des fenêtres avec icônes. Sur ordinateur, ce menu apparaît comme un rail latéral. Sur tablette et téléphone, il apparaît comme un menu d’actions inférieur.

Pour ajouter un bouton, enregistrez une entrée workspaceWindows2 avec une icon. O3 enregistre automatiquement ce composant d’icône comme extension dans l’emplacement nommé d’après le groupe d’espaces de travail. L’ID de l’extension correspond au nom de la fenêtre, ce qui permet à ActionMenuButton2 de savoir quelle fenêtre il contrôle.


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

Exportez ensuite le composant d’icône dans 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,
);

Le composant de bouton d’action doit rendre 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}
    />
  );
}

Comportement

ActionMenuButton2 est lié à la fenêtre dont le nom correspond à l’ID de l’extension. Au clic, il :

Lance l’espace de travail configuré si la fenêtre n’est pas ouverte.
Restaure la fenêtre si elle est ouverte mais masquée ou derrière une autre fenêtre.
Masque la fenêtre si elle est actuellement au premier plan.

Si un espace de travail dans la fenêtre contient des changements non enregistrés, le bouton affiche un badge d’interruption.

Rail latéral et navigation inférieure

Ajouter un nouveau bouton de menu d’actions

Comportement