Ajout de liens au panneau de gauche de la page d’accueil

Ce guide vous explique comment ajouter un lien au panneau de gauche sur la page d’accueil de O3. Le panneau gauche de la page d’accueil d’O3 contient des liens vers diverses apps. Cliquer sur un lien mène généralement à l’écran d’accueil de l’app.

Exemple: Ajout d’un lien pour l’application Listes de patients

Ce guide vous explique comment ajouter un lien vers l’application Patient Lists , un module frontend du monorepo O3 Patient Management. L’application Patient Lists permet de créer et de gérer des listes de patients. Son écran d’accueil affiche les listes enregistrées et un workspace de création. Cliquer sur une liste ouvre son écran de détails.

Vous trouverez ci-dessous une capture d’écran de l’écran d’accueil de l’application Listes de patients:

Screenshot of the Patient Lists app landing screen

Pour ce faire, nous devons suivre les étapes suivantes:

Étape 1: Configurer le routage pour l’application Listes de patients

Nous allons commencer par nous assurer que l’application Patient Lists est correctement configurée pour gérer le routage. Son composant Root doit ressembler à ceci:

src/root.component.tsx


import React, { useEffect, useRef } from "react";
import { BrowserRouter, Route, Routes, useSearchParams } from "react-router-dom";
import { WorkspaceContainer, launchWorkspace2 } from "@openmrs/esm-framework";
import ListDetails from "./list-details/list-details.component";
import ListsDashboard from "./lists-dashboard/lists-dashboard.component";
 
function AutoLaunchPatientListWorkspace() {
  const [searchParams, setSearchParams] = useSearchParams();
  const hasOpenedRef = useRef(false);
 
  useEffect(() => {
    const shouldOpenCreate = searchParams.has("create") || searchParams.has("new_cohort");
    if (shouldOpenCreate && !hasOpenedRef.current) {
      hasOpenedRef.current = true;
      const rafId = requestAnimationFrame(() => {
        launchWorkspace2("patient-list-form-workspace");
        setSearchParams({}, { replace: true });
      });
      return () => cancelAnimationFrame(rafId);
    }
  }, [searchParams, setSearchParams]);
 
  return null;
}
 
function RootComponent() {
  const basename = window.getOpenmrsSpaBase() + "home/patient-lists";
 
  return (
    <BrowserRouter basename={basename}>
      <AutoLaunchPatientListWorkspace />
      <Routes>
        <Route path="/" element={<ListsDashboard />} />
        <Route path="/:patientListUuid" element={<ListDetails />} />
      </Routes>
      <WorkspaceContainer contextKey="patient-lists" />
    </BrowserRouter>
  );
}
 
export default RootComponent;

Cette configuration BrowserRouter permet à O3 de rendre l’écran d’accueil de Patient Lists à home/patient-lists et l’écran de détails à home/patient-lists/:patientListUuid. Le conteneur de workspace garde les workspaces de Patient Lists dans le contexte de cette page. Le helper optionnel AutoLaunchPatientListWorkspace conserve la compatibilité avec les liens qui ouvrent le workspace de création via des paramètres de requête.

Etape 2: Ajouter un lien `Listes de patients` au panneau de gauche

Nous allons commencer par créer un fichier de métadonnées de tableau de bord et une fonction d’aide pour créer le lien du tableau de bord. Tout d’abord, créez un fichier dashboard.meta.ts:

src/dashboard.meta.ts


export const dashboardMeta = {
  path: 'patient-lists',
  slot: 'patient-lists-dashboard-slot',
  title: 'patientLists',
  basePath: `${window.spaBase}/home`,
} as const;

Ensuite, créez un fichier createDashboardLink.tsx:

src/createDashboardLink.tsx


import React from 'react';
import { BrowserRouter } from 'react-router-dom';
import { DashboardExtension, type DashboardExtensionProps, type IconId } from '@openmrs/esm-framework';
 
export const createDashboardLink = (config: Omit<DashboardExtensionProps, 'icon'> & { icon?: IconId }) => () => (
  <BrowserRouter>
    <DashboardExtension path={config.path} title={config.title} basePath={config.basePath} icon={config.icon} />
  </BrowserRouter>
);

ℹ️

