diff --git a/utilisation/attributs_formulaire.md b/utilisation/attributs_formulaire.md
new file mode 100644
index 0000000000000000000000000000000000000000..73a644aa4782f32a4a6e80766097fbbbf1b208ad
--- /dev/null
+++ b/utilisation/attributs_formulaire.md
@@ -0,0 +1,280 @@
+# Attributs de formulaire
+
+## 1. Définition
+
+
+
+Les attributs d'un formulaire peuvent être créés, édités et supprimés
+dans le studio. Certains attributs exploitent des valeurs issues de base
+de données ou de services web, d'autres sont des composants de mise en
+page destinés à personnaliser l'interface du formulaire, et d'autres
+sont des attributs classiques directement configurables dans vMap.
+
+Il existe plus d'un vingtaine de types d'attributs paramétrables dans la
+fenêtre de définition en bas à gauche du studio.
+
+## 2. Édition des attributs
+
+### 2.1. Bouton radio
+
+![](../../images/bouton_radio1.png)
+
+Nommer l'attribut et son libellé tel qu'il sera affiché dans le
+formulaire. Définir la valeur par défaut et déterminer si le bouton
+radio doit être désactivé ou pas. Définir ensuite les options possibles
+en entrant le libellé du bouton et la valeur envoyée en base. Le bouton
+"Option" permet l'ajout d'une option supplémentaire.
+
+![](../../images/bouton_radio.png)
+
+### 2.2. Boîte à cocher
+
+![](../../images/boite_a_cocher1.png)
+
+Nommer l'attribut et son libellé tel qu'il sera affiché dans le
+formulaire. Définir si la boîte doit être cochée par défaut ou pas.
+
+![](../../images/boite_a_cocher.png)
+
+### 2.3. Paramètres de type Carte Bing, OSM, vMap
+ vMap permet d'exploiter les services
+web OSM, Bing Maps ou Vitis vMap pour personnaliser un formulaire en
+exploitant leurs ressources cartographiques.
+
+#### 2.3.1. Carte OSM
+
+![Carte OSM](../../images/carte_osm.png)
+
+Nommer le paramètre et définir le libellé qui sera affiché dans le
+formulaire de demande. Définir la hauteur et la largeur de la carte et
+indiquer si ce paramètre est obligatoire ou pas en cochant la case
+Requis.
+
+Paramétrer ensuite les options spécifiques aux éléments de type carte :
+
+-   La projection de la carte : WGS84 ou Lambert 93. En Lambert 93,
+    l’étendue par défaut correspond à l'ensemble de la
+    France métropolitaine.
+-   Méthode de centrage de la carte : l'auteur choisit si le centre de
+    la carte est défini par un point défini via des coordonnées X/Y et
+    une échelle d'affichage, ou si le centre de la carte est
+    paramétrée par son étendue définie par les coordonnées X et Y Min
+    et Max.
+
+Choisir ensuite les éléments de dessin et de navigation qui seront
+affichés sur la carte du formulaire de demande :
+
+-   Position de la souris : affichage dynamique des coordonnées de la
+    souris selon la projection définie.
+-   Boutons de zoom : affichage des boutons de navigation classique
+    zoom avant, zoom arrière et retour à l'étendue par défaut.
+-   Echelle : affichage de l'échelle.
+-   Projection de la carte : affichage de la projection Lambert 93 ou
+    WGS 84.
+-   Multiples géométries : possibilité ou pas de saisir des géométries
+    de type différent (point, ligne et polygone).
+-   Plein écran : permet d'afficher la carte en mode plein écran.
+-   Suppression générale : Suppression de toutes les géométries
+    saisies sur la carte.
+-   Edition : modification de la géométrie sélectionnée.
+-   Dessiner un point.
+-   Dessiner une ligne.
+-   Dessiner un polygone.
+-   Le champ Valeur permet à l'auteur de définir une géométrie qui
+    sera affichée par défaut dans le formulaire. Cette géométrie est
+    décrite via une chaîne WKT :
+
+![](../../images/carte_valeur_par_dafaut.png)
+
+![](../../images/c_formulaire_carteOSM.png)
+
+#### 2.3.2. Carte Bing
+
+![image](../../images/c_formulaire_carte_bing.png)
+
+Tous les paramètres de personnalisation d'une carte Bing Maps sont
+identiques à ceux des cartes OSM. Il faut fournir en plus, une clé
+d'accès pour pouvoir exploiter ce service web cartographique.
+
+Générer une clé Bing Maps sur le site .. :
+<https://www.bingmapsportal.com/>
+
+Une fois obtenue, entrer la clé dans le champs Clé et sélectionner la
+carte à afficher dans le formulaire de demande :
+
+-   Aerial
+-   Aerial WithLabels
+-   Road
+
+#### 2.3.3. carte vMap
+
+![Carte vMap](../../images/carte_vmap.png)
+
+Pour pouvoir exploiter une carte vMap, il faut au préalable, dans vMap,
+exporter la définition de la carte.
+
+L'export d'une carte vMap génère un fichier map.json que l'auteur du
+formulaire doit télécharger (champ Fichier local) pour pouvoir
+l'intégrer dans un formulaire.
+
+Procéder ensuite de la même façon qu'avec les autres ressources de type
+carte, en nommant le paramètre et son libellé, puis en paramétrant
+l'affichage des outils propres aux cartes.
+
+### 2.6. Champ caché
+
+Un attribut de type Champ caché permet de masquer un attribut. Il est
+exploité dans le formulaire mais n'est pas apparent. Nommer le paramètre
+et définir la valeur à exploiter. 
+
+### 2.7. Couleur
+
+![Attribut de type sélecteur de couleur](../../images/selecteur_couleur.png)
+
+Un attribut de tye Choix de la couleur insère un sélecteur de couleurs.
+Nommer le paramètre et le libellé à afficher dans le formulaire, et
+définir la couleur par défaut.
+
+### 2.8. Curseur
+
+Un attribut de tye curseur insère un curseur dans le formulaire. Nommer
+le paramètre et le libellé à afficher et définir les valeurs minimales
+et maximales de la plage de données ainsi que la valeur par défaut.
+
+![Attribut de type curseur](../../images/curseur.png)
+
+### 2.9. Paramètres de type Date
+
+#### 2.9.1. Date
+
+Un attribut de type Date insère une date sous la forme jj/mm/aaaa. Un
+calendrier s'affiche dans le formulaire pour faciliter la date à entrer.
+
+Nommer le paramètre et le libellé à afficher et définir la valeur par
+défaut.
+
+![Attribut de type curseur](../../images/date.png)
+
+#### 2.9.2. Date/heure
+
+Un attribut de type Date et heure insère une date sous la forme
+jj/mm/aaaa hh:mm. Un calendrier et une montre facilite la saisie la date
+et de l'heure dans le formulaire.
+
+Nommer le paramètre et le libellé à afficher et définir la valeur par
+défaut.
+
+### 2.10. Document - objet métier
+Un attribut de type Document - objet métier est un champ de chargement de documents. 
+
+![](../../images/document.png)
+
+Nommer le paramètre et le libellé à afficher. 
+
+![](../../images/formulaire_document.png)
+
+Définir le format des documents téléchargeables en indiquant leurs extensions possibles séparées par un |. 
+
+La boîte à cocher "Uniquement en consultation" indique si le document est uniquement consultable ou si il doit être téléchargé. 
+
+ Un unique fichier peut être associé à un attribut. Il faut donc compresser les documents en un unique fichier zip pour pouvoir les associer à un même attribut. 
+
+Obtenir un [exemple d'insertion d'attribut de type Document](cas_utilisation.html#5personnalisation-dun-formulaire-insertion-dun-champ-de-chargement-de-documentimage)
+
+### 2.11. Image Objet métier
+
+Un attribut de type Image - objet métier est un champ de chargement d'images.
+
+![](../../images/image.png)
+
+Nommer le paramètre et le libellé à afficher. 
+
+La boîte à cocher "Uniquement en consultation" indique si l'image est uniquement consultable ou si elle doit être téléchargée. 
+
+Un unique fichier peut être associé à un attribut. Il faut donc compresser les images en un unique fichier zip pour pouvoir les associer à un même attribut. 
+
+Obtenir un [exemple d'insertion d'attribut de type Document/image](cas_utilisation.html#5personnalisation-dun-formulaire--insertion-dun-champ-de-chargement-de-documentimage)
+
+### 2.12. Décimal
+Nommer l'attribut et le libellé qui seront affichés dans le formulaire et définir la valeur par défaut. Définir si ce paramètre est obligatoire ou pas en cochant la case Requis. 
+
+### 2.13. Entier
+Nommer l'attribut et le libellé qui seront affichés dans le formulaire et définir la valeur par défaut. Définir si ce paramètre est obligatoire ou pas en cochant la case Requis. 
+
+
+### 2.14. Editeur de code CodeMirror
+
+
+
+### 2.15. Grille objet métier
+
+Un attribut de type Grille objet métier permet d'associer à un élément un sous élément. La grille objet métier permet l'insertion d'objet enfant associé à un objet parent. 
+
+Nommer le paramètre et le libellé à afficher, puis sélectionner l'objet métier enfant et définir l' attributs parent et enfant surlesquels reposent l'ascendance. 
+
+![](../../images/exemple_studio_grille_2.png)
+
+Obtenir un  [exemple d'insertion d'attribut de type grille objet métier](cas_utilisation.html#6-personnalisation-dun-formulaire--insertion-dune-grille-de-sous-objets)
+
+
+### 2.16. Grille section vitis
+
+
+
+### 2.18. Image URL
+
+Un attribut de type image URL permet d'afficher dans un formulaire l'url d'un image. Indiquer le libellé, l'attribut et l'url dans le champs valeur. 
+
+
+
+### 2.19. Interface bouton
+
+### 2.20. Interface ligne de séparation
+
+### 2.21. Label
+
+### 2.22. Lien
+
+![Attribut de type curseur](../../images/lien.png)
+
+Un attribut de type Lien permet d'insérer des liens vers d'autres
+plateformes. Nommer le paramètre et le libellé à afficher.
+
+Définir ensuite les paramètres du lien :
+
+-   Texte : texte à afficher
+-   Cible : si laissé vide, la page s'ouvre dans un nouvel onglet.
+-   Valeur : adresse du lien
+
+Obtenir un [exemple d'insertion d'attribut de type lien](cas_utilisation.html#2-personnalisation-dun-formulaire--insertion-dun-attribut-de-type-lien)
+
+
+### 2.23. Liste
+
+3 types de listes sont paramétrables dans vMap. Le [gestionnaire de source de données](gestionnaire_source_donnees.md) permet une configuration fine des listes, de leurs sources et de leurs modalités d'affichage. 
+
+
+
+#### 2.23.1. Liste simple
+
+On entend par liste simple, une liste de choix dans laquelle l'utilisateur sélectionne un élément directement en cliquant parmi une des ocurrences de la liste : 
+
+![Attribut de type curseur](../../images/liste_simple.png)
+
+Après avoir indiqué le libellé de l'objet et l'attribut à partir duquel il est défini, sélectionner la source de données dans la liste ou cliquer sur le bouton Sources de données pour en ajouter. 
+
+#### 2.23.2. Liste double
+
+Une liste double permet d'afficher dans un formulaire les éléments d'une liste répartis en deux blocs : les éléments disponibles en sélection et les éléments sélectionnés. 
+
+#### 2.23.3. Liste déroulante
+
+Un attribut de type liste déroulante permet d'afficher la liste de choix sous forme de liste déroulante. 
+
+Obtenir un [exemple d'insertion d'attribut de type liste](cas_utilisation.html#utilisation-du-gestionnaire-de-source-de-donnees-insertion-d-une-liste-deroulante)
+
+
+### 2.24. Texte
+ 
+ 
+Nommer l'attribut et son libellé tel qu'il sera affiché dans le formulaire. Une expression régulière peut être définie pour containdre la saisie de ce champ, et une valeur pas défaut peut également être définie. 
diff --git a/utilisation/gestionnaire_source_donnees.md b/utilisation/gestionnaire_source_donnees.md
new file mode 100644
index 0000000000000000000000000000000000000000..986299f738faf5e155f161dd505fa21b8211544c
--- /dev/null
+++ b/utilisation/gestionnaire_source_donnees.md
@@ -0,0 +1,168 @@
+# Le Gestionnaire de source de données
+
+
+Le gestionnaire de sources de données permet la création, l'édition et la suppression de sources de données à associer à des attributs de type :
+
+-   liste
+-   liste déroulante
+-   liste double
+
+Le gestionnaire de sources de données permet d'exploiter des données :
+
+-   Texte : valeurs saisies directement dans le gestionnaire
+-   Valeur de table locale : valeurs issues d'une table de base de
+    données installée sur le serveur
+-   Base de données externe : valeurs importées d'une table d'une base
+    de données externe
+-   Service web Vitis : permet d'exploiter un service web pour en
+    récupérer les ressources
+-   Objet métier : permet d'exploiter un objet métier déjà configuré
+
+
+Le bouton **Sources de données**, en bas à droite du studio permet d'ouvrir le gestionnaire de source de données.
+
+
+![](../../images/GSD_1.png)
+
+
+Une fois une source de données définie dans le gestionnaire, on peut créer dans le studio,  un attribut de
+type "*Liste*" et choisir la source de données créée précédemment. 
+
+
+##  1. Source de données de type texte
+
+Le type texte permet de renseigner soi-même le contenu de la source de données.
+
+    libellé 1|clé 1
+    libellé 2|clé 2
+    libellé 3|clé 3
+
+Chaque entité est composée : 
+
+- d'une **clé** qui est la valeur retenue
+- d'un **libellé** qui est le contenu affiché dans le formulaire. 
+
+Les deux sont séparés (sans espace) par le caractère "|". Répéter l'opération autant de fois que d'occurrences, en retournant à la ligne pour chaque élément.
+
+![](../../images/exemple_studio_datasource_4.png)
+
+
+##  2. Source de données de type valeurs d'une table locale
+
+Ce type de source permet de récupérer directement en base de données le contenu d'une table. 
+Définir : 
+
+- le nom de la base de données
+- le schéma
+- la table
+
+### 2.1 Affichage de la liste
+
+On peut filtrer les enregistrements à afficher dans la liste. Pour cela renseigner : 
+- l'attribut qui est le nom de la  colonne sur laquelle porte le filtre
+- l'opérateur 
+- la Valeur à utiliser pour définir la condition.
+
+
+Le bouton "*+*" permet l'ajout de conditions et on  peut déterminer si les multiples conditions sont de type "*AND*" ou "*OR*".
+
+
+**Important :** l'insertion de ce type de source de données (tables locales) utilise le token de connexion de l'utilisateur. Il faut donc faire attention à ce que **tous les utilisateurs susceptibles d'utiliser le formulaire aient des droits en consultation sur la table.**
+
+![](../../images/GSD_2.png)
+
+
+### 2.2 Clé et libellé
+
+Dans le studio, définir l'attribut et son libellé  à afficher dans le formulaire. 
+
+Puis sélectionner la source de données précédemment créée dans le Gestionnaire de source de données. 
+
+Définir ensuite le libellé et la clé des occurences de la liste : 
+
+
+
+![](../../images/GSD_3.png)
+
+Dans l'exemple ci-dessus, on souhaite pouvoir sélectionner dans le formulaire les utilisateurs dont les noms (colonne name) seront affichés dans une liste "utilisateurs". La clé (colonne login) de chaque utilisateur est la valeur rééllement utilisée. 
+
+### 2.3 Options avancées = affiner l'affichage des listes
+
+ Il est possible d'affiner l'affichage des éléments de la liste via les commandes : 
+
+- commandes de tri (order_by et sort_order) sur les attributs dont on spécifie les noms dans le champs Attributs. Ils doivent êtres séparés par le caractère |. 
+
+- clause distinct pour distinguer les valeurs identiques. 
+
+- filtre pour  filtrer les valeurs à afficher via une clause Where dont on spécifie les arguments dans le champ ' filter'. 
+
+### 2.4 Listes en cascade
+
+On peut choisir d'afficher une liste dont le contenu varie en fonction des valeurs sélectionnées dans une autre  liste. L'option Cascade permet le paramétrage de telles listes en spécifiant l'attribut parent et l'attribut enfant sur lequel effectuer le filtre d'affichage.
+
+ 
+**Attributs de filtrage et Signe de comparaison** 
+
+Après avoir défini quel est l'élément  parent, il faut définir le champ enfant sur lequel repose l'ascendance ainsi que le signe de comparaison sur lequel doit reposer la comparaison entre les champs liant la table parent à la table enfant. 
+
+Les signes de comparaison sont : 
+
+- = Egalité parfaite entre le champ parent et le champ enfant
+- \> Ne seront affichés dans la liste enfant que les enregistrements dont la valeur est supérieure à l'attribut de filtre parent. 
+- \< Ne seront affichés dans la liste enfant que les enregistrements dont la valeur est inférieure à l'attribut de filtre parent. 
+
+
+ 
+**Attendre le parent **
+
+
+Pour forcer l'affichage de la liste des éléments enfants uniquement lorsqu'un élément parent est sélectionné, il faut cocher la case 'Attendre le parent'. Ainsi, si aucun élément parent n'est sélectionné, aucun élément enfant n'apparaîtra dans la liste. 
+ 
+
+
+
+## 3. Source de données de type service web
+
+On peut exploiter une ressource d'un service web précédemment créé, afin d'effectuer des requêtes complexes. On peut également se servir d'un services de l'application.
+
+Le type de source "*Service web*" effectue une requête de type "*GET*" à la ressource sélectionnée.
+
+![](../../images/exemple_studio_datasource_6.png)
+
+
+## 4. Source de données de type objet métier
+
+Il est également possible d'interroger directement un objet métier selon une des trois solutions suivantes :
+
+-   **Form :** renvoie l’ensemble des colonnes de la table associée à
+    l'objet métier
+-   **SQL Summary :** renvoie de résultat de la requête définie par SQL
+    Summary
+-   **SQL List :** renvoie de résultat de la requête définie par SQL
+    List
+
+![](../../images/exemple_studio_datasource_7.png)
+
+## 5. Source de données de type base de données externe
+
+Plus complexe mais plus puissant, ce type de source permet d'interroger des bases de données d'un serveur externe selon un login et un mot de passe fourni.
+
+
+Après avoir saisi le nom de la nouvelle source de données, saisir les paramètres de connexion à la base de données : 
+- serveur
+- port
+- sgbd
+- login
+- mot de passe
+- tables. Le bouton 'Tables' permet d'afficher la liste des tables de la base et de la sorte de s'assurer de la réussite de la connexion.  
+
+Il est également possible de filtrer les données à importer via une clause de type Where, saisie dans le champs Filtre.
+
+Le bouton 'Valider' permet de fermer la fenêtre en cours et revenir à liste des sources de données. 
+Cliquer, à nouveau, sur Valider pour fermer le gestionnaire de source de données et revenir au studio. 
+
+
+**Important : les login et mot de passe renseignés doivent être publics** car les utilisateurs finaux pourraient avoir accès à cette
+information.
+
+![](../../images/exemple_studio_datasource_8.png)
diff --git a/utilisation/index.rst b/utilisation/index.rst
new file mode 100644
index 0000000000000000000000000000000000000000..ba22d2343b027fa54c2fe1bb8dc8b7dbca3fb956
--- /dev/null
+++ b/utilisation/index.rst
@@ -0,0 +1,9 @@
+Utilisation du studio
+=====================
+
+.. toctree::
+   :maxdepth: 2
+
+
+ attributs_formulaire
+ gestionnaire_source_donnees