# Composants du formulaire

Les composants d’un formulaire sont généralement associés à un attribut ou à un champ de la source de données, à l’exception des composants de type **Étiquette** et **Pièces jointes** qui ne sont pas liés directement aux données.

Les sections suivantes décrivent :

* les différents types de composants disponibles;
* les paramètres de chaque type de composant;
* les fonctionnalités de gestion des composants dans un formulaire.

## Types de composants

JMap Cloud Portal propose plusieurs types de composants permettant d’adapter les formulaires à divers besoins fonctionnels et visuels.

<table data-header-hidden><thead><tr><th width="168.62109375"></th><th></th></tr></thead><tbody><tr><td><strong>Étiquette</strong></td><td>Texte statique qui s'affiche tel quel dans le formulaire.</td></tr><tr><td><strong>Texte</strong></td><td>Champ de saisie d’une valeur alphanumérique. L’attribut/champ associé doit être de type Texte.</td></tr><tr><td><strong>Nombre</strong></td><td>Champ de saisie d’une valeur numérique. L’attribut/champ associé doit être de type Nombre.</td></tr><tr><td><strong>Booléen</strong></td><td>Permet de renseigner l’attribut/champ associé pour lequel il existe seulement 2 valeurs possibles, qui correspondent aux états coché et non coché du composant. L’attribut/champ associé peut être de type Texte ou Nombre.</td></tr><tr><td><strong>Date</strong></td><td>Permet de sélectionner une date. L’attribut/champ associé doit être de type Date ou DateTime.</td></tr><tr><td><strong>Liste</strong></td><td><p>Liste de valeurs dont, selon le paramètre configuré, seulement une valeur (choix unique) ou plusieurs valeurs (choix multiple) peuvent être sélectionnées.</p><p>L’attribut/champ associé doit être de type Texte ou Nombre et avoir obligatoirement un <a href="../../../integrer-les-donnees-sources-de-donnees/gerer-les-sources-de-donnees/afficher-et-editer-les-informations-de-la-source-de-donnees#domaine-de-valeurs">domaine de valeurs</a> qui détermine les valeurs possibles que peut prendre l’attribut/champ.</p></td></tr><tr><td><strong>Pièce jointe</strong></td><td>Ce composant permet à l'utilisateur d'une application JMap NG de joindre un ou plusieurs fichiers à une entité ou à un enregistrement de la source de données. Voir la section <a href="../../integrer-les-donnees-sources-de-donnees/gerer-les-sources-de-donnees/pieces-jointes-des-sources-de-donnees">Pièces jointes des sources de données</a> pour plus de détails.<br>Un seul composant <strong>Pièce jointe</strong> peut être ajouté à un formulaire.<br>La source de données doit avoir un attribut/champ de liaison sélectionné et celui-ci doit être <strong>unique</strong> et <strong>non nul</strong>. <br><strong>Note</strong> : Si l’attribut/champ de liaison est modifié après l’ajout de pièces jointes, ces dernières sont détachées des entités/enregistrements mais ne sont pas effacées. </td></tr><tr><td><strong>Table</strong></td><td><p>Ce composant permet à l'utilisateur d'une application JMap NG de créer et d'éditer des données d'une table associée à une entité ou à un enregistrement de la source de données. <br>Une <a href="../../integrer-les-donnees-sources-de-donnees/gerer-les-sources-de-donnees/afficher-et-editer-les-informations-de-la-source-de-donnees/relations">relation</a> doit être configurée entre la source de données et la table.<br><strong>Si les données de la table sont éditables, vous devez configurer un formulaire pour la table</strong>.</p><p><strong>Exemple</strong></p><p>Une couche de points représente des stations de mesure de la qualité de l’air. Une table contient les mesures qui ont été prises à la station des polluants à des dates différentes. Pour chaque station de mesure, il peut y avoir 0, 1 ou plusieurs mesures réalisées.</p><p>Dans le formulaire des attributs de la couche des stations de mesure, le composant table permet d’afficher une table contenant les données de concentration de polluants à différentes dates. Chaque rangée correspond à la mesure d'un polluant à une date donnée. </p><p><img src="https://1484831130-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrPLLbWoaAYyK9HykpM0p%2Fuploads%2FVxdnmjtxwqCtN9STZeZ1%2Fclip013FR.png?alt=media&#x26;token=03eeaf12-78e1-4e4b-9d6f-c6a1fb37570e" alt="" data-size="original"></p></td></tr></tbody></table>

## Paramètres des composants

Chaque type de composant dispose de paramètres spécifiques qui permettent de contrôler son comportement et son apparence (ex. : texte par défaut, format, style, contraintes, etc.).

