Procédure pour exploiter une relation 1-N dans des formulaires utilisant le GUI ‘Sources des données’ d’EpiCraft

Edit me

Introduction

La version 1.16 d’EpiCraft voit arrivée de la gestion des relations entre varsets. La version 1.18 voit l’arrivée d’une interface dédiée à la construction de dataqueries sans taper des lignes d’XML. Cet article (un dérivé de cet article) vise à expliquer comment exploiter les relations entre varsets dans Voozanoo 4 avec cette nouvelle interface.

Pré-requis

Voici les prérequis :

  • Un projet dans EpiCraft associé à un projet Voozanoo 4.
  • Dans ce projet :
    • Une page Médecin associée au varset docteur.
    • Une page Patient associée au varset patient.

Objectif

L’objectif est de créer une relation 1-N entre docteur et patient (un médecin a plusieur patients) et de l’exploiter avec :

  • Sur la page Médecin :
    • un listing des patients du médecin ;
    • un bouton pour ajouter un patient.
  • Sur la page Patient :
    • l’affichage de certains champ du médecin.
    • un bouton pour aller vers le médecin.

Schéma cible Médecin-Patients

Etape 1 : Créer la relation dans EpiCraft

Créer la relation dans EpiCraft via l’interface dédiée puis publier les actions :

Relation Médecin-Patients dans EpiCraft

Juste pour information, ceci automatiquement crée une nouvelle variable dans le varset patient :

<var uid="5" id="id_doctor" type="fkey_varset" default_label="Médecin traitant" editor_relation_id="gfewhpjcdr1564497245070" mandatory="false">
  <fkey_varset varset_name="doctor" max_occurence="N"/>
</var>

Etape 2 : Exploiter la relation dans les formulaires

Etape 2.1 : Afficher un listing des patients sur la page Médecin

Créer un dataquery pour récupérer la liste des patients d’un médecin

Premièrement, créer un dataquery sur la page médecin pour récupérer la liste des patients d’un médecin.

  1. Page Doctor > Sources de données icon sources de données
  2. Ajout > Relation Relation Médecin - Patient
  3. Libellé : Get the patients for this doctor
  4. Nom technique : get_patients qui sera utilisé par le tableau sur la page
  5. Ajouter les variables trigramme, sexe et ddn.

Facultatif: Si vous ajoutez la variable sys_creation_date, vous pourrez classer la liste par cette date dans la partie contrôle.

ajout des variables

Ajouter un widget Table sur la page Patient pour afficher les résultats obtenus

Ensuite, sur la page patient, ajouter un widget Table pour afficher les résultats obtenus (à l’aide du composant Bulk et un form.widget):

<table dataset="patients">
  <options>
    <option output="html" option_name="edit_url" value="form/frame/get/sid/gddpsaqnmb1542032980270/id_data/{id_data}"/>
    <option output="html" option_name="save_before_edit" value="true"/>
    <option output="html" option_name="enable_deletion" value="true"/>
  </options>
  <columns>
    <column field="trigramme" />
    <column field="sexe"/>
    <column field="ddn" />
  </columns>
</table>

<paginator dataset="patients"/>

Ici, la valeur de paramètre sid doit être celui du formulaire patients (la page de destination).

Etape 2.2 : Afficher un bouton “Ajouter un patient” sur la page Médecin

Créer le bouton

Premièrement, créer un bouton à l’aide d’un bulk dans EpiCraft :

<button label="Ajouter un patient" action="save" class="btn-primary pull-right">
  <redirection module="form" ctrl="frame" action="get">
    <params>
      <dataset dataset_name="doctor" field="id_data" alias="id_data_from_doctor"/>
      <value alias="sid">gddpsaqnmb1542032980270</value>
    </params>
  </redirection>
</button>

Ici, la valeur de paramètre sid doit encore être celui du formulaire Patient (la page de destination).

On note que l’on passe un id_data_from_doctor en paramètre pour qu’il soit utilisé dans la page Patient.

Récupérer le paramètre passé pour lier la future fiche patient à son médecin

Deuxièmement, récupérer le paramètre passé pour lier la future fiche patient à son médecin :

D’abord, ajouter la colonne id_doctor au dataquery principal de la page Patient :

  1. Page Patient > Sources de données icon sources de données
  2. Source de donnée sur la page principale
  3. Ajouter la variable id_doctor

icon sources de données

Ensuite ajouter une balise variables au dataquery pour gérer le paramètre reçu par la page :

  1. Page Patient > Sources de données icon sources de données
  2. Source de donnée sur la page principale
  3. Personnaliser > +
  4. Modèles > form.dataquery.main.variables
<variables>
  <variable default="null" target_column="id_doctor">
    <entry name="id_data_from_doctor" type="param"/>
  </variable>
</variables>

icon sources de données

Ceci va alimenter automatiquement la colonne patient.id_doctor avec le paramètre envoyé par le bouton.

Etape 2.3 : Afficher des champs du médecin sur la page Patient

Créer un dataquery pour récupérer les champs du médecin

Premièrement, il faut créer un dataquery pour récupérer les informations sur le médecin sur la page patient :

  1. Page Patient > Sources de données icon sources de données
  2. Ajout > Relation *Rélation Médecin - Patient
  3. Libellé : les infos du médecin
  4. Nom technique : doc_data
  5. Ajouter les variables nom et prenom

ajouter des colonnes

Disposer les champs dans la page

Deuxièmement, afficher les champs du médecin à l’aide d’un bulk form.widget dans EpiCraft :

<form_row>
  <label dataset="donnees_doctor" field="prenom" class="text-right col-md-3"/>
  <value dataset="donnees_doctor" field="prenom" mode="r" class="text-left col-md-9"/>
</form_row>
<form_row>
  <label dataset="donnees_doctor" field="nom" class="text-right col-md-3"/>
  <value dataset="donnees_doctor" field="nom" mode="r" class="text-left col-md-9"/>
</form_row>

Alternativement, vous pourrez afficher le nom et prénom du médecin avec le composant Texte comme suit :

affichage alternative

Etape 2.4 : Afficher un bouton vers le médecin sur la page Patient

Ici, on suppose que le dataquery créé à l’étape 2.3 existe déjà (on a besoin de son id_data).

Il suffit alors de créer un bouton à l’aide d’un bulk et form.widget :

<button label="Vers la fiche médecin" action="save" class="btn-primary pull-right">
  <redirection module="form" ctrl="frame" action="get">
    <params>
      <dataset dataset_name="donnees_doctor" field="id_data" alias="id_data"/>
      <value alias="sid">zjyavujfrx1542035295204</value>
    </params>
  </redirection>
</button>

Ici, la valeur de paramètre sid doit encore être celui du formulaire Médecin (la page de destination).

On note que l’on passe un id_data en paramètre pour arriver sur le bon médecin.