{"id":124632,"date":"2018-03-08T15:32:14","date_gmt":"2018-03-08T14:32:14","guid":{"rendered":"https:\/\/www.justinmind.com\/blog\/prototyping-forms-data-lists-and-data-grids\/"},"modified":"2025-02-03T16:43:50","modified_gmt":"2025-02-03T15:43:50","slug":"prototyping-forms-data-lists-and-data-grids","status":"publish","type":"post","link":"https:\/\/www.justinmind.com\/fr\/aide\/prototypage-formulaires-listes-et-grilles-de-donnees","title":{"rendered":"Visualisation des donn\u00e9es"},"content":{"rendered":"<div class=\"embed-container\"><iframe loading=\"lazy\" src=\"https:\/\/player.vimeo.com\/video\/781862975\" width=\"640\" height=\"564\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n<p>Imaginez que vous soyez en train de cr\u00e9er un prototype pour une application destin\u00e9e \u00e0 g\u00e9rer les clients de votre entreprise. Comme votre entreprise compte de nombreux clients, vous aurez besoin d&rsquo;un moyen de les afficher en vrac, \u00e9ventuellement sous forme de cartes ou de tableaux. Vous aurez \u00e9galement besoin d&rsquo;un moyen de modifier ou de supprimer des clients individuels de la liste et de faire en sorte que ces modifications soient conserv\u00e9es dans les diff\u00e9rents \u00e9crans de votre prototype. Un tableau de texte ordinaire peut fonctionner, mais il n&rsquo;est pas tr\u00e8s dynamique et il est difficile \u00e0 maintenir si vos donn\u00e9es changent au fil du temps. Comment cr\u00e9er un prototype ? Dans Justinmind, ce que vous cherchez, ce sont des fiches de donn\u00e9es. Une base de donn\u00e9es est une liste d&rsquo;informations, similaire \u00e0 une base de donn\u00e9es ou \u00e0 une feuille de calcul. Les donn\u00e9es peuvent \u00eatre du texte ou des images, et se composent de champs (titres de colonnes) et d&rsquo;enregistrements (lignes). Suivez cet article pour apprendre \u00e0 utiliser les donn\u00e9es dans vos prototypes :    <\/p>\n<h2><a id=\"create-data-master\"><\/a>Cr\u00e9er une base de donn\u00e9es<\/h2>\n<p>Vous utiliserez une base de donn\u00e9es pour stocker les informations relatives \u00e0 vos clients. Voici comment en cr\u00e9er une : <\/p>\n<ol>\n<li>Regardez la palette Data Masters dans Justinmind. Si vous ne la voyez pas, allez dans le menu Fen\u00eatre et cochez l&rsquo;option Data Masters \u00e0 afficher. <\/li>\n<li>Cliquez sur le bouton \u00ab\u00a0+\u00a0\u00bb dans la palette pour cr\u00e9er une nouvelle base de donn\u00e9es. Voici ce qu&rsquo;il faut faire ensuite :\n<ul class=\"hidden-bullet\">\n<li>\n<div class=\"embed-container\"><iframe loading=\"lazy\" src=\"https:\/\/player.vimeo.com\/video\/450266217\" width=\"640\" height=\"564\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n<\/li>\n<li><strong>a.<\/strong>  Saisissez un nom pour la base de donn\u00e9es. Dans cet exemple, appelez-le \u00ab\u00a0Clients\u00a0\u00bb. <\/li>\n<li><strong>b.<\/strong>  Cliquez sur le bouton \u00ab\u00a0+\u00a0\u00bb pour ajouter un champ. Un champ est le nom d&rsquo;une colonne de donn\u00e9es. Cr\u00e9ez quatre champs : \u00ab\u00a0Nom\u00a0\u00bb, \u00ab\u00a0Revenu\u00a0\u00bb, \u00ab\u00a0Contact\u00a0\u00bb et \u00ab\u00a0G\u00e9r\u00e9 par :\u00a0\u00bb.  <\/li>\n<li><strong>c.<\/strong>  S\u00e9lectionnez le type de donn\u00e9es que vous ajoutez. Dans cet exemple, vous n&rsquo;ajoutez que du texte ; laissez donc le type \u00ab\u00a0texte\u00a0\u00bb. <\/li>\n<li><strong>d.<\/strong>  Cliquez sur \u00ab\u00a0OK\u00a0\u00bb pour enregistrer vos donn\u00e9es de base.<\/li>\n<\/ul>\n<\/li>\n<li>Revenez \u00e0 la palette Data Masters et cliquez avec le bouton droit de la souris sur le Data Master que vous venez de cr\u00e9er. Un nouvel onglet appara\u00eet : Voir et modifier les enregistrements\u00a0\u00bb. <\/li>\n<li>Vous trouverez un \u00ab\u00a0texte mod\u00e8le\u00a0\u00bb dans chaque enregistrement. Cliquez sur un enregistrement pour le modifier et saisir des informations ou des donn\u00e9es. <\/li>\n<li>Cliquez sur le bouton \u00ab\u00a0+\u00a0\u00bb pour ajouter d&rsquo;autres enregistrements.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-44150\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Add-record.png\" alt=\"Bouton Plus survol\u00e9 pour ajouter un nouvel enregistrement\" width=\"1067\" height=\"880\"><br \/>\n Pour supprimer un enregistrement, s\u00e9lectionnez-le en cliquant sur la case \u00e0 cocher situ\u00e9e \u00e0 c\u00f4t\u00e9, puis cliquez sur le bouton \u00ab\u00a0supprimer\u00a0\u00bb.<\/li>\n<\/ol>\n<h3>Importer des donn\u00e9es<\/h3>\n<p>Vous pouvez \u00e9galement cr\u00e9er une nouvelle fiche de donn\u00e9es directement \u00e0 partir d&rsquo;un fichier .csv : Acc\u00e9dez \u00e0 la palette Data Masters et cliquez sur le bouton \u00ab\u00a0Importer\u00a0\u00bb.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-44152\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Import-data-csv.png\" alt=\"Bouton d'importation en surbrillance\" width=\"828\" height=\"394\"><br \/>\nUne nouvelle bo\u00eete de dialogue s&rsquo;affiche, dans laquelle vous pouvez nommer votre base de donn\u00e9es, s\u00e9lectionner le fichier .csv et choisir un d\u00e9limiteur de champ.<\/p>\n<div><strong>Remarque :<\/strong> la premi\u00e8re ligne de votre fichier .csv sera utilis\u00e9e comme nom de champ.<\/div>\n<h2><a id=\"display-data\"><\/a>Afficher les donn\u00e9es<\/h2>\n<p>Maintenant que vous avez saisi toutes les informations relatives \u00e0 vos clients dans une base de donn\u00e9es, il est temps d&rsquo;afficher les donn\u00e9es sur le canevas. Dans cet exemple, vous apprendrez \u00e0 afficher les informations de deux mani\u00e8res : sous forme de carte avec plus de d\u00e9tails et sous forme de liste compacte avec moins de d\u00e9tails. <\/p>\n<h3>Grilles de donn\u00e9es<\/h3>\n<p>Vous commencerez par cr\u00e9er un pr\u00e9sentoir de cartes :<\/p>\n<ol>\n<li>Allez dans le menu d\u00e9roulant de la barre d&rsquo;outils et regardez la section \u00ab\u00a0Contenu dynamique\u00a0\u00bb.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-44154\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Data-grid.png\" alt=\"Grille de donn\u00e9es dans la barre d'outils\" width=\"661\" height=\"414\"><\/li>\n<li>Cliquez sur le widget Grille de donn\u00e9es et vous verrez appara\u00eetre une nouvelle fen\u00eatre :\n<ul class=\"hidden-bullet\">\n<li><video class=\"lazyload\" style=\"max-width: 820px; width: 100%; padding: 20px 0px;\" preload=\"auto\" loop=\"loop\" muted=\"\" width=\"100%\" height=\"100%\" data-autoplay=\"\" data-poster=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/Add-fields-to-data-grid.png\"><source src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/Add-fields-to-data-grid.mp4\" type=\"video\/mp4\"><img decoding=\"async\" src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/Add-fields-to-data-grid.png\" alt=\"Ajoutez un nom \u00e0 la grille de donn\u00e9es et d\u00e9placez les champs pour les remplir.\"><\/source><\/video><\/li>\n<li><strong>a.<\/strong>  Donnez un nom \u00e0 votre grille de donn\u00e9es. Pour correspondre \u00e0 l&rsquo;exemple, nommez-la \u00ab\u00a0ClientCard\u00a0\u00bb. <\/li>\n<li><strong>b.<\/strong>  S\u00e9lectionnez la base de donn\u00e9es \u00ab\u00a0Clients\u00a0\u00bb que vous avez cr\u00e9\u00e9e pr\u00e9c\u00e9demment pour remplir la grille de donn\u00e9es.<\/li>\n<li><strong>c.<\/strong> Cliquez sur le bouton \u00ab\u00a0&gt;&gt;\u00a0\u00bb pour d\u00e9placer tous les champs dans la grille de donn\u00e9es.<\/li>\n<li>Cliquez sur \u00ab\u00a0OK\u00a0\u00bb et placez la grille de donn\u00e9es sur le canevas.<\/li>\n<\/ul>\n<\/li>\n<li>Examinez de plus pr\u00e8s la grille de donn\u00e9es. Vous verrez :<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-44157\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Data-grid-contents.png\" alt=\"Le contenu de la grille de donn\u00e9es est d\u00e9velopp\u00e9\" width=\"739\" height=\"542\"><\/p>\n<ol class=\"image-bullet\">\n<li>Les champs que vous avez nomm\u00e9s pr\u00e9c\u00e9demment. Il s&rsquo;agit d&rsquo;\u00e9l\u00e9ments de texte ordinaires.<\/li>\n<li>Les enregistrements du ma\u00eetre des donn\u00e9es. Ils apparaissent entre parenth\u00e8ses et affichent des donn\u00e9es pendant la simulation. <\/li>\n<\/ol>\n<p>D\u00e9veloppez le contenu de la grille de donn\u00e9es dans la palette des calques et vous verrez un \u00e9l\u00e9ment appel\u00e9 \u00ab\u00a0cellule de la grille\u00a0\u00bb. La cellule de la grille sert d&rsquo;aper\u00e7u de l&rsquo;aspect de toutes les cellules de la grille de donn\u00e9es et tous les changements ou modifications que vous apportez \u00e0 cette cellule appara\u00eetront \u00e9galement dans toutes les autres cellules. Cliquez sur le bouton \u00ab\u00a0Play\u00a0\u00bb pour simuler votre prototype et voir comment votre grille de donn\u00e9es affiche toutes les donn\u00e9es que vous avez saisies dans la base de donn\u00e9es. <\/p>\n<p><video class=\"lazyload\" style=\"max-width: 820px; width: 100%; padding: 20px 0px;\" preload=\"auto\" loop=\"loop\" muted=\"\" width=\"100%\" height=\"100%\" data-autoplay=\"\" data-poster=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/Simulate-data-grid.png\"><source src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/Simulate-data-grid.mp4\" type=\"video\/mp4\"><img decoding=\"async\" src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/Simulate-data-grid.png\" alt=\"Simulation d'une grille de donn\u00e9es\"><\/source><\/video><\/li>\n<li>Maintenant que vous savez comment une grille de donn\u00e9es est structur\u00e9e, vous pouvez personnaliser son apparence :\n<ul class=\"hidden-bullet\">\n<li><strong>a.<\/strong> Appuyez sur la touche <kbd>A<\/kbd> pour activer l&rsquo;outil S\u00e9lection directe, qui vous permettra de s\u00e9lectionner facilement des \u00e9l\u00e9ments \u00e0 l&rsquo;int\u00e9rieur de la grille de donn\u00e9es.<\/li>\n<li><strong>a.<\/strong>  S\u00e9lectionnez les \u00e9l\u00e9ments de texte \u00ab\u00a0Nom\u00a0\u00bb, \u00ab\u00a0Revenu\u00a0\u00bb et \u00ab\u00a0Contact\u00a0\u00bb et supprimez-les.<\/li>\n<li><strong>b.<\/strong>  Maintenant qu&rsquo;il y a plus d&rsquo;espace dans la cellule, d\u00e9placez les \u00e9l\u00e9ments de texte et les champs de donn\u00e9es restants dans la cellule comme vous le souhaitez.<\/li>\n<li><strong>c.<\/strong> Revenez au mode de s\u00e9lection normal en appuyant sur <kbd>V<\/kbd>. La cellule de la grille \u00e9tant toujours s\u00e9lectionn\u00e9e, utilisez les indicateurs pour redimensionner la cellule afin qu&rsquo;elle soit plus large et plus longue.<\/li>\n<li><strong>d.<\/strong> Placez deux \u00e9l\u00e9ments du bouton <kbd>B<\/kbd> dans la cellule de la grille, en les nommant \u00ab\u00a0Modifier\u00a0\u00bb et \u00ab\u00a0Supprimer\u00a0\u00bb. Vous pouvez maintenir la <kbd>touche Commande<\/kbd> (sur Mac) ou <kbd>Contr\u00f4le<\/kbd> (sur Windows) enfonc\u00e9e pour les faire glisser \u00e0 l&rsquo;int\u00e9rieur. Vous les utiliserez ult\u00e9rieurement pour modifier et supprimer des clients de la base de donn\u00e9es. <\/li>\n<li><strong>e.<\/strong>  S\u00e9lectionnez l&rsquo;ensemble de la grille de donn\u00e9es et acc\u00e9dez \u00e0 la palette Propri\u00e9t\u00e9s. Modifiez le nombre de colonnes \u00e0 3 et augmentez l&rsquo;espacement vertical et horizontal entre les cellules. <\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<p>Vous pouvez personnaliser la grille de donn\u00e9es comme vous le souhaitez. Pour correspondre \u00e0 l&rsquo;exemple, vous pouvez \u00e9galement modifier la famille, la taille et la couleur de la police, ainsi que le style des boutons. Voici \u00e0 quoi ressemble le tableau de bord de la carte client lorsque vous effectuez une simulation : <\/p>\n<p><video class=\"lazyload\" style=\"max-width: 820px; width: 100%; padding: 20px 0px;\" preload=\"auto\" loop=\"loop\" muted=\"\" width=\"100%\" height=\"100%\" data-autoplay=\"\" data-poster=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/Data-grid-preview.png\"><source src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/Data-grid-preview.mp4\" type=\"video\/mp4\"><img decoding=\"async\" src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/Data-grid-preview.png\" alt=\"La vue de simulation de la grille de donn\u00e9es\"><\/source><\/video><\/p>\n<h3>Listes de donn\u00e9es<\/h3>\n<p>Vous allez maintenant cr\u00e9er une liste compacte d&rsquo;informations sur les clients sous la forme d&rsquo;une liste de donn\u00e9es :<\/p>\n<ol>\n<li>Acc\u00e9dez \u00e0 la palette \u00c9crans et cliquez sur le bouton \u00ab\u00a0+\u00a0\u00bb pour ajouter un nouvel \u00e9cran. Nommez-le \u00ab\u00a0\u00c9cran 2\u00a0\u00bb.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-44163\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Add-new-screen-data.png\" alt=\"Ajouter un nouvel \u00e9cran en surbrillance\" width=\"1181\" height=\"752\"><\/li>\n<li>Allez dans le menu d\u00e9roulant de la barre d&rsquo;outils et regardez la section \u00ab\u00a0Contenu dynamique\u00a0\u00bb.<\/li>\n<li>Cliquez sur le widget Liste de donn\u00e9es et vous verrez une fen\u00eatre contextuelle :\n<ul class=\"hidden-bullet\">\n<li><strong>a.<\/strong>  Nommez la liste de donn\u00e9es \u00ab\u00a0ListeClients\u00a0\u00bb.<\/li>\n<li><strong>b.<\/strong>  S\u00e9lectionnez la base de donn\u00e9es \u00ab\u00a0Clients\u00a0\u00bb pour remplir la liste de donn\u00e9es.<\/li>\n<li><strong>c.<\/strong>  Comme vous souhaitez que l&rsquo;affichage de cette carte soit moins d\u00e9taill\u00e9, n&rsquo;incluez que certains des champs de la liste de donn\u00e9es.<video class=\"lazyload\" style=\"max-width: 820px; width: 100%; padding: 20px 0px;\" preload=\"auto\" loop=\"loop\" muted=\"\" width=\"100%\" height=\"100%\" data-autoplay=\"\" data-poster=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/Create-data-list.png\"><source src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/Create-data-list.mp4\" type=\"video\/mp4\"><img decoding=\"async\" src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/Create-data-list.png\" alt=\"Ajouter des champs \u00e0 la liste de donn\u00e9es\"><\/source><\/video>Cliquez sur les diff\u00e9rents champs et cliquez sur le bouton \u00ab\u00a0&gt;\u00a0\u00bb pour les d\u00e9placer dans la liste des donn\u00e9es. Pour correspondre \u00e0 l&rsquo;exemple, ne tenez pas compte du champ \u00ab\u00a0Revenu\u00a0\u00bb. <\/li>\n<li><strong>d.<\/strong>  Cliquez sur \u00ab\u00a0OK\u00a0\u00bb et placez la liste de donn\u00e9es sur le canevas.<\/li>\n<\/ul>\n<\/li>\n<li>Examinez de plus pr\u00e8s la liste des donn\u00e9es. Vous verrez :<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-44168\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Data-list-contents.png\" alt=\"Couches de la liste de donn\u00e9es\" width=\"885\" height=\"606\"><\/p>\n<ol class=\"image-bullet\">\n<li>Les champs que vous avez nomm\u00e9s pr\u00e9c\u00e9demment.<\/li>\n<li>Les enregistrements du ma\u00eetre des donn\u00e9es. Ils apparaissent entre parenth\u00e8ses et affichent des donn\u00e9es pendant la simulation. <\/li>\n<\/ol>\n<p>D\u00e9veloppez le contenu de la liste de donn\u00e9es dans la palette Calques et vous verrez un \u00e9l\u00e9ment appel\u00e9 \u00ab\u00a0Ligne actuelle\u00a0\u00bb. Tout comme la cellule de la grille de donn\u00e9es, la ligne actuelle sert d&rsquo;aper\u00e7u de l&rsquo;aspect de toutes les cellules de la liste de donn\u00e9es et tout changement ou modification que vous apportez \u00e0 cette cellule appara\u00eetra \u00e9galement dans toutes les autres cellules. <\/li>\n<li>Cliquez sur \u00ab\u00a0Simuler\u00a0\u00bb et voyez \u00e0 quoi ressemble votre liste de donn\u00e9es.<\/li>\n<li>Maintenant que vous savez comment une liste de donn\u00e9es est structur\u00e9e, vous pouvez personnaliser son apparence :\n<ul class=\"hidden-bullet\">\n<li><strong>a.<\/strong>  S\u00e9lectionnez \u00ab\u00a0Header\u00a0\u00bb (l&rsquo;en-t\u00eate de la liste de donn\u00e9es) et acc\u00e9dez \u00e0 la palette Propri\u00e9t\u00e9s. Modifiez la \u00ab\u00a0Disposition\u00a0\u00bb en horizontal avec alignement centr\u00e9.<br \/>\nS\u00e9lectionnez Current row et utilisez les indicateurs qui apparaissent pour faire glisser vers le bas, ce qui augmentera la taille des lignes de la liste de donn\u00e9es. Modifiez la \u00ab\u00a0Disposition\u00a0\u00bb pour qu&rsquo;elle soit horizontale avec un alignement centr\u00e9.  <\/li>\n<li><strong>b.<\/strong>  S\u00e9lectionnez l&rsquo;ensemble de la liste de donn\u00e9es et acc\u00e9dez \u00e0 la palette Propri\u00e9t\u00e9s. Changez les couleurs des lignes Pair\/Impair en transparent. <\/li>\n<li><strong>c.<\/strong>  Cliquez avec le bouton droit de la souris sur la liste des donn\u00e9es et s\u00e9lectionnez \u00ab\u00a0Nouvelle colonne\u00a0\u00bb.<\/li>\n<li><strong>d.<\/strong> Utilisez l&rsquo;outil de s\u00e9lection directe <kbd>A<\/kbd> pour placer deux <kbd>\u00e9l\u00e9ments de<\/kbd>texte \u00e0 l&rsquo;int\u00e9rieur de la cellule de la ligne, en \u00e9tiquetant l&rsquo;un \u00ab\u00a0Modifier\u00a0\u00bb et l&rsquo;autre \u00ab\u00a0Supprimer\u00a0\u00bb. Vous les utiliserez ult\u00e9rieurement pour modifier et supprimer des clients de la base de donn\u00e9es. <\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<p>Vous pouvez personnaliser la liste de donn\u00e9es comme vous le souhaitez. Pour correspondre \u00e0 l&rsquo;exemple, vous pouvez \u00e9galement modifier la famille de polices, la taille et la couleur du texte, et supprimer certaines bordures. Voici \u00e0 quoi ressemble le tableau de bord de la liste des clients lorsque vous effectuez une simulation : <\/p>\n<p><video class=\"lazyload\" style=\"max-width: 820px; width: 100%; padding: 20px 0px;\" preload=\"auto\" loop=\"loop\" muted=\"\" width=\"100%\" height=\"100%\" data-autoplay=\"\" data-poster=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2023\/01\/Data-list-preview.png\"><source src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2023\/01\/Data-list-preview.mp4\" type=\"video\/mp4\"><img decoding=\"async\" src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2023\/01\/Data-list-preview.png\" alt=\"La vue de simulation de la grille de donn\u00e9es\"><\/source><\/video><\/p>\n<h2><a id=\"modify-data\"><\/a>Modifier les donn\u00e9es<\/h2>\n<p>Jusqu&rsquo;\u00e0 pr\u00e9sent, vous avez cr\u00e9\u00e9 et personnalis\u00e9 l&rsquo;apparence des informations sur les clients de plusieurs fa\u00e7ons. Vous allez maintenant apprendre \u00e0 ajouter, modifier et supprimer des enregistrements dans ces listes. <\/p>\n<ol>\n<li>Vous devez d&rsquo;abord cr\u00e9er un nouvel \u00e9cran. Nommez-le \u00ab\u00a0Modifier la carte\u00a0\u00bb &#8211; c&rsquo;est sur cet \u00e9cran que vous modifierez les informations relatives \u00e0 un client s\u00e9lectionn\u00e9. <\/li>\n<li>Faites glisser quatre champs de texte d&rsquo;entr\u00e9e <kbd>F<\/kbd> vers le canevas. Ajoutez un bouton sous le formulaire et renommez-le \u00ab\u00a0Modifier\u00a0\u00bb. Ajoutez un autre bouton \u00e0 c\u00f4t\u00e9 et nommez-le \u00ab\u00a0Annuler\u00a0\u00bb. Personnalisez l&rsquo;apparence du formulaire comme vous le souhaitez.   <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-44174\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Modify-form.png\" alt=\"Le formulaire de modification avec quatre champs de texte et deux boutons\" width=\"1020\" height=\"682\"><\/li>\n<li>Cliquez avec le bouton droit de la souris sur cet \u00e9cran dans la palette d&rsquo;\u00e9crans et cliquez sur \u00ab\u00a0Dupliquer\u00a0\u00bb. Nommez cet \u00e9cran \u00ab\u00a0Nouvelle carte\u00a0\u00bb. <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-44176\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Duplicate-screen.png\" alt=\"Cliquez avec le bouton droit de la souris sur un \u00e9cran pour afficher les options de duplication.\" width=\"1072\" height=\"746\">  Ne changez rien \u00e0 cet \u00e9cran, mais remplacez le bouton par \u00ab\u00a0Ajouter\u00a0\u00bb au lieu de \u00ab\u00a0Modifier\u00a0\u00bb.<\/li>\n<\/ol>\n<h3>Ajouter de nouveaux dossiers clients<\/h3>\n<p>Dans cette section, vous apprendrez \u00e0 ajouter de nouveaux enregistrements \u00e0 une base de donn\u00e9es.<\/p>\n<ol>\n<li>Acc\u00e9dez \u00e0 l&rsquo;\u00e9cran du tableau de bord des cartes et placez un \u00e9l\u00e9ment de bouton sur le canevas, en le nommant \u00ab\u00a0Nouveau\u00a0\u00bb.<\/li>\n<li>Une fois ce bouton s\u00e9lectionn\u00e9, cr\u00e9ez un \u00e9v\u00e9nement <strong>\u00ab\u00a0On Click<\/strong> + <strong>Navigate To\u00a0\u00bb<\/strong>, qui renvoie \u00e0 l&rsquo;\u00e9cran \u00ab\u00a0New Client\u00a0\u00bb que vous avez cr\u00e9\u00e9 plus t\u00f4t.<\/li>\n<li>Acc\u00e9dez \u00e0 l&rsquo;\u00e9cran Nouveau client et s\u00e9lectionnez le bouton \u00ab\u00a0Ajouter\u00a0\u00bb. Cr\u00e9ez un \u00e9v\u00e9nement <strong>On Click<\/strong> + <strong>Data Master Action<\/strong>. Cliquez sur le bouton \u00ab\u00a0Nouveau\u00a0\u00bb et vous verrez appara\u00eetre le constructeur de l&rsquo;expression de valeur. Voici la structure de l&rsquo;\u00e9v\u00e9nement Data Master Action &#8211; New :  <\/li>\n<\/ol>\n<ul>\n<li>Chaque \u00ab\u00a0champ\u00a0\u00bb de la base de donn\u00e9es.<\/li>\n<li>Les valeurs qui seront ajout\u00e9es \u00e0 la base de donn\u00e9es et qui seront refl\u00e9t\u00e9es dans la liste et la grille de donn\u00e9es.<\/li>\n<li>Faites glisser chaque champ de texte correspondant dans les espaces libres de l&rsquo;expression et cliquez sur \u00ab\u00a0OK\u00a0\u00bb.<\/li>\n<\/ul>\n<div class=\"embed-container\"><iframe loading=\"lazy\" src=\"https:\/\/player.vimeo.com\/video\/744897674?h=a679248f19\" width=\"640\" height=\"564\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n<ul>\n<li>Le bouton \u00ab\u00a0Ajouter\u00a0\u00bb \u00e9tant toujours s\u00e9lectionn\u00e9, cr\u00e9ez un \u00e9v\u00e9nement <strong>\u00ab\u00a0On Click<\/strong> + <strong>Navigate To\u00a0\u00bb<\/strong>, en s\u00e9lectionnant le bouton radio \u00ab\u00a0Previous screen\u00a0\u00bb (\u00e9cran pr\u00e9c\u00e9dent) comme cible du lien.<\/li>\n<li>S\u00e9lectionnez le bouton \u00ab\u00a0Annuler\u00a0\u00bb et cr\u00e9ez le m\u00eame \u00e9v\u00e9nement qu&rsquo;\u00e0 l&rsquo;\u00e9tape pr\u00e9c\u00e9dente.<\/li>\n<li>Allez dans l&rsquo;\u00e9cran du tableau de bord de la liste et placez un bouton sur le canevas, en l&rsquo;intitulant \u00ab\u00a0Nouveau\u00a0\u00bb. Cr\u00e9ez un \u00e9v\u00e9nement <strong>\u00ab\u00a0On Click<\/strong> + <strong>Navigate To\u00a0\u00bb<\/strong> pour ce bouton, qui renvoie \u00e0 l&rsquo;\u00e9cran \u00ab\u00a0New Client\u00a0\u00bb. <\/li>\n<\/ul>\n<p>Les deux \u00e9crans doivent maintenant \u00eatre reli\u00e9s \u00e0 l&rsquo;endroit o\u00f9 vous pouvez ajouter de nouvelles informations \u00e0 la base de donn\u00e9es. Cliquez sur le bouton \u00ab\u00a0Play\u00a0\u00bb pour simuler votre prototype. Appuyez sur le bouton \u00ab\u00a0Nouveau\u00a0\u00bb, qui vous renvoie \u00e0 l&rsquo;\u00e9cran Nouveau client. Saisissez quelques informations dans le formulaire et appuyez sur \u00ab\u00a0Ajouter\u00a0\u00bb. Un nouvel enregistrement est ajout\u00e9 \u00e0 la fiche.    <\/p>\n<h2>Modifier les dossiers des clients<\/h2>\n<p>Pour modifier les enregistrements des clients, vous aurez besoin d&rsquo;un moyen de s\u00e9lectionner une ligne sp\u00e9cifique \u00e0 modifier. Vous utiliserez les fonctionnalit\u00e9s sp\u00e9ciales de \u00ab\u00a0Current row\u00a0\u00bb (dans les listes de donn\u00e9es) et \u00ab\u00a0Grid cell\u00a0\u00bb (dans les grilles de donn\u00e9es) pour s\u00e9lectionner une ligne &#8211; elles sont capables de d\u00e9tecter la ligne avec laquelle vous interagissez pendant la simulation. Apr\u00e8s avoir s\u00e9lectionn\u00e9 une ligne, vous devez stocker les informations relatives \u00e0 cette ligne quelque part afin de pouvoir les placer dans un champ de texte de saisie pour les modifier. Dans cet exemple, vous utiliserez une variable, qui peut stocker des lignes enti\u00e8res d&rsquo;informations sur les clients \u00e0 la fois. <\/p>\n<ol>\n<li>Ouvrez la palette Variables et cr\u00e9ez une variable nomm\u00e9e \u00ab\u00a0SelectedRow\u00a0\u00bb avec une valeur par d\u00e9faut vide.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-44191\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Add-new-variable-data.png\" alt=\"Variable ajout\u00e9e dans la palette des variables\" width=\"1353\" height=\"575\">  Si vous ne voyez pas la palette Variables, assurez-vous qu&rsquo;elle est visible dans le menu Fen\u00eatre.<\/li>\n<li>Acc\u00e9dez au tableau de bord de la carte et s\u00e9lectionnez le bouton \u00ab\u00a0Modifier\u00a0\u00bb que vous avez plac\u00e9 dans la cellule de la grille plus t\u00f4t.<\/li>\n<li>Cr\u00e9ez un \u00e9v\u00e9nement <strong>On Click<\/strong> + <strong>Set Value<\/strong>, en s\u00e9lectionnant la variable SelectedRow comme cible de l&rsquo;action. Pour la valeur, cliquez sur &lsquo;Calculated&rsquo; et sur le lien &lsquo;Add expression&rsquo;.<\/li>\n<li>Vous verrez appara\u00eetre le constructeur d&rsquo;expression de valeur. Faites glisser la cellule de la grille vers l&rsquo;espace libre de l&rsquo;expression. Il peut \u00eatre plus facile de la s\u00e9lectionner et de la faire glisser \u00e0 partir des calques du constructeur plut\u00f4t que de l&rsquo;aper\u00e7u du canevas. Cliquez sur \u00ab\u00a0OK\u00a0\u00bb pour terminer la construction de l&rsquo;expression. Cet \u00e9v\u00e9nement transf\u00e8re les valeurs de la carte sur laquelle vous venez de cliquer vers la variable.   <\/li>\n<li>Revenez \u00e0 la palette \u00c9v\u00e9nements pour voir l&rsquo;\u00e9v\u00e9nement que vous venez de cr\u00e9er. Ajoutez un \u00e9v\u00e9nement <strong>\u00ab\u00a0On Click<\/strong> + <strong>Navigate To\u00a0\u00bb<\/strong> pour le bouton \u00ab\u00a0Edit\u00a0\u00bb, qui renvoie \u00e0 l&rsquo;\u00e9cran \u00ab\u00a0Edit Client\u00a0\u00bb. <\/li>\n<li>Acc\u00e9dez \u00e0 l&rsquo;\u00e9cran Modifier le client. Double-cliquez sur le Canvas pour s\u00e9lectionner l&rsquo;\u00e9cran de base. <\/li>\n<li>Cr\u00e9ez un \u00e9v\u00e9nement <strong>On Page Load<\/strong> + <strong>Set Value<\/strong>, en s\u00e9lectionnant le champ de texte \u00ab\u00a0Name\u00a0\u00bb comme cible de l&rsquo;action. Pour la valeur, cliquez sur \u00ab\u00a0Calcul\u00e9\u00a0\u00bb, puis sur \u00ab\u00a0Ajouter une expression\u00a0\u00bb. Vous verrez appara\u00eetre le constructeur d&rsquo;expression de valeur. Pour construire l&rsquo;expression :   <\/li>\n<\/ol>\n<ul>\n<li>Faites glisser la fonction <strong>S\u00e9lectionner<\/strong> vers l&rsquo;espace libre de l&rsquo;expression.<\/li>\n<li>Vous verrez deux nouveaux espaces appara\u00eetre dans l&rsquo;expression. Faites glisser la \u00ab\u00a0SelectedRow\u00a0\u00bb vers l&rsquo;espace de gauche. <\/li>\n<li>Cliquez sur l&rsquo;onglet Ma\u00eetrise des donn\u00e9es dans le constructeur et d\u00e9veloppez la ma\u00eetrise des donn\u00e9es afin de voir les attributs (les champs de la ma\u00eetrise des donn\u00e9es).Faites glisser l&rsquo;attribut \u00ab\u00a0Nom\u00a0\u00bb vers le deuxi\u00e8me espace de l&rsquo;expression.<\/li>\n<\/ul>\n<p>R\u00e9p\u00e9tez les \u00e9tapes 6 et 7 pour les autres champs de texte, en veillant \u00e0 modifier \u00e0 chaque fois la cible de l&rsquo;action et l&rsquo;attribut de l&rsquo;expression.<\/p>\n<div class=\"embed-container\"><iframe loading=\"lazy\" src=\"https:\/\/player.vimeo.com\/video\/744901851?h=3736e734a9\" width=\"640\" height=\"564\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n<ol>\n<li>Vous allez maintenant cr\u00e9er les \u00e9v\u00e9nements permettant de modifier les informations relatives au client. S\u00e9lectionnez le bouton \u00ab\u00a0Modifier\u00a0\u00bb au bas du formulaire et cr\u00e9ez un \u00e9v\u00e9nement <strong>\u00ab\u00a0On Click<\/strong> + <strong>Data Master Action<\/strong> &#8211; <strong>Modify<\/strong> \u00ab\u00a0. Le constructeur d&rsquo;expression de valeur s&rsquo;ouvre alors. Voici comment fonctionne cet \u00e9v\u00e9nement :\n<ul class=\"hidden-bullet\">\n<li>L&rsquo;espace ouvert o\u00f9 vous d\u00e9finirez la rang\u00e9e qui sera modifi\u00e9e.<\/li>\n<li>Les espaces libres o\u00f9 vous indiquerez les informations qui seront modifi\u00e9es dans la base de donn\u00e9es.<\/li>\n<\/ul>\n<\/li>\n<li>Placez la variable SelectedRow dans le premier espace libre \u00e0 gauche. Faites glisser les champs de texte de saisie correspondants vers les espaces libres de l&rsquo;expression et cliquez sur \u00ab\u00a0OK\u00a0\u00bb pour terminer la construction de l&rsquo;\u00e9v\u00e9nement. <\/li>\n<li>De retour sur le canevas, et avec le bouton \u00ab\u00a0Modifier\u00a0\u00bb toujours s\u00e9lectionn\u00e9, cr\u00e9ez un \u00e9v\u00e9nement <strong>\u00ab\u00a0On Click<\/strong> + <strong>Navigate To\u00a0\u00bb<\/strong>, en s\u00e9lectionnant le bouton radio \u00ab\u00a0Previous screen\u00a0\u00bb (\u00e9cran pr\u00e9c\u00e9dent).<\/li>\n<li>S\u00e9lectionnez le bouton \u00ab\u00a0Annuler\u00a0\u00bb et cr\u00e9ez un \u00e9v\u00e9nement <strong>\u00ab\u00a0On Click<\/strong> + <strong>Navigate To\u00a0\u00bb<\/strong> en s\u00e9lectionnant la case d&rsquo;option \u00ab\u00a0Previous screen\u00a0\u00bb (\u00e9cran pr\u00e9c\u00e9dent).<\/li>\n<li>R\u00e9p\u00e9tez les \u00e9tapes 2 \u00e0 5 sur l&rsquo;\u00e9cran du tableau de bord de la liste, en faisant glisser la ligne actuelle dans l&rsquo;espace libre de l&rsquo;expression lorsque vous d\u00e9finissez la valeur de la variable SelectedRow.<\/li>\n<\/ol>\n<p>Cliquez sur le bouton \u00ab\u00a0Play\u00a0\u00bb pour simuler votre prototype. Cliquez sur le bouton \u00ab\u00a0Modifier\u00a0\u00bb de l&rsquo;une des lignes, ce qui vous conduira \u00e0 l&rsquo;\u00e9cran \u00ab\u00a0Modifier le client\u00a0\u00bb. Saisissez quelques informations dans le formulaire et cliquez sur \u00ab\u00a0Modifier\u00a0\u00bb. Vous verrez les informations modifi\u00e9es sur le client dans la fiche.   <\/p>\n<h2><a id=\"delete-records\"><\/a>Effacer les donn\u00e9es<\/h2>\n<p>Ensuite, vous apprendrez \u00e0 supprimer les dossiers des clients.<\/p>\n<ol>\n<li>Acc\u00e9dez \u00e0 l&rsquo;\u00e9cran Tableau de bord de la carte. S\u00e9lectionnez le bouton \u00ab\u00a0Supprimer\u00a0\u00bb que vous avez ajout\u00e9 plus t\u00f4t dans la cellule de la grille et cr\u00e9ez un \u00e9v\u00e9nement <strong>\u00ab\u00a0On Click<\/strong> + <strong>Data Master Action<\/strong> &#8211; <strong>Delete\u00a0\u00bb<\/strong>. Cr\u00e9ez un \u00e9v\u00e9nement On Click + Data Master Action &#8211; Delete. Vous verrez appara\u00eetre le constructeur Value Expression.  <\/li>\n<li>Examinez l&rsquo;expression de plus pr\u00e8s et vous verrez un espace libre. C&rsquo;est l\u00e0 que vous indiquerez la ligne qui sera supprim\u00e9e de la base de donn\u00e9es.Faites glisser la cellule de la grille dans l&rsquo;espace ouvert de l&rsquo;expression. Faites glisser la cellule de la grille dans l&rsquo;espace ouvert de l&rsquo;expression. Il peut \u00eatre plus facile de la s\u00e9lectionner \u00e0 partir des couches de la bo\u00eete de dialogue.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-44182\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Delete-action-1.png\" alt=\"Cellule de la grille dans l'expression\" width=\"1089\" height=\"574\"><br \/>\nEn raison de la fonctionnalit\u00e9 particuli\u00e8re de la cellule de la grille (et de la ligne actuelle), l&rsquo;<strong>action Data Master<\/strong> ne supprimera que la ligne sur laquelle vous avez cliqu\u00e9 sur le bouton \u00ab\u00a0Supprimer\u00a0\u00bb.<\/li>\n<li>R\u00e9p\u00e9tez les \u00e9tapes 1 et 2 sur l&rsquo;\u00e9cran Tableau de bord, en faisant glisser la ligne actuelle de la liste de donn\u00e9es dans l&rsquo;espace ouvert de l&rsquo;expression cette fois.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-44184\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Delete-action-list.png\" alt=\"Ligne actuelle dans l'expression\" width=\"1086\" height=\"499\"><\/li>\n<\/ol>\n<h3>Derni\u00e8res \u00e9tapes<\/h3>\n<p>Vous avez presque termin\u00e9 ! Il ne vous reste plus qu&rsquo;\u00e0 passer de l&rsquo;\u00e9cran du tableau de bord des cartes \u00e0 celui des listes pour voir comment vos modifications sont maintenues d&rsquo;un \u00e9cran \u00e0 l&rsquo;autre. <\/p>\n<ol>\n<li>Placez deux images <kbd>I<\/kbd> sur l&rsquo;\u00e9cran du tableau de bord des cartes. L&rsquo;une repr\u00e9sentera l&rsquo;\u00e9cran Tableau de bord des cartes et l&rsquo;autre l&rsquo;\u00e9cran Tableau de bord des listes. <\/li>\n<li>Cr\u00e9ez un \u00e9v\u00e9nement <strong>On Click<\/strong> + <strong>Navigate To sur<\/strong> l&rsquo;image du tableau de bord de la liste et cr\u00e9ez un lien vers l&rsquo;\u00e9cran du tableau de bord de la liste.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-44187\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Link-image-dashboard.png\" alt=\"Lien vers le tableau de bord de la liste\" width=\"776\" height=\"308\"><\/li>\n<li>R\u00e9p\u00e9tez les \u00e9tapes ci-dessus sur l&rsquo;\u00e9cran du tableau de bord de la liste, en liant l&rsquo;image du tableau de bord de la carte \u00e0 l&rsquo;\u00e9cran du tableau de bord de la carte.<\/li>\n<\/ol>\n<p>Voil\u00e0, c&rsquo;est fait ! Cliquez sur le bouton \u00ab\u00a0Play\u00a0\u00bb pour simuler votre prototype et voir comment vous pouvez modifier, ajouter et supprimer des dossiers de clients. <\/p>\n<p><a href=\"https:\/\/download.justinmind.com\/examples\/create-a-justinmind-datamaster.vp\">Vous pouvez t\u00e9l\u00e9charger l&rsquo;exemple ici.<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Imaginez que vous soyez en train de cr\u00e9er un prototype pour une application destin\u00e9e \u00e0 g\u00e9rer les clients de votre entreprise. Comme votre entreprise compte de&#8230;<\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[8416,8423],"tags":[],"class_list":["post-124632","post","type-post","status-publish","format-standard","hentry","category-formation","category-formulaires-et-donnees"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/posts\/124632"}],"collection":[{"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/comments?post=124632"}],"version-history":[{"count":1,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/posts\/124632\/revisions"}],"predecessor-version":[{"id":126137,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/posts\/124632\/revisions\/126137"}],"wp:attachment":[{"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/media?parent=124632"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/categories?post=124632"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/tags?post=124632"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}