<table data-header-hidden><thead><tr><th width="214"></th><th></th></tr></thead><tbody><tr><td>Attribut</td><td>Sélectionnez l’attribut de la couche ou le champ de la table auquel le composant est associé. C’est cet attribut ou ce champ que le composant du formulaire va renseigner.</td></tr><tr><td>Titre</td><td>Donnez un <strong>titre</strong> au composant.</td></tr><tr><td>Texte</td><td><strong>Composants Pièce jointe</strong> et <strong>Étiquette</strong>.<br>Texte de l’étiquette ou de la section du formulaire qui contient les pièces jointes.</td></tr><tr><td>Définir l'attribut de liaison</td><td><strong>Composant Pièce jointe</strong>.<br>Si ce n'est pas fait, appuyez sur le bouton pour ouvrir l'interface de configuration de la source de données et définir l'attribut de liaison. Si l’attribut de liaison est défini, ce paramètre ne s’affiche pas.  <br>Cet attribut permet d'associer les pièces jointes aux entités ou enregistrements de la source de données. Il doit être <strong>unique</strong> et <strong>non nul</strong>. <br><strong>Note</strong> : Si l’attribut de liaison est modifié après l’ajout de pièces jointes, ces dernières sont détachées des entités/enregistrements mais ne sont pas effacées. </td></tr><tr><td>Valeur par défaut</td><td>Entrez ou sélectionnez une <strong>valeur par défaut</strong> pour initialiser le champ de saisie. </td></tr><tr><td>Choix</td><td><strong>Composant Liste</strong>.<br>Sélectionnez le type de liste : choix unique ou choix multiple.</td></tr><tr><td>Afficher</td><td><p>Sélectionnez le <strong>type d'affichage</strong> du composant dans le formulaire.</p><p><strong>Texte</strong> : Ligne unique ou Lignes multiples.<br><strong>Liste</strong> : Bouton radio ou Sélection.<br><strong>Booléen</strong> : Case à cocher ou Interrupteur.<br><strong>Nombre</strong> : Champ de saisie ou Glissière.</p></td></tr><tr><td>Domaine de valeurs</td><td><strong>Composant Liste</strong>.<br>Cette section vous permet d’afficher le <a href="../../../integrer-les-donnees-sources-de-donnees/gerer-les-sources-de-donnees/afficher-et-editer-les-informations-de-la-source-de-donnees#domaine-de-valeurs">domaine de valeurs</a> de l’attribut. Si vous souhaitez modifier les valeurs, cliquez sur <strong>Afficher le domaine de valeurs</strong> pour ouvrir l’interface de l’onglet <a href="../../../integrer-les-donnees-sources-de-donnees/gerer-les-sources-de-donnees/afficher-et-editer-les-informations-de-la-source-de-donnees#attributs">Attributs</a> de la source de données. Vous pouvez alors modifier les valeurs.<br>Si l’attribut n’a pas de domaine de valeurs, le bouton <strong>Créer un domaine de valeurs</strong> s’affiche et lorsque vous cliquez dessus<br> l'interface de l'onglet <a href="../../../integrer-les-donnees-sources-de-donnees/gerer-les-sources-de-donnees/afficher-et-editer-les-informations-de-la-source-de-donnees#attributs">Attributs</a> de la source de données s'affiche et vous pouvez <a href="../../../integrer-les-donnees-sources-de-donnees/gerer-les-sources-de-donnees/afficher-et-editer-les-informations-de-la-source-de-donnees#domaine-de-valeurs">créer le domaine de valeurs</a>. </td></tr><tr><td>Minimum</td><td><strong>Composant Nombre</strong>.<br>Entrez la valeur minimale de l'attribut.</td></tr><tr><td>Maximum</td><td><strong>Composant Nombre</strong>.<br>Entrez la valeur maximale de l'attribut.</td></tr><tr><td>Valeur cochée</td><td><strong>Composant Booléen</strong>.<br>Indiquez la valeur à enregistrer lorsque la case est cochée ou l'interrupteur est activé.</td></tr><tr><td>Valeur décochée</td><td><strong>Composant Booléen</strong>.<br>Indiquez la valeur à enregistrer lorsque la case est décochée ou l'interrupteur est désctivé.</td></tr><tr><td>Statut - Requis</td><td>Détermine si le champ est <strong>requis</strong>. <br>L’utilisateur ne pourra pas soumettre le formulaire tant que tous les champs requis ne seront pas renseignés.  <br>Les champs requis sont identifiés par une étoile (*) dans le designer de formulaires.</td></tr><tr><td>Statut - Lecture seule</td><td>Activez cette option pour que le composant soit en <strong>mode lecture seule</strong>. <br>L’utilisateur ne pourra pas modifier le contenu. <br>Cette option devrait être utilisée pour un composant ayant une valeur par défaut.</td></tr><tr><td>Relation</td><td><strong>Composant Table</strong>.<br>Sélectionnez la relation qui est utilisée pour établir la relation entre la table et la source de données. La relation doit être définie au préalable.</td></tr><tr><td>Attributs visibles</td><td><strong>Composant Table</strong>.<br>Sélectionnez les attributs de la table qui seront visibles dans le formulaire.<br>Si la table est éditable vous devez configurer un formulaire la table, pour éditer ces attributs.</td></tr><tr><td>Trier par</td><td><strong>Composant Table</strong>.<br>Sélectionnez l'attribut qui sert à faire le tri des enregistrements de la table dans le formulaire.</td></tr></tbody></table>

## Travailler avec les composants

### **Ajouter un composant**

Pour ajouter un composant à un formulaire, faites-le glisser depuis la palette et déposez-le dans l’interface de l’onglet **Design**. Les composants peuvent être insérés dans des [contenants pour la mise en page](https://docs.jmapcloud.io/fr/jmap-cloud-portal/guide-dutilisation-de-jmap-cloud-portal/creer-des-formulaires/conception-de-formulaires/mise-en-page-du-formulaire).

{% hint style="info" %}
Par défaut, les composants sont empilés verticalement dans le formulaire.
{% endhint %}

### **Configurer un composant**

Pour configurer un composant déjà placé dans le formulaire, cliquez dessus dans l’onglet **Design**. Les paramètres modifiables s’affichent dans la section **Propriétés**.

La disposition spatiale des composants peut être ajustée à l’aide des outils de mise en page, décrits dans la section suivante.

### Supprimer un composant

Pour supprimer un composant, cliquez dessus dans l’onglet **Design**, puis cliquez sur l’icône de suppression ![](https://1484831130-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrPLLbWoaAYyK9HykpM0p%2Fuploads%2FUKlhqLRE8Mv3P3lPhFqt%2Fstudio-style-delete.png?alt=media\&token=d3b63264-7a75-4519-bf07-c413f34ea42e).