Configuration de la marque

Les implémenteurs peuvent configurer divers aspects de l’interface utilisateur pour correspondre à leur marque. Cela inclut:

Changer le logo sur l’écran de connexion
Changer le logo sur la barre de navigation
Changer l’arrière-plan de la page de connexion
Ajouter des annonces sur la page de connexion
Changer les couleurs de la marque
Changer le favicon
Définir le nom de l’implémentation (affiché dans les en-têtes de page)
Définir le titre de la page (titre de l’onglet du navigateur)

Changement des logos

Les logos sont utilisés à plusieurs endroits dans O3:

La page de connexion (logo principal)
Le pied de page de la page de connexion (logos supplémentaires, optionnel)
La barre de navigation (logo de navigation principal)

Le logo par défaut utilisé dans la page de connexion O3 est le sprite SVG OpenMRS. Vous pouvez le remplacer en fournissant une URL src d’image valide comme valeur de la propriété src dans le schéma de configuration du module frontend de connexion. Les formats d’image pris en charge incluent SVG, PNG, JPEG/JPG, GIF, WebP et tout autre format pris en charge par les navigateurs modernes. Si src est vide ou non fourni, le logo OpenMRS par défaut sera affiché. Voici un exemple de à quoi cela pourrait ressembler:


{
  "@openmrs/esm-login-app": {
    "logo": {
      "src": "https://data.kenyahmis.org/openmrs/images/logos/kenyaemr-logo.svg",
      "alt": "Logo KenyaEMR"
    }
  }
}

Dans cet exemple, le logo SVG spécifié à cette URL sera appliqué comme logo par défaut de la page de connexion. Pour persister ce changement, vous devrez valider cette configuration dans la configuration frontend de votre instance. Pour faire cela dans l’application de référence de la distribution, vous devrez:

Étape 1

Ajouter votre ressource à un répertoire dans la distribution. Par exemple, un fichier logo.png peut être ajouté au répertoire frontend/resources.

Étape 2

Ajouter cette ligne au Dockerfile dans le répertoire frontend:


COPY ./resources/logo.png /usr/share/nginx/html

Cela copiera le logo à la racine de l’application.

Étape 3

Ajouter le snippet suivant au fichier config-core_demo.json dans le répertoire frontend:

ℹ️

Notez que les chemins vers vos fichiers de configuration peuvent être différents. Ajustez les chemins pour correspondre à la structure de votre application.


{
  "@openmrs/esm-login-app": {
    "logo": {
      "src": "${openmrsSpaBase}/logo.png",
      "alt": "Logo"
    }
  }
}

Étape 4

Important : Le fichier config-core_demo.json doit être chargé par la SPA. Vous avez deux options :

Option A - Configuration à l’exécution (recommandé, pas de reconstruction nécessaire) : Définissez la variable d’environnement SPA_CONFIG_URLS dans votre docker-compose.yml pour inclure le fichier de configuration :


frontend:
  environment:
    SPA_CONFIG_URLS: /openmrs/spa/config-core_demo.json

Utilisez le chemin public où votre SPA est réellement servie. La valeur par défaut de l’application de référence est /openmrs/spa; si vous définissez un autre SPA_PATH, utilisez ce chemin dans SPA_CONFIG_URLS.

Option B - Configuration au moment de la construction (nécessite une reconstruction) : Ajoutez l’URL du fichier de configuration au tableau configUrls dans spa-build-config.json :


{
  "configUrls": ["${openmrsSpaBase}/config-core_demo.json"]
}

Cela limite le logo à l’application de connexion uniquement.

Logos supplémentaires dans le pied de page de connexion : Vous pouvez également ajouter plusieurs logos au pied de page de la page de connexion en utilisant la configuration footer.additionalLogos :


{
  "@openmrs/esm-login-app": {
    "footer": {
      "additionalLogos": [
        {
          "src": "/openmrs/spa/partner-logo-1.png",
          "alt": "Organisation partenaire"
        },
        {
          "src": "/openmrs/spa/partner-logo-2.png",
          "alt": "Partenaire financier"
        }
      ]
    }
  }
}

Contrairement au logo principal de la page de connexion, les valeurs src des logos de pied de page sont transmises directement au navigateur. Utilisez une URL absolue ou le chemin public où votre SPA est servie, comme /openmrs/spa/... dans la configuration par défaut de l’application de référence.

