{"id":124634,"date":"2019-06-14T19:52:46","date_gmt":"2019-06-14T17:52:46","guid":{"rendered":"https:\/\/www.justinmind.com\/blog\/exercises-data\/"},"modified":"2025-02-03T16:44:33","modified_gmt":"2025-02-03T15:44:33","slug":"exercises-data","status":"publish","type":"post","link":"https:\/\/www.justinmind.com\/fr\/aide\/exercices-donnees","title":{"rendered":"Listes de donn\u00e9es"},"content":{"rendered":"<p>Le widget Liste de donn\u00e9es affiche les fiches de donn\u00e9es sous forme de liste\/tableau.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-13817\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2023\/01\/display-data-master-records-data-list.png\" alt=\"affichage des donn\u00e9es fiches liste des donn\u00e9es\" width=\"755\" height=\"456\"><br \/>\nLors de la cr\u00e9ation de votre liste de donn\u00e9es, la cellule sup\u00e9rieure gauche affichera les noms des champs de votre base de donn\u00e9es. Les cellules suppl\u00e9mentaires seront affich\u00e9es avec un remplissage gris. Lorsque vous simulez votre prototype, les cellules suppl\u00e9mentaires sont remplies avec les enregistrements de la base de donn\u00e9es.  <\/p>\n<h2><a id=\"displaying-data-master-records-in-a-data-list\"><\/a>Affichage des fiches de donn\u00e9es dans une liste de donn\u00e9es<\/h2>\n<p>Apprenez \u00e0 afficher les fiches de donn\u00e9es sous forme de liste avec une liste de donn\u00e9es dans vos prototypes interactifs. Faisons-le pas \u00e0 pas :<\/p>\n<ol>\n<li>Dans un nouveau prototype Web, cr\u00e9ez une nouvelle base de donn\u00e9es en cliquant sur l&rsquo;ic\u00f4ne \u00ab\u00a0+\u00a0\u00bb dans la palette des bases de donn\u00e9es. Dans la bo\u00eete de dialogue qui s&rsquo;affiche, donnez un nom \u00e0 votre base de donn\u00e9es. Pour correspondre \u00e0 notre exemple, nommez-la \u00ab\u00a0Liste de contacts\u00a0\u00bb.  <\/li>\n<li>Ajoutez des champs \u00e0 votre base de donn\u00e9es en cliquant sur l&rsquo;ic\u00f4ne \u00ab\u00a0+\u00a0\u00bb sur le c\u00f4t\u00e9 droit. Pour correspondre \u00e0 notre exemple, cr\u00e9ez les champs suivants : Nom, Courriel, Soci\u00e9t\u00e9 et Image. <\/li>\n<li>Modifiez le type du champ d&rsquo;image en \u00ab\u00a0T\u00e9l\u00e9chargement de fichier\u00a0\u00bb et cliquez sur \u00ab\u00a0OK\u00a0\u00bb.<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:\/\/www.justinmind.com\/wp-content\/uploads\/2023\/01\/Create-a-new-Data-Master.png\"><source src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2023\/01\/Create-a-new-Data-Master.mp4\" type=\"video\/mp4\"><img decoding=\"async\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2023\/01\/Create-a-new-Data-Master.png\" alt=\"Cr\u00e9er une base de donn\u00e9es\"><\/source><\/video><\/li>\n<li>De retour dans la palette Ma\u00eetrise des donn\u00e9es, cliquez avec le bouton droit de la souris sur votre ma\u00eetrise des donn\u00e9es et s\u00e9lectionnez l&rsquo;onglet Afficher et modifier les enregistrements dans la bo\u00eete de dialogue qui s&rsquo;affiche. Cr\u00e9ez des enregistrements de donn\u00e9es, en attribuant \u00e0 chacun un nom, une adresse \u00e9lectronique, une soci\u00e9t\u00e9 et une image. Cliquez sur \u00ab\u00a0OK\u00a0\u00bb.  <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-14109\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2023\/01\/Add-datamaster-record.png\" alt=\"simuler la liste des donn\u00e9es\" width=\"755\" height=\"425\"><\/li>\n<li>Dans la bo\u00eete de dialogue qui s&rsquo;affiche, donnez un nom \u00e0 votre liste de donn\u00e9es (\u00ab\u00a0Liste de contacts\u00a0\u00bb pour correspondre \u00e0 notre exemple). S\u00e9lectionnez votre fiche de donn\u00e9es dans le menu d\u00e9roulant \u00ab\u00a0Fiches de donn\u00e9es\u00a0\u00bb. Nous voulons inclure tous les champs de la fiche de donn\u00e9es dans la liste de donn\u00e9es. Cliquez ensuite sur \u00ab\u00a0OK\u00a0\u00bb et placez votre liste de donn\u00e9es au centre du canevas.Sur le canevas, la cellule sup\u00e9rieure gauche affiche des exemples de noms de champs.<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:\/\/www.justinmind.com\/wp-content\/uploads\/2023\/01\/Create-a-data-list.png\"><source src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2023\/01\/Create-a-data-list.mp4\" type=\"video\/mp4\"><img decoding=\"async\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2023\/01\/Create-a-data-list.png\" alt=\"Ajouter des champs \u00e0 la liste de donn\u00e9es\"><\/source><\/video><\/li>\n<li>Cliquez \u00e0 nouveau sur \u00ab\u00a0Simuler\u00a0\u00bb pour simuler votre liste de donn\u00e9es avec les donn\u00e9es r\u00e9elles en place.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-14109\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2023\/01\/Simulate-a-data-grid.png\" alt=\"simuler la liste des donn\u00e9es\" width=\"755\" height=\"425\"><\/li>\n<\/ol>\n<h2><a id=\"data-list-properties\"><\/a>Propri\u00e9t\u00e9s<\/h2>\n<p>Dans la palette Propri\u00e9t\u00e9s, vous pouvez modifier les propri\u00e9t\u00e9s suivantes de votre liste de donn\u00e9es :<\/p>\n<ul>\n<li>Nombre de colonnes<\/li>\n<li>Nombre de cellules par page<\/li>\n<li>Orientation &#8211; Faites pivoter votre liste de donn\u00e9es horizontalement ou verticalement.<\/li>\n<li>Espacement &#8211; modifie l&rsquo;espacement entre les cellules<\/li>\n<\/ul>\n<h2><a id=\"customizing-a-data-list\"><\/a>Personnaliser une liste de donn\u00e9es<\/h2>\n<p>Avec Justinmind, vous pouvez personnaliser l&rsquo;apparence de votre liste de donn\u00e9es. Suivez les \u00e9tapes ci-dessous pour personnaliser les colonnes individuelles de votre liste de donn\u00e9es : <\/p>\n<ol>\n<li>Allez dans la palette Propri\u00e9t\u00e9s et modifiez le nombre de colonnes de la liste de donn\u00e9es pour qu&rsquo;il soit de trois.<\/li>\n<li>Ensuite, dans la palette Calques, s\u00e9lectionnez la cellule \u00ab\u00a0List cell 1\u00a0\u00bb dans la liste Donn\u00e9es.<\/li>\n<li>Sur le canevas, supprimez les \u00e9l\u00e9ments de texte \u00ab\u00a0Nom\u00a0\u00bb, \u00ab\u00a0Courriel\u00a0\u00bb, \u00ab\u00a0Soci\u00e9t\u00e9\u00a0\u00bb et \u00ab\u00a0Image\u00a0\u00bb pour qu&rsquo;ils correspondent \u00e0 notre exemple. Distribuez ensuite les champs de texte d&rsquo;entr\u00e9e des cellules et redimensionnez les cellules pour qu&rsquo;elles correspondent \u00e0 notre exemple ou pour qu&rsquo;elles correspondent \u00e0 votre propre exemple. <\/li>\n<li>Cliquez sur \u00ab\u00a0Simuler\u00a0\u00bb pour afficher votre liste de donn\u00e9es personnalis\u00e9e.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-14108\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2023\/01\/Customize-a-data-list.png\" alt=\"liste de donn\u00e9es personnalis\u00e9es\" width=\"755\" height=\"425\"><\/li>\n<\/ol>\n<h2><a id=\"exercise-2-sort-columns\"><\/a>Trier les colonnes<\/h2>\n<p>Nous allons maintenant apprendre \u00e0 trier les colonnes d&rsquo;une liste de donn\u00e9es de la plus grande \u00e0 la plus petite. Cela fonctionnerait \u00e9galement pour une liste de donn\u00e9es, mais dans ce cas, nous l&rsquo;ajoutons uniquement \u00e0 la liste de donn\u00e9es.<br \/>\n<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\/12\/Create-a-Sort-Example.png\"><source src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/12\/Create-a-Sort-Example.mp4\" type=\"video\/mp4\"><img decoding=\"async\" src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/12\/Create-a-Sort-Example.png\" alt=\"Cr\u00e9er un exemple de colonne de tri\"><\/source><\/video><\/p>\n<ol>\n<li>Dans le m\u00eame prototype, acc\u00e9dez \u00e0 l&rsquo;\u00e9cran \u00ab\u00a0Tableau de bord\u00a0\u00bb. Rappelez-vous que dans le dernier tutoriel, nous avons d\u00e9cid\u00e9 de ne pas inclure le champ \u00ab\u00a0Revenu\u00a0\u00bb dans cette liste de donn\u00e9es. Pour cet exemple, nous allons le r\u00e9int\u00e9grer et l&rsquo;utiliser pour trier les donn\u00e9es par revenu. Cliquez avec le bouton droit de la souris sur \u00ab\u00a0Clients\u00a0\u00bb (liste de donn\u00e9es) et s\u00e9lectionnez \u00ab\u00a0Nouvelle colonne\u00a0\u00bb.   <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\/12\/create-a-new-column.png\"><source src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/12\/create-a-new-column.mp4\" type=\"video\/mp4\"><img decoding=\"async\" src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/12\/create-a-new-column.png\" alt=\"Cr\u00e9er une nouvelle colonne de tri\"><\/source><\/video>Survolez la colonne et vous verrez appara\u00eetre une ic\u00f4ne blanche en forme de fl\u00e8che. Copiez l&rsquo;en-t\u00eate de texte \u00ab\u00a0G\u00e9r\u00e9 par\u00a0\u00bb et collez-le dans le nouvel en-t\u00eate de colonne, en le renommant \u00ab\u00a0Revenu\u00a0\u00bb.Copiez le champ \u00ab\u00a0[Clients .Managedby:]\u00a0\u00bb dans Current_Row_1 et collez-le dans la cellule de la nouvelle colonne. Dans la palette Propri\u00e9t\u00e9s, consultez le menu d\u00e9roulant \u00ab\u00a0Champ de donn\u00e9es\u00a0\u00bb et remplacez-le par [Clients .Income]. Ce champ affichera d\u00e9sormais les donn\u00e9es du champ \u00ab\u00a0Revenu\u00a0\u00bb de notre base de donn\u00e9es. De plus, placez un \u00e9l\u00e9ment de texte \u00e0 c\u00f4t\u00e9 de [Clients .Income] et \u00e9tiquetez-le \u00ab\u00a0$\u00a0\u00bb.  <\/li>\n<li>Faites glisser deux ic\u00f4nes \u00ab\u00a0fl\u00e8ches\u00a0\u00bb dans l&rsquo;en-t\u00eate \u00e0 c\u00f4t\u00e9 de \u00ab\u00a0Revenu\u00a0\u00bb. Nous les utiliserons pour trier les donn\u00e9es du revenu le plus \u00e9lev\u00e9 au plus bas. Les n\u00f4tres proviennent de la biblioth\u00e8que de widgets \u00ab\u00a0Web Components\u00a0\u00bb, mais n&rsquo;importe quel type d&rsquo;ic\u00f4ne fonctionnera.  <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-16427\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2019\/06\/SortArrows.png\" alt=\"Ajouter des fl\u00e8ches de tri\" width=\"1023\" height=\"701\"><\/li>\n<li>Cliquez sur l&rsquo;ic\u00f4ne \u00ab\u00a0up\u00a0\u00bb et cr\u00e9ez un \u00e9v\u00e9nement \u00ab\u00a0On Click\u00a0\u00bb + \u00ab\u00a0Set Value\u00a0\u00bb, en s\u00e9lectionnant la liste de donn\u00e9es comme cible de l&rsquo;action. Pour la valeur, cliquez sur le bouton radio \u00ab\u00a0Calcul\u00e9\u00a0\u00bb et sur le texte \u00ab\u00a0Ajouter une expression\u00a0\u00bb. Vous verrez appara\u00eetre le g\u00e9n\u00e9rateur d&rsquo;expression calcul\u00e9e.  <\/li>\n<li>Dans le constructeur, faites glisser la fonction \u00ab\u00a0Tri\u00a0\u00bb vers l&rsquo;espace ouvert dans l&rsquo;expression, en changeant le sens du tri en \u00ab\u00a0descendant\u00a0\u00bb. Faites glisser la base de donn\u00e9es vers le premier espace libre \u00e0 gauche. Faites glisser l&rsquo;attribut \u00ab\u00a0Revenu\u00a0\u00bb vers l&rsquo;espace de droite.  <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\/12\/Sort-Descendant.png\"><source src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/12\/Sort-Descendant.mp4\" type=\"video\/mp4\"><img decoding=\"async\" src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/12\/Sort-Descendant.png\" alt=\"Expression de tri des descendants\"><\/source><\/video>Comme le filtre Rechercher, la fonction Trier a une structure similaire &#8211; le premier espace d\u00e9finit ce que nous allons trier et le second espace d\u00e9finit les param\u00e8tres par lesquels nous allons trier. Dans le cas pr\u00e9sent, nous trions les num\u00e9ros de revenus. <\/li>\n<li>R\u00e9p\u00e9tez les \u00e9tapes 3 et 4 pour l&rsquo;ic\u00f4ne \u00ab\u00a0bas\u00a0\u00bb, en n&rsquo;oubliant pas de changer le sens de tri en \u00ab\u00a0Ascendant\u00a0\u00bb.<\/li>\n<\/ol>\n<div><strong>Remarque :<\/strong> assurez-vous que les num\u00e9ros de revenus dans le fichier de donn\u00e9es ne contiennent pas de virgules, de points ou de symboles &#8211; la fonction \u00ab\u00a0Tri\u00a0\u00bb n&rsquo;est pas en mesure de les diff\u00e9rencier.<\/div>\n<p>Vous pouvez <a href=\"https:\/\/download.justinmind.com\/examples\/create-a-justinmind-datamaster-search-and-sort.vp\">t\u00e9l\u00e9charger notre exemple ici.<\/a><\/p>\n<p><!-- \n\n<h2><a id=\"exercise-3-paginate-data\"><\/a>Exercise 3: Paginate data<\/h2>\n\n\nIn our last exercise, we\u2019ll learn how to paginate the Data List and Data List in our prototype.\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-16431\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2019\/06\/PaginateExample.gif\" alt=\"Paginate data example\" width=\"800\" height=\"503\" \/>\n\n\n<ol>\n \t\n\n<li>Still on the List Dashboard screen, select the Data List. Look to the Properties palette and change the number of Rows per page to 10.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-16432\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2019\/06\/DataListRows.png\" alt=\"Change data list rows\" width=\"936\" height=\"526\" srcset=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2019\/06\/DataListRows.png 936w, https:\/\/www.justinmind.com\/wp-content\/uploads\/2019\/06\/DataListRows-300x169.png 300w, https:\/\/www.justinmind.com\/wp-content\/uploads\/2019\/06\/DataListRows-768x432.png 768w\" sizes=\"(max-width: 936px) 100vw, 936px\" \/><\/li>\n\n\n \t\n\n<li>Drag an Index widget from the Dynamic Content section of the widgets palette to the Canvas below the Data List. In the Properties palette, choose \u2018Client List\u2019 from the \u2018Data List\u2019 dropdown. We\u2019ll use this element to show what page of the Data List records we\u2019re on.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-16433\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2019\/06\/IndexWidget.png\" alt=\"Add index widget\" width=\"903\" height=\"473\" \/><\/li>\n\n\n \t\n\n<li>Place two \u2018arrow\u2019 icons next to the Index element. We\u2019ll use these to switch between the pages in the Data List.<\/li>\n\n\n \t\n\n<li>Select the right facing arrow and create an \u201cOn Click\u201d + \u201cPaginate Data List\u201d event, selecting the Data List as the target of the action. For the pagination, select \u2018Next Page\u2019.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-16435\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2019\/06\/NextPage.png\" alt=\"Next page event\" width=\"792\" height=\"538\" srcset=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2019\/06\/NextPage.png 792w, https:\/\/www.justinmind.com\/wp-content\/uploads\/2019\/06\/NextPage-300x204.png 300w, https:\/\/www.justinmind.com\/wp-content\/uploads\/2019\/06\/NextPage-768x522.png 768w\" sizes=\"(max-width: 792px) 100vw, 792px\" \/><\/li>\n\n\n \t\n\n<li>Select the left facing arrow and create an \u201cOn Click\u201d + \u201cPaginate Data List\u201d event, selecting the Data List as the target of the action. For the pagination, select \u2018Previous Page\u2019.<\/li>\n\n\n \t\n\n<li>Repeat these steps on the Card Dashboard screen.<\/li>\n\n\n<\/ol>\n\n\nYou can <a href=\"https:\/\/download.justinmind.com\/examples\/create-a-justinmind-datamaster-search-and-sort.vp\">download our example here<\/a>.\n\n--><\/p>\n<h2><a id=\"filter\"><\/a>Filtrer les rangs<\/h2>\n<p><span style=\"font-weight: 400;\">Dans cet exemple, vous apprendrez \u00e0 utiliser la fonction filter pour filtrer les valeurs d&rsquo;une liste de donn\u00e9es \u00e0 l&rsquo;aide d&rsquo;une liste de s\u00e9lection dans l&rsquo;en-t\u00eate.<\/span><\/p>\n<p><iframe loading=\"lazy\" src=\"https:\/\/www.justinmind.com\/usernote\/tests\/23518471\/73112233\/73228195\/index.html\" width=\"820px\" height=\"420px\" frameborder=\"0\"><\/iframe><\/p>\n<p>Voici comment le construire :<\/p>\n<h3><strong>Voir<\/strong><\/h3>\n<ul>\n<li>Allez dans la palette Ma\u00eetrise des donn\u00e9es et cr\u00e9ez une nouvelle \u00ab\u00a0Ma\u00eetrise des donn\u00e9es\u00a0\u00bb, nommez-la \u00ab\u00a0Voitures\u00a0\u00bb, cr\u00e9ez trois attributs : \u00ab\u00a0Constructeur\u00a0\u00bb, \u00ab\u00a0Ann\u00e9e\u00a0\u00bb et \u00ab\u00a0Couleur\u00a0\u00bb, puis appuyez sur \u00ab\u00a0Ok\u00a0\u00bb.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-71255\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/10\/filter-columns-in-a-data-list-1.png\" alt=\"\" width=\"794\" height=\"340\"><\/li>\n<li>Cliquez avec le bouton droit de la souris sur la \u00ab\u00a0Base de donn\u00e9es\u00a0\u00bb que vous venez de cr\u00e9er et s\u00e9lectionnez \u00ab\u00a0Afficher et modifier les enregistrements\u00a0\u00bb, \u00e9crivez vos exemples de voitures \u00e0 cet endroit et appuyez sur \u00ab\u00a0Ok\u00a0\u00bb.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-71255\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/10\/filter-columns-in-a-data-list-2.png\" alt=\"\" width=\"794\" height=\"340\"><\/li>\n<li>S\u00e9lectionnez \u00ab\u00a0Liste de donn\u00e9es\u00a0\u00bb dans la section \u00ab\u00a0Contenu dynamique\u00a0\u00bb et placez-la sur le canevas ; la fen\u00eatre \u00ab\u00a0Nouvelle liste de donn\u00e9es\u00a0\u00bb sera activ\u00e9e ; donnez un nom \u00e0 votre liste, choisissez ensuite la \u00ab\u00a0Base de donn\u00e9es\u00a0\u00bb que vous avez cr\u00e9\u00e9e pr\u00e9c\u00e9demment et s\u00e9lectionnez tous les attributs.<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\/10\/filter-columns-in-a-data-list-3.png\"><source src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/10\/filter-columns-in-a-data-list-3.mp4\" type=\"video\/mp4\"><img decoding=\"async\" src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/10\/filter-columns-in-a-data-list-3.png\" alt=\"Cr\u00e9er une liste de donn\u00e9es\">Cr\u00e9er une liste de donn\u00e9es<\/source><\/video><\/li>\n<\/ul>\n<ul>\n<li>Placez une \u00ab\u00a0S\u00e9lection\u00a0\u00bb de la section \u00ab\u00a0Champs de saisie interactifs\u00a0\u00bb dans l&rsquo;en-t\u00eate de la colonne que vous souhaitez filtrer ; appuyez sur la touche commande (Mac) ou contr\u00f4le (Windows) tout en faisant glisser l&rsquo;\u00e9l\u00e9ment \u00e0 l&rsquo;int\u00e9rieur.<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\/10\/filter-columns-in-a-data-list-4.png\"><source src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/10\/filter-columns-in-a-data-list-4.mp4\" type=\"video\/mp4\"><img decoding=\"async\" src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/10\/filter-columns-in-a-data-list-4.png\" alt=\"Ins\u00e9rer une s\u00e9lection\">Ins\u00e9rer une s\u00e9lection<\/source><\/video><\/li>\n<li>Cliquez sur \u00ab\u00a0S\u00e9lectionner\u00a0\u00bb et modifiez les valeurs de la palette de propri\u00e9t\u00e9s pour qu&rsquo;elles correspondent \u00e0 l&rsquo;option que vous avez dans votre colonne.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-71255\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/10\/filter-columns-in-a-data-list-5.png\" alt=\"\" width=\"794\" height=\"340\"><\/li>\n<\/ul>\n<h3><strong>Ev\u00e9nements<\/strong><\/h3>\n<p><span data-preserver-spaces=\"true\">Une fois la \u00ab\u00a0S\u00e9lection\u00a0\u00bb s\u00e9lectionn\u00e9e, acc\u00e9dez \u00e0 la palette des \u00e9v\u00e9nements et cliquez sur \u00ab\u00a0Ajouter un \u00e9v\u00e9nement\u00a0\u00bb.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-71255\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/10\/filter-columns-in-a-data-list-6.png\" alt=\"\" width=\"794\" height=\"340\"><\/span><\/p>\n<ol>\n<li><span data-preserver-spaces=\"true\">Cliquez sur \u00ab\u00a0Choose Trigger\u00a0\u00bb dans la bo\u00eete de dialogue et s\u00e9lectionnez \u00ab\u00a0on Change\u00a0\u00bb.<\/span><\/li>\n<li><span data-preserver-spaces=\"true\">Dans \u00ab\u00a0Choisir une action\u00a0\u00bb, s\u00e9lectionnez \u00ab\u00a0Attribuer une valeur \u00e0 un \u00e9l\u00e9ment\u00a0\u00bb et cliquez sur la \u00ab\u00a0Liste de donn\u00e9es\u00a0\u00bb.<\/span><\/li>\n<li><span data-preserver-spaces=\"true\">S\u00e9lectionnez le bouton radio \u00ab\u00a0Calcul\u00e9\u00a0\u00bb pour la valeur et cliquez sur \u00ab\u00a0Ajouter une expression\u00a0\u00bb.<\/span><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-71255\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/10\/filter-columns-in-a-data-list-7.png\" alt=\"\" width=\"794\" height=\"340\"><\/li>\n<li><span data-preserver-spaces=\"true\"><span data-preserver-spaces=\"true\">Dans le premier champ du constructeur de l&rsquo;expression de la valeur, faites glisser la fonction \u00ab\u00a0Filtre\u00a0\u00bb et s\u00e9lectionnez votre \u00ab\u00a0Base de donn\u00e9es\u00a0\u00bb dans l&rsquo;onglet Base de donn\u00e9es pour le deuxi\u00e8me champ. Ensuite, tirez la fonction \u00ab\u00a0Has\u00a0\u00bb et choisissez la zone que vous allez filtrer \u00e0 partir de l&rsquo;onglet Data Masters ; ensuite, tirez la fonction \u00ab\u00a0Select\u00a0\u00bb et placez-la dans le dernier champ. Cliquez sur \u00ab\u00a0Ok\u00a0\u00bb et \u00ab\u00a0Ok\u00a0\u00bb pour terminer la cr\u00e9ation de votre \u00e9v\u00e9nement.  <\/span><\/span>\n<div class=\"embed-container\" style=\"padding-bottom: 56%;\"><iframe loading=\"lazy\" src=\"https:\/\/player.vimeo.com\/video\/767991222\" width=\"640\" height=\"564\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n<\/li>\n<\/ol>\n<div> <strong> Remarque : <\/strong>Vous pouvez reproduire les actions pour chaque colonne que vous souhaitez filtrer.<\/div>\n<p><span style=\"font-weight: 400;\">Simulez votre prototype.<\/span><\/p>\n<h2><a id=\"select-rows\"><\/a>S\u00e9lectionnez les lignes<\/h2>\n<p>Dans cet exemple, vous apprendrez \u00e0 cr\u00e9er une liste de donn\u00e9es dans laquelle vous pourrez modifier la couleur de la ligne pour lui donner un effet de s\u00e9lection.<\/p>\n<p><iframe loading=\"lazy\" src=\"https:\/\/www.justinmind.com\/usernote\/tests\/23518471\/73112233\/73208725\/index.html\" width=\"820px\" height=\"320px\" frameborder=\"0\"><\/iframe><\/p>\n<p><span style=\"font-weight: 400;\">Comment le construire :<\/span><\/p>\n<h3><strong>Voir<\/strong><\/h3>\n<ul>\n<li>Allez dans la palette des ma\u00eetres de donn\u00e9es et cr\u00e9ez un nouveau \u00ab\u00a0ma\u00eetre de donn\u00e9es\u00a0\u00bb, nommez-le \u00ab\u00a0Test\u00a0\u00bb et cr\u00e9ez trois attributs : \u00ab\u00a0Colonne A\u00a0\u00bb, \u00ab\u00a0Colonne B\u00a0\u00bb et \u00ab\u00a0Colonne C\u00a0\u00bb, puis appuyez sur \u00ab\u00a0Ok\u00a0\u00bb.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-44165\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/10\/selectable-row-list-1.png\" alt=\"Ajouter des champs \u00e0 la liste de donn\u00e9es\" width=\"600\" height=\"349\"><\/li>\n<li>Cliquez avec le bouton droit de la souris sur la \u00ab\u00a0Base de donn\u00e9es\u00a0\u00bb que vous venez de cr\u00e9er et s\u00e9lectionnez \u00ab\u00a0Afficher et modifier les enregistrements\u00a0\u00bb, \u00e9crivez vos donn\u00e9es d&rsquo;exemple \u00e0 cet endroit et appuyez sur \u00ab\u00a0Ok\u00a0\u00bb.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-44165\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/10\/selectable-row-list-2.png\" alt=\"Ajouter des champs \u00e0 la liste de donn\u00e9es\" width=\"600\" height=\"349\"><\/li>\n<li>S\u00e9lectionnez \u00ab\u00a0Liste de donn\u00e9es\u00a0\u00bb dans la section \u00ab\u00a0Contenu dynamique\u00a0\u00bb et placez-la sur le canevas ; la fen\u00eatre \u00ab\u00a0Nouvelle liste de donn\u00e9es\u00a0\u00bb sera activ\u00e9e ; donnez un nom \u00e0 votre liste, choisissez ensuite la \u00ab\u00a0Base de donn\u00e9es\u00a0\u00bb que vous avez cr\u00e9\u00e9e pr\u00e9c\u00e9demment et s\u00e9lectionnez tous les attributs.<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\/10\/selectable-row-list-3.png\"><source src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/10\/selectable-row-list-3.mp4\" type=\"video\/mp4\"><img decoding=\"async\" src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/10\/selectable-row-list-3.png\" alt=\"Cr\u00e9er une liste de donn\u00e9es\">Cr\u00e9er une liste de donn\u00e9es<\/source><\/video><\/li>\n<\/ul>\n<h3><strong>Ev\u00e9nements<\/strong><\/h3>\n<p><span data-preserver-spaces=\"true\">Placez le curseur de la souris \u00e0 gauche de la ligne jusqu&rsquo;\u00e0 ce qu&rsquo;il se transforme en une fl\u00e8che pointant vers la droite et cliquez pour s\u00e9lectionner toute la ligne, allez dans la palette \u00c9v\u00e9nements et cliquez sur \u00ab\u00a0Ajouter un \u00e9v\u00e9nement\u00a0\u00bb.&nbsp;<\/span><\/p>\n<ol>\n<li><span data-preserver-spaces=\"true\">Dans la bo\u00eete de dialogue, cliquez sur \u00ab\u00a0Choose Trigger\u00a0\u00bb, survolez la section \u00ab\u00a0Mouse\u00a0\u00bb et s\u00e9lectionnez \u00ab\u00a0on Click\u00a0\u00bb.<\/span><\/li>\n<li><span data-preserver-spaces=\"true\">Dans la section \u00ab\u00a0Choisir une action\u00a0\u00bb, s\u00e9lectionnez \u00ab\u00a0Changer de style\u00a0\u00bb et cliquez sur la \u00ab\u00a0Liste de donn\u00e9es\u00a0\u00bb.<\/span><\/li>\n<li><span data-preserver-spaces=\"true\"><span data-preserver-spaces=\"true\">Choisissez la couleur d&rsquo;arri\u00e8re-plan paire et impaire par d\u00e9faut. Cliquez sur \u00ab\u00a0Ok\u00a0\u00bb pour terminer la cr\u00e9ation de l&rsquo;\u00e9v\u00e9nement. <\/span><\/span>\n<div class=\"embed-container\" style=\"padding-bottom: 59%;\"><iframe loading=\"lazy\" src=\"https:\/\/player.vimeo.com\/video\/767361891\" width=\"640\" height=\"564\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n<\/li>\n<\/ol>\n<p><span data-preserver-spaces=\"true\">Acc\u00e9dez \u00e0 nouveau \u00e0 la palette \u00c9v\u00e9nements et cliquez sur le \u00ab\u00a0+\u00a0\u00bb pour ajouter un nouvel \u00e9v\u00e9nement.<\/span><\/p>\n<ol>\n<li><span data-preserver-spaces=\"true\">Dans la bo\u00eete de dialogue, cliquez sur \u00ab\u00a0Choose Trigger\u00a0\u00bb, survolez la section \u00ab\u00a0Mouse\u00a0\u00bb et s\u00e9lectionnez \u00ab\u00a0on Click\u00a0\u00bb.<\/span><\/li>\n<li><span data-preserver-spaces=\"true\">Dans \u00ab\u00a0Choose Action\u00a0\u00bb, s\u00e9lectionnez \u00ab\u00a0Change style\u00a0\u00bb et s\u00e9lectionnez la ligne actuelle dans la \u00ab\u00a0Data list\u00a0\u00bb.<\/span><\/li>\n<li><span data-preserver-spaces=\"true\">Choisissez un style de couleur d&rsquo;arri\u00e8re-plan et d\u00e9finissez la couleur bleue.  <\/span>Cliquez sur \u00ab\u00a0Ok\u00a0\u00bb pour terminer la cr\u00e9ation de l&rsquo;\u00e9v\u00e9nement.\n<div class=\"embed-container\" style=\"padding-bottom: 59%;\"><iframe loading=\"lazy\" src=\"https:\/\/player.vimeo.com\/video\/767361928\" width=\"640\" height=\"564\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n<\/li>\n<\/ol>\n<p><span data-preserver-spaces=\"true\">Simulez votre prototype.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Le widget Liste de donn\u00e9es affiche les fiches de donn\u00e9es sous forme de liste\/tableau. Lors de la cr\u00e9ation de votre liste de donn\u00e9es, la cellule sup\u00e9rieure&#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-124634","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\/124634"}],"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=124634"}],"version-history":[{"count":1,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/posts\/124634\/revisions"}],"predecessor-version":[{"id":126165,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/posts\/124634\/revisions\/126165"}],"wp:attachment":[{"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/media?parent=124634"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/categories?post=124634"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/tags?post=124634"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}