Note: La propriété icon est optionnelle. Si elle est fournie, elle doit être un nom d’icône Carbon valide (par exemple, "Calendar", "User", "List"). L’icône sera affichée à côté du texte du lien dans le panneau de gauche.

DashboardExtension traduit la valeur title avec useTranslation(). Conservez un commentaire t() correspondant près de l’export de lifecycle afin que l’extraction des traductions trouve le texte d’affichage.

Maintenant, ajoutez une exportation nommée au fichier index.ts de l’application Listes de patients:

src/index.ts


import { defineConfigSchema, getAsyncLifecycle, getSyncLifecycle } from "@openmrs/esm-framework";
import { configSchema } from "./config-schema";
import { createDashboardLink } from "./createDashboardLink";
import { dashboardMeta } from "./dashboard.meta";
import { setupOffline } from "./offline";
 
const moduleName = '@openmrs/esm-patient-list-management-app';
 
const options = {
  featureName: 'patient list',
  moduleName,
};
 
export const importTranslation = require.context("../translations", false, /.json$/, "lazy");
 
export function startupApp() {
  setupOffline();
  defineConfigSchema(moduleName, configSchema);
}
 
export const root = getAsyncLifecycle(() => import('./root.component'), options);
 
// t('patientLists', 'Patient lists')
export const patientListDashboardLink = getSyncLifecycle(createDashboardLink(dashboardMeta), options);

ℹ️

Le composant root utilise généralement getAsyncLifecycle pour le code splitting. Le lien du tableau de bord utilise getSyncLifecycle car il est léger et doit être disponible dès que le panneau gauche de la page d’accueil est rendu.

Etape 3: Connecter l’extension du lien `Patient lists` au panneau de gauche de la page d’accueil

Ensuite, nous devons connecter l’extension du lien Patient lists au panneau de gauche. Pour ce faire, nous devons ajouter la définition d’extension suivante au fichier routes.json de l’application Patient Lists:


{
  "$schema": "https://json.openmrs.org/routes.schema.json",
  "backendDependencies": {
    "webservices.rest": ">=2.2.0"
  },
  "extensions": [
    {
      "name": "patient-lists-dashboard-link",
      "component": "patientListDashboardLink",
      "slot": "homepage-dashboard-slot",
      "meta": {
        "name": "patient-lists",
        "slot": "patient-lists-dashboard-slot",
        "title": "Patient lists"
      }
    },
    {
      "name": "patient-lists-dashboard",
      "component": "root",
      "slot": "patient-lists-dashboard-slot"
    },
    {
      "name": "list-details-table",
      "component": "listDetailsTable"
    },
    {
      "name": "add-patient-to-patient-list-button",
      "component": "addPatientToPatientListMenuItem",
      "slot": "patient-actions-slot"
    }
    // ...
  ]
}

Quelques points à noter:

La propriété component est fixée à patientListDashboardLink, qui est l’export nommé que nous avons défini dans l’étape précédente.
La propriété name est fixée à patient-lists-dashboard-link, qui est le nom de l’extension.
La propriété slot est fixée à homepage-dashboard-slot, qui est le nom du slot auquel nous voulons ajouter l’extension. Ce slot est l’endroit où les liens affichés sur le panneau de gauche de la page d’accueil O3 sont rendus.
La propriété meta contient la configuration du tableau de bord que le shell peut inspecter:
- La propriété name est fixée à patient-lists, qui est le segment de chemin utilisé dans l’URL.
- La propriété slot est fixée à patient-lists-dashboard-slot, qui est le nom du slot où le contenu du tableau de bord de l’application Listes de patients sera rendu.
- La propriété title est fixée à Patient lists, comme métadonnée lisible du tableau de bord. Le texte du lien rendu vient de la valeur title transmise à DashboardExtension dans dashboardMeta.

La deuxième définition d’extension enregistre le composant root pour qu’il soit rendu dans le patient-lists-dashboard-slot lorsque l’application Listes de patients est active.

Étape 4: Profit!

Voilà, c’est fait! Vous devriez maintenant voir un lien “Listes de patients” sur le panneau gauche de la page d’accueil d’O3. En cliquant sur ce lien, vous serez dirigé vers l’écran d’atterrissage de l’application Listes de patients.