Le logo par défaut utilisé sur la barre de navigation est configuré ici . Vous pouvez optionnellement utiliser une chaîne de caractères ou un fichier image (SVG, PNG, JPEG/JPG, GIF, WebP, etc.) comme logo de la barre de navigation. Pour remplacer le logo de la barre de navigation, utilisez une configuration similaire au snippet ci-dessous:


{
  "@openmrs/esm-primary-navigation-app": {
    "logo": {
      "src": "https://data.kenyahmis.org/openmrs/images/logos/kenyaemr-logo-nav.svg",
      "alt": "Logo KenyaEMR",
      "link": "${openmrsSpaBase}/home"
    }
  }
}

Si vous voulez afficher du texte au lieu d’une image, omettez src et définissez "name": "KenyaEMR". Si src et name sont tous les deux fournis, src a la priorité.

Pour persister vos changements dans votre distribution, suivez les mêmes étapes que dans la section précédente (Étapes 1-4) avec le snippet de fichier de configuration suivant dans le fichier config-core_demo.json:


{
  "@openmrs/esm-primary-navigation-app": {
    "logo": {
      "src": "${openmrsSpaBase}/logo.png",
      "alt": "Logo",
      "link": "${openmrsSpaBase}/home"
    }
  }
}

Cela limite le logo à l’application de navigation primaire uniquement. N’oubliez pas de vous assurer que le fichier de configuration est chargé (voir Étape 4 ci-dessus).

Note : La configuration du logo de la barre de navigation prend en charge :

src - URL ou chemin vers un fichier image. Les formats pris en charge incluent SVG, PNG, JPEG/JPG, GIF, WebP et tout autre format pris en charge par les navigateurs modernes. Si fourni, cela a la priorité sur name.
name - Chaîne de texte à afficher au lieu d’une image. Utilisé uniquement si src est vide ou non fourni.
link - URL vers laquelle le logo redirige lorsqu’il est cliqué (par défaut : ${openmrsSpaBase}/home)
alt - Texte alternatif pour l’accessibilité (utilisé lorsque src est fourni)

ℹ️

Si l’image que vous utilisez pour le logo est hébergée en dehors de la distribution OpenMRS, vous devrez peut-être modifier la Politique de Sécurité du Contenu pour permettre le chargement de l’image. Pour ce faire, ajustez le bloc map qui définit les en-têtes CSP dans le fichier de configuration nginx dans le répertoire gateway. L’application de référence autorise par défaut les images de même origine et les URI data: avec img-src 'self' data:. Ajoutez l’origine externe précise dont vous avez besoin et incluez explicitement data: si vous avez encore besoin d’images sous forme d’URI de données.

Vous pouvez ajouter des liens externes au menu des applications (le menu qui apparaît lors du clic sur l’icône de changement d’application). C’est utile pour créer des liens vers des systèmes externes, la documentation ou d’autres ressources :


{
  "@openmrs/esm-primary-navigation-app": {
    "externalRefLinks": [
      {
        "title": "Wiki OpenMRS",
        "redirect": "https://wiki.openmrs.org/"
      },
      {
        "title": "Forum communautaire",
        "redirect": "https://talk.openmrs.org/"
      }
    ]
  }
}

Chaque lien externe nécessite :

title - Le texte affiché dans le menu des applications
redirect - L’URL externe vers laquelle naviguer (doit être une URL externe valide)

Les liens externes apparaissent dans le menu des applications aux côtés de vos modules d’application. Ils s’ouvrent dans un nouvel onglet lorsqu’ils sont cliqués.

Changement de l’arrière-plan de la page de connexion

Vous pouvez configurer l’arrière-plan de la page de connexion avec une URL d’image ou une valeur de couleur CSS. Si les deux sont définies, l’image est utilisée.


{
  "@openmrs/esm-login-app": {
    "background": {
      "image": "${openmrsSpaBase}/login-background.jpg",
      "color": "#f4f4f4"
    }
  }
}

image - URL ou chemin vers une image d’arrière-plan. Les chemins relatifs peuvent utiliser des variables de modèle comme ${openmrsBase} ou ${openmrsSpaBase}.
color - Valeur de couleur CSS utilisée lorsqu’aucune image d’arrière-plan n’est configurée.

