Construire des formulaires en utilisant le constructeur de formulaires O3

O3 est livré avec un constructeur de formulaires intégré que vous pouvez utiliser pour créer vos schémas de formulaires. Le constructeur de formulaires est fourni par @openmrs/esm-form-builder-app et utilise le moteur de formulaires React  pour rendre les aperçus de formulaires. Lorsque la validation est activée, le constructeur exécute aussi des contrôles de schéma par rapport aux correspondances de types de rendu configurées, aux concepts du dictionnaire, aux concepts de réponse, aux types d’identifiant patient et aux types d’attribut de personne. Pour y accéder, allez à ${openmrsSpaBase}/form-builder, ou cliquez sur l’icône du sélecteur d’applications dans la barre de navigation, ouvrez Administration du Système, puis sélectionnez la carte Constructeur de Formulaires. L’app attend que le backend fournisse FHIR2 >=1.2 et REST Web Services >=2.2.0.

Vidéo de démonstration de 5 minutes (Expliquée en détail ci-dessous)

Introduction à l’utilisation du Constructeur de Formulaires O3 

Fonctionnalités du constructeur de formulaires O3

Les principales pages du constructeur de formulaires O3 sont:

• Le Tableau de bord des formulaires - où vous verrez une liste tabulaire des schémas de formulaires enregistrés sur votre serveur. Vous pouvez rechercher parmi les formulaires disponibles et les filtrer par statut Active, All, Published, Unpublished ou Retired. Le tableau de bord utilise Active par défaut. Vous pouvez également cliquer sur le nom d’un formulaire ou sur l’action d’édition à côté de chaque formulaire pour le lancer dans l’éditeur de formulaires, où vous pouvez y apporter des modifications.

• L'Éditeur de formulaires - où vous pouvez créer un nouveau schéma de formulaire ou en modifier un existant. L’éditeur de formulaires se compose des éléments suivants:

  • Éditeur de schéma - contient un éditeur JSON intégré qui utilise la bibliothèque React Ace . Vous pouvez importer un schéma, charger un schéma d’exemple lors de la création d’un nouveau formulaire, copier ou télécharger le schéma actuel, puis cliquer sur Rendre les modifications pour synchroniser les modifications JSON manuelles avec l’aperçu. Le code JSON saisi dans l’éditeur doit correspondre au schéma de formulaire O3 standard . Lisez la documentation du moteur de formulaires React  pour en savoir plus sur les propriétés de schéma disponibles.
  • Aperçu - un aperçu en direct du formulaire qui rend le schéma du formulaire en utilisant le moteur de formulaires React  comme vous le verriez dans votre DME. L’aperçu se met à jour automatiquement depuis le Constructeur interactif et après avoir cliqué sur Rendre les modifications pour les modifications de l’Éditeur de schéma. Vous pouvez également choisir la langue de l’aperçu lorsque le formulaire contient des traductions.
  • Constructeur interactif - une interface utilisateur interactive qui vous permet de construire vos schémas de formulaires sans écrire de code JSON. Les modifications apportées à votre schéma sont synchronisées avec l’Éditeur de schéma et l’Aperçu lorsque vous construisez votre formulaire. Vous pouvez utiliser le Constructeur interactif pour ajouter des pages, des sections et des questions à votre formulaire.
  • Translation Builder - une interface utilisateur pour ajouter et modifier les traductions du schéma, qui peuvent ensuite être prévisualisées depuis le sélecteur de langue de l’éditeur.
  • Audit Details - une interface utilisateur qui affiche les métadonnées liées à un formulaire enregistré, y compris le nom, la description, l’UUID, la version, le type de rencontre, le créateur, le dernier éditeur, le statut de publication et le statut de retrait.

Une fois que vous avez construit votre schéma de formulaire pour répondre à vos exigences, vous pouvez choisir de:

• Valider le formulaire - lorsque @openmrs/esm-form-builder-app est configuré avec enableFormValidation: true, l’éditeur affiche des actions de validation qui vérifient le schéma par rapport aux concepts et aux règles de rendu configurées. Par défaut, ce flux de validation est désactivé et le formulaire peut être publié avec l’action de publication standard. Le paramètre associé blockRenderingWithErrors détermine si les erreurs de schéma bloquent le rendu de l’aperçu lorsque vous cliquez sur Rendre les modifications; sa valeur par défaut est false.
• Enregistrer votre formulaire sur le serveur - l’enregistrement de votre schéma le persiste dans votre base de données OpenMRS. Les serveurs de démonstration ou de test partagés peuvent être réinitialisés. Conservez donc des sauvegardes versionnées de vos schémas importants et n’utilisez pas un serveur de démonstration comme seule copie.
• Publier ou dépublier votre formulaire - une fois que vous avez enregistré votre formulaire, vous pouvez choisir de le publier. Seuls les formulaires JSON O3 publiés sont affichés dans le flux React Form Engine par défaut du dossier patient. Si la validation des formulaires est activée, l’action de publication devient Validate and publish form; sinon, elle apparaît comme Publish form. Vous pouvez dépublier des formulaires existants lorsque vous voulez retirer une ancienne version de l’utilisation clinique tout en conservant son historique.

Capacités clés du moteur de formulaires

Le moteur de formulaires React qui alimente le constructeur de formulaires prend en charge un large éventail de fonctionnalités pour créer des formulaires cliniques complexes. Voici quelques-unes des capacités les plus importantes :

Structure du formulaire

Les formulaires sont organisés hiérarchiquement :

• Pages - Conteneurs de niveau supérieur qui regroupent les sections connexes
• Sections - Groupes de questions connexes (peuvent être développées/réduites)
• Questions - Champs de formulaire individuels qui collectent des données

Types de rendu courants

Les questions peuvent être rendues de différentes manières selon la propriété rendering dans questionOptions :

• Entrées de base : text, textarea, number
• Date, heure et métadonnées de rencontre : date, datetime, encounter-location, encounter-provider, encounter-role
• Sélection : select, select-concept-answers, radio, checkbox, checkbox-searchable, content-switcher, toggle, ui-select-extended
• Entrées cliniques et spécialisées : drug (pour les ordonnances de médicaments), problem (pour les diagnostics), file (pour les pièces jointes), workspace-launcher (pour ouvrir d’autres espaces de travail), extension-widget (pour rendre une extension personnalisée)
• Structure et contenu en lecture seule : group (pour les groupes d’obs), repeating (pour les sections répétables), markdown, fixed-value

Fonctionnalités avancées

• Rendu conditionnel - Afficher/masquer les champs en fonction des valeurs d’autres champs en utilisant hide.hideWhenExpression
• Champs calculés - Calculer automatiquement les valeurs en utilisant calculate.calculateExpression
• Validation - Valider les valeurs des champs avec des validateurs personnalisés
• Expressions historiques - Pré-remplir les champs avec des valeurs provenant d’encounters précédents
• Sources de données - Remplir les champs à partir de sources de données externes
• Sous-formulaires - Intégrer des formulaires réutilisables dans d’autres formulaires
• Traductions - Stocker les traductions dans le schéma et prévisualiser le formulaire dans une langue sélectionnée
• Actions post-soumission - Exécuter des actions après la soumission du formulaire (par exemple, inscription à un programme)

Pour une documentation complète sur toutes les fonctionnalités disponibles, les types de rendu, les options de validation et les capacités avancées, consultez la documentation du moteur de formulaires React .

Configurer le constructeur de formulaires

@openmrs/esm-form-builder-app expose des options de configuration pour l’interface du constructeur et le flux de validation des schémas:

• questionTypes contrôle les types de questions disponibles dans le Constructeur interactif. La liste par défaut inclut control, les types de métadonnées de rencontre, obs, obsGroup, patientIdentifier, personAttribute, testOrder et programState.
• fieldTypes contrôle les types de rendu disponibles pour les questions. La liste par défaut correspond aux types de rendu courants ci-dessus.
• dataTypeToRenderingMap associe les types de données de concepts aux types de rendu suggérés lorsque le constructeur travaille à partir des concepts du dictionnaire. Pour les concepts codés, la configuration par défaut inclut l’alias historique multiCheckbox; le Form Engine le normalise en comportement de case à cocher recherchable. Les nouveaux schémas devraient donc utiliser checkbox-searchable.
• showSchemaSaveWarning vaut true par défaut et contrôle l’avertissement du tableau de bord sur la sauvegarde des schémas en dehors des serveurs de démonstration ou réinitialisables.
• enableFormValidation vaut false par défaut. Lorsqu’il vaut true, l’éditeur affiche les actions de validation et l’action de publication devient Validate and publish form.
• blockRenderingWithErrors vaut false par défaut. Lorsqu’il vaut true, les erreurs de schéma empêchent le rendu de l’aperçu après avoir cliqué sur Rendre les modifications.

Utilisation du constructeur de formulaires

Créer un nouveau formulaire

Pour créer un nouveau formulaire, faites ce qui suit:

{
  "encounterType": "",
  "name": "Sample Form",
  "processor": "EncounterFormProcessor",
  "referencedForms": [],
  "uuid": "",
  "version": "1.0",
  "pages": [
    {
      "label": "First Page",
      "sections": [
        {
          "label": "A Section",
          "isExpanded": "true",
          "questions": [
            {
              "label": "A Question of type obs that renders a text input",
              "type": "obs",
              "questionOptions": {
                "rendering": "text",
                "concept": "a-system-defined-concept-uuid"
              },
              "id": "sampleQuestion"
            }
          ]
        },
        {
          "label": "Another Section",
          "isExpanded": "true",
          "questions": [
            {
              "label": "Another Question of type obs whose answers get rendered as radio inputs",
              "type": "obs",
              "questionOptions": {
                "rendering": "radio",
                "concept": "system-defined-concept-uuid",
                "answers": [
                  {
                    "concept": "another-system-defined-concept-uuid",
                    "label": "Choice 1"
                  },
                  {
                    "concept": "yet-another-system-defined-concept-uuid",
                    "label": "Choice 2"
                  },
                  {
                    "concept": "yet-one-more-system-defined-concept-uuid",
                    "label": "Choice 3"
                  }
                ]
              },
              "id": "anotherSampleQuestion"
            }
          ]
        }
      ]
    }
  ]
}

Modifier un formulaire existant

Suivez les étapes ci-dessous pour modifier les formulaires existants:

Ressources utiles

• Documentation du moteur de formulaires React  - guide complet du moteur de formulaires React qui alimente l’aperçu et le rendu du constructeur de formulaires
• Dépôt de l’application Form Builder 
• Dépôt de la bibliothèque du moteur de formulaires React 
• Tutoriel vidéo: Démonstration de Form Builder (libellés d’ancienne interface, toujours utile pour le flux principal)