Ajout d’annonces sur la page de connexion

Vous pouvez ajouter des bannières d’annonce au-dessus du formulaire de connexion, par exemple pour prévenir les utilisateurs d’une maintenance planifiée. Les valeurs title et text peuvent être des chaînes littérales ou des clés de traduction.


{
  "@openmrs/esm-login-app": {
    "announcements": [
      {
        "title": "plannedDowntime",
        "text": "Le système sera indisponible vendredi de 18:00 à 19:00.",
        "kind": "warning"
      }
    ]
  }
}

title - Titre optionnel affiché en haut de la bannière.
text - Corps requis de la bannière.
kind - Style visuel. Les valeurs prises en charge sont info, warning, error et success. La valeur par défaut est info.

Changement du favicon

Pour changer le favicon, vous devrez ajouter un fichier favicon (généralement nommé favicon.ico) à votre distribution. Vous ajouteriez ensuite la ligne suivante au Dockerfile frontend :


COPY ./chemin-vers-le-favicon/favicon.ico /usr/share/nginx/html/favicon.ico

Cela copiera le favicon à la racine de l’application où les navigateurs le rechercheront automatiquement.

ℹ️

Important : Vous devrez reconstruire l’image Docker frontend pour que ce changement prenne effet. Le fichier favicon doit être nommé favicon.ico et placé dans la racine web (/usr/share/nginx/html/) pour que les navigateurs le découvrent automatiquement.

Changement des couleurs de la marque

Les implémenteurs peuvent changer les couleurs de marque par défaut spécifiées dans le guide de style, les remplaçant par des valeurs hexadécimales conformes à leurs propres couleurs de marque. Les couleurs de marque par défaut qui déterminent l’apparence de l’interface utilisateur sont définies dans le schéma de configuration styleguide. Pour les remplacer, utilisez une configuration similaire au snippet ci-dessous:


{
  "@openmrs/esm-styleguide": {
    "Brand color #1": "#005d5d", // La couleur 'primaire' (par défaut : #005d5d)
    "Brand color #2": "#004144", // La couleur 'secondaire' (par défaut : #004144)
    "Brand color #3": "#007d79" // La couleur 'tertiaire' (par défaut : #007d79)
  }
}

ℹ️

Note : Les noms des propriétés de couleur doivent être en anglais (Brand color #1, Brand color #2, Brand color #3) car ils correspondent aux clés du schéma de configuration.

Ces couleurs impactent les éléments UI suivants:

Couleur primaire

La couleur primaire affecte:

La couleur de la barre de navigation
La couleur de survol des éléments du menu de l’application
La couleur de l’application sélectionnée dans le rail latéral

Couleur secondaire

La couleur secondaire affecte:

La couleur de fond des éléments du menu de l’application

Couleur tertiaire

La couleur tertiaire affecte:

La couleur des boutons
La couleur de soulignement du titre du widget

Définir le nom de l’implémentation

Le nom de l’implémentation est affiché dans les en-têtes de page tout au long d’O3, montrant généralement le nom de la clinique ou de l’autorité utilisant l’implémentation. Il apparaît au-dessus du titre de la page dans les tableaux de bord et autres pages qui utilisent le composant PageHeader.

Pour configurer le nom de l’implémentation, ajoutez ce qui suit à votre configuration :


{
  "@openmrs/esm-styleguide": {
    "implementationName": "Ma Clinique"
  }
}

La valeur par défaut est "Clinic". Le nom de l’implémentation peut être traduit—si vous fournissez une clé de traduction qui existe dans les traductions principales, elle sera traduite automatiquement.

Définir le titre de la page

Le titre de la page apparaît dans l’onglet du navigateur et est utilisé pour les signets et l’historique du navigateur. Pour le configurer, définissez la propriété pageTitle dans votre fichier spa-build-config.json :


{
  "pageTitle": "Ma Clinique - OpenMRS"
}

Important : Les modifications de spa-build-config.json nécessitent une reconstruction de la SPA frontend pour prendre effet.

Le titre de page par défaut est "OpenMRS".

Démo vidéo

Regardez la vidéo pour voir une démo de la configuration de la marque: