{"id":7309,"date":"2022-06-20T16:34:56","date_gmt":"2022-06-20T16:34:56","guid":{"rendered":"https:\/\/www.directimpactsolutions.com\/?p=7309"},"modified":"2023-06-27T19:10:44","modified_gmt":"2023-06-27T19:10:44","slug":"modernisation-des-portails","status":"publish","type":"post","link":"https:\/\/www.directimpactsolutions.com\/fr\/modernisation-des-portails\/","title":{"rendered":"Modernisation des jeux de cases \u00e0 cocher avec les portails"},"content":{"rendered":"<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"810\" height=\"101\" src=\"https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2022\/06\/modernizing-checkboxes-1.png\" alt=\"\" class=\"wp-image-7186\" srcset=\"https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2022\/06\/modernizing-checkboxes-1.png 810w, https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2022\/06\/modernizing-checkboxes-1-300x37.png 300w, https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2022\/06\/modernizing-checkboxes-1-768x96.png 768w, https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2022\/06\/modernizing-checkboxes-1-480x60.png 480w\" sizes=\"auto, (max-width: 810px) 100vw, 810px\" \/><\/figure><p>Les jeux de cases \u00e0 cocher sont un \u00e9l\u00e9ment essentiel du d\u00e9veloppement de Claris FileMaker depuis des d\u00e9cennies. Ils sont simples \u00e0 utiliser, faciles \u00e0 mettre en \u0153uvre et contribuent \u00e0 garantir l&rsquo;int\u00e9grit\u00e9 des donn\u00e9es. Cependant, du point de vue d&rsquo;un utilisateur, ils peuvent \u00eatre maladroits et sujets \u00e0 des s\u00e9lections incorrectes, en particulier dans les grandes listes.<\/p><p>Les jeux de cases \u00e0 cocher ont \u00e9t\u00e9 un \u00e9l\u00e9ment cl\u00e9 dans la communaut\u00e9 du d\u00e9veloppement, car ils sont faciles \u00e0 comprendre. Tout ce qui est requis est une simple liste de valeurs et une modification rapide du style de contr\u00f4le de champ pour afficher la liste sur le champ. Le style du crochet peut \u00eatre modifi\u00e9 en crochet ou en x.<\/p><figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"668\" height=\"381\" src=\"https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2022\/06\/modernizing-checkboxes-2.png\" alt=\"jeux de cases \u00e0 cocher\" class=\"wp-image-7188\" srcset=\"https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2022\/06\/modernizing-checkboxes-2.png 668w, https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2022\/06\/modernizing-checkboxes-2-300x171.png 300w, https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2022\/06\/modernizing-checkboxes-2-480x274.png 480w\" sizes=\"auto, (max-width: 668px) 100vw, 668px\" \/><\/figure><p>L&rsquo;utilisation des valeurs d&rsquo;un champ est exceptionnellement puissante et permet \u00e0 un d\u00e9veloppeur de g\u00e9n\u00e9rer dynamiquement les valeurs pour la liste.<\/p><p>L&rsquo;un des atouts de FileMaker est qu&rsquo;en affichant \u00e0 partir d&rsquo;une liste de valeurs, un d\u00e9veloppeur peut afficher uniquement les donn\u00e9es d&rsquo;un deuxi\u00e8me champ, tout en enregistrant l&rsquo;ID associ\u00e9. En normalisant les donn\u00e9es de cette mani\u00e8re, un d\u00e9veloppeur peut cr\u00e9er une liste qui peut mettre \u00e0 jour tous les enregistrements d&rsquo;un syst\u00e8me \u00e0 la fois. Par exemple, si un client changeait de nom parce qu&rsquo;il \u00e9tait mari\u00e9, un utilisateur aurait besoin de mettre \u00e0 jour l&rsquo;enregistrement du client qu&rsquo;\u00e0 un seul endroit.<\/p><figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"469\" height=\"524\" src=\"https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2022\/06\/modernizing-checkboxes-3.png\" alt=\"jeux de cases \u00e0 cocher avec portail\" class=\"wp-image-7190\" srcset=\"https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2022\/06\/modernizing-checkboxes-3.png 469w, https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2022\/06\/modernizing-checkboxes-3-269x300.png 269w\" sizes=\"auto, (max-width: 469px) 100vw, 469px\" \/><\/figure><p><\/p><p>Cependant, les jeux de cases \u00e0 cocher ne sont pas sans difficult\u00e9s et limites :<\/p><ul class=\"wp-block-list\"><li>Ils ne fonctionnent pas aussi bien quand il y a beaucoup de valeurs qui changent souvent.<\/li>\n\n<li>Les listes plus grandes utilisent un espace de mise en page important et peuvent \u00eatre indisciplin\u00e9es.<\/li>\n\n<li>L&rsquo;ajout de valeurs peut briser une mise en page bien con\u00e7ue.<\/li>\n\n<li>La suppression de valeurs peut emp\u00eacher l&rsquo;affichage des s\u00e9lections pr\u00e9c\u00e9dentes.<\/li>\n\n<li>Les listes de valeurs n&rsquo;ont que la possibilit\u00e9 d&rsquo;afficher les donn\u00e9es de 2 champs distincts, ce qui peut ne pas fournir suffisamment d&rsquo;informations pour que l&rsquo;utilisateur puisse prendre une d\u00e9cision appropri\u00e9e.<\/li>\n\n<li>Le jeu de cases \u00e0 cocher a \u00e9galement des options de style tr\u00e8s limit\u00e9es.<\/li><\/ul><h2 class=\"wp-block-heading\" id=\"Modern-UI\/UX-Alternatives-to-Checkbox-Sets\">Alternatives UI\/UX modernes aux ensembles de cases \u00e0 cocher.<\/h2><p>Heureusement, il existe des alternatives \u00e0 l&rsquo;utilisation de jeux de cases \u00e0 cocher qui ex\u00e9cutent des fonctionnalit\u00e9s similaires.<\/p><h2 class=\"wp-block-heading\" id=\"2-Button-Button-Bar\">Barre de 2 bouttons<\/h2><p>Les barres de boutons \u00e9taient r\u00e9volutionnaires dans FileMaker. Ils ont ajout\u00e9 la possibilit\u00e9 d&rsquo;utiliser des ic\u00f4nes SVG et des calculs.<\/p><p>En combinant cette fonctionnalit\u00e9 avec les calculs <em>d&rsquo;objet masqu\u00e9<\/em>, un d\u00e9veloppeur peut imiter un jeux de cases \u00e0 cocher tout en s&rsquo;assurant que la disposition ne change pas.<\/p><figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"294\" height=\"54\" src=\"https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2022\/06\/modernizing-checkboxes-4.png\" alt=\"Exemple de cases \u00e0 cocher\" class=\"wp-image-7192\"\/><figcaption class=\"wp-element-caption\"><br>Cette m\u00e9thode a de nombreux atouts :<\/figcaption><\/figure><ul class=\"wp-block-list\"><li>Parce qu&rsquo;il n&rsquo;est pas li\u00e9 \u00e0 un seul champ de texte, toutes les options de style sont ouvertes au d\u00e9veloppeur.<\/li>\n\n<li>En utilisant la barre de boutons, un d\u00e9veloppeur peut utiliser diff\u00e9rentes ic\u00f4nes pour les \u00e9tats coch\u00e9s et non coch\u00e9s.<\/li>\n\n<li>Une valeur de texte peut \u00eatre calcul\u00e9e en un texte diff\u00e9rent lorsque l&rsquo;\u00e9l\u00e9ment est coch\u00e9 ou d\u00e9coch\u00e9.<\/li>\n\n<li>Cela cr\u00e9e une apparence coh\u00e9rente sur plusieurs plates-formes en permettant au d\u00e9veloppeur de faire des placements pr\u00e9cis.<\/li><\/ul><p>Cependant, cette m\u00e9thode n&rsquo;est pas sans difficult\u00e9s :<\/p><ul class=\"wp-block-list\"><li>Cela peut n\u00e9cessiter des scripts suppl\u00e9mentaires.<\/li>\n\n<li>Si tel est le cas, les d\u00e9veloppeurs doivent modifier manuellement la mise en page.<\/li>\n\n<li>Cela n\u00e9cessite de nombreux calculs pour afficher et masquer les objets appropri\u00e9s.<\/li><\/ul><p>Cette m\u00e9thode fonctionne exceptionnellement pour une liste de cases \u00e0 cocher \u00e0 1 \u00e9l\u00e9ment afin d&rsquo;assurer la coh\u00e9rence de l&rsquo;apparence. Cela fonctionne \u00e9galement bien sur les mises en page o\u00f9 il y a plusieurs \u00e9l\u00e9ments qu&rsquo;un utilisateur doit d\u00e9finir individuellement, comme une mise en page des pr\u00e9f\u00e9rences de l&rsquo;utilisateur.<\/p><h2 class=\"wp-block-heading\">Portails de liste \u00e0 cocher<\/h2><figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"955\" height=\"325\" src=\"https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2022\/06\/modernizing-checkboxes-5.png\" alt=\"\" class=\"wp-image-7194\" srcset=\"https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2022\/06\/modernizing-checkboxes-5.png 955w, https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2022\/06\/modernizing-checkboxes-5-300x102.png 300w, https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2022\/06\/modernizing-checkboxes-5-768x261.png 768w, https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2022\/06\/modernizing-checkboxes-5-480x163.png 480w\" sizes=\"auto, (max-width: 955px) 100vw, 955px\" \/><\/figure><p><\/p><p>Cette m\u00e9thode permet aux listes d&rsquo;\u00eatre mises \u00e0 jour dynamiquement \u00e0 l&rsquo;aide d&rsquo;une table li\u00e9e, soit avec une jointure cart\u00e9sienne, soit avec une relation r\u00e9guli\u00e8re.<\/p><p>Les avantages de cette liste sont nombreux, notamment :<\/p><ul class=\"wp-block-list\"><li>La possibilit\u00e9 d&rsquo;afficher autant de donn\u00e9es que n\u00e9cessaire.<\/li>\n\n<li>La liste peut \u00eatre filtr\u00e9e dynamiquement en permettant \u00e0 l&rsquo;utilisateur de fournir des termes de recherche pour r\u00e9duire les \u00e9l\u00e9ments affich\u00e9s.<\/li><\/ul><p>Comme pour toute autre m\u00e9thode, il y a aussi des inconv\u00e9nients :<\/p><ul class=\"wp-block-list\"><li>Contrairement aux jeux de cases \u00e0 cocher, les portails ne peuvent pas \u00eatre format\u00e9s en plusieurs colonnes.<\/li>\n\n<li>La fonctionnalit\u00e9 de liste de valeurs ne peut pas \u00eatre utilis\u00e9e avec cette m\u00e9thode, donc une autre table peut \u00eatre n\u00e9cessaire.<\/li><\/ul><p>La polyvalence de cette m\u00e9thode permet la mise en \u0153uvre facilement dans de nombreux sc\u00e9narios, tels que :<\/p><ul class=\"wp-block-list\"><li>Le remplacement d&rsquo;un jeu de cases \u00e0 cocher existant o\u00f9 la liste s&rsquo;allonge, mais l&rsquo;espace est limit\u00e9.<\/li>\n\n<li>Lorsqu&rsquo;un utilisateur souhaite voir qu&rsquo;un sous-ensemble plus petit de la liste globale \u00e0 l&rsquo;aide d&rsquo;un filtre.<\/li>\n\n<li>Un grand ensemble de valeurs o\u00f9 un utilisateur a besoin de voir des informations suppl\u00e9mentaires. (ex. : une adresse compl\u00e8te)<\/li><\/ul><h2 class=\"wp-block-heading\">Liste de s\u00e9lection \u00e0 2 portails<\/h2><figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"381\" height=\"126\" src=\"https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2022\/06\/modernizing-checkboxes-7.png\" alt=\"\" class=\"wp-image-7196\" srcset=\"https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2022\/06\/modernizing-checkboxes-7.png 381w, https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2022\/06\/modernizing-checkboxes-7-300x99.png 300w\" sizes=\"auto, (max-width: 381px) 100vw, 381px\" \/><figcaption class=\"wp-element-caption\">L&rsquo;utilisation de 2 portails est polyvalente et offre de nombreux avantages :<\/figcaption><\/figure><ul class=\"wp-block-list\"><li>Il filtre automatiquement la liste pour l&rsquo;utilisateur, lui permettant de voir facilement ce qui est et n&rsquo;est pas s\u00e9lectionn\u00e9.<\/li>\n\n<li>Un concepteur peut afficher plus de d\u00e9tails dans un portail et pas dans l&rsquo;autre.<\/li><\/ul><figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1019\" height=\"351\" src=\"https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2022\/06\/modernizing-checkboxes-8.png\" alt=\"\" class=\"wp-image-7198\" srcset=\"https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2022\/06\/modernizing-checkboxes-8.png 1019w, https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2022\/06\/modernizing-checkboxes-8-300x103.png 300w, https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2022\/06\/modernizing-checkboxes-8-768x265.png 768w, https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2022\/06\/modernizing-checkboxes-8-980x338.png 980w, https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2022\/06\/modernizing-checkboxes-8-480x165.png 480w\" sizes=\"auto, (max-width: 1019px) 100vw, 1019px\" \/><\/figure><p><\/p><p>Par rapport aux autres m\u00e9thodes, le principal inconv\u00e9nient de cette m\u00e9thode est la compr\u00e9hension des m\u00e9canismes de FileMaker, suivi de la quantit\u00e9 d&rsquo;espace n\u00e9cessaire \u00e0 sa mise en \u0153uvre.<\/p><p>Ceci est utile dans de nombreux sc\u00e9narios, tels que :<\/p><ul class=\"wp-block-list\"><li>Des quiz o\u00f9 un utilisateur doit mettre les \u00e9l\u00e9ments dans le bon ordre.<\/li>\n\n<li>Une liste de comparaison qui permet \u00e0 un utilisateur de s\u00e9lectionner plusieurs \u00e9l\u00e9ments pour afficher plus de d\u00e9tails.<\/li>\n\n<li>Lorsqu&rsquo;une liste de valeurs est exceptionnellement longue et que les utilisateurs doivent v\u00e9rifier que les options appropri\u00e9es sont s\u00e9lectionn\u00e9es.<\/li>\n\n<li>Dans le cadre d&rsquo;un assistant permettant de d\u00e9finir des options et de les cr\u00e9er automatiquement \u00e0 la fin.<\/li><\/ul><h2 class=\"wp-block-heading\" id=\"Conclusion\">Conclusion<\/h2><p>Claris a fourni de nombreux nouveaux outils utiles au cours des derni\u00e8res versions de FileMaker. En tant que d\u00e9veloppeurs, nous devons tirer parti de ces outils pour fournir une interface plus propre et meilleure \u00e0 nos utilisateurs.<\/p><p>Vous pouvez t\u00e9l\u00e9charger le fichier d\u00e9mo pour jouer avec les moyens d&rsquo;impl\u00e9menter ces m\u00e9thodes dans votre ou vos propres solutions.<\/p><div class=\"wp-block-file\"><a id=\"wp-block-file--media-5c411e12-ad0e-4064-8ecf-c36cd45a87b4\" href=\"https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2022\/06\/CheckboxSetAlternative_DIS1.fmp12.zip\">CheckboxSetAlternative_DIS1.fmp12<\/a><a href=\"https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2022\/06\/CheckboxSetAlternative_DIS1.fmp12.zip\" class=\"wp-block-file__button wp-element-button\" download aria-describedby=\"wp-block-file--media-5c411e12-ad0e-4064-8ecf-c36cd45a87b4\">T\u00e9l\u00e9chargement<\/a><\/div>","protected":false},"excerpt":{"rendered":"<p>Les jeux de cases \u00e0 cocher sont un \u00e9l\u00e9ment essentiel du d\u00e9veloppement de Claris FileMaker depuis des d\u00e9cennies. Ils sont simples \u00e0 utiliser, faciles \u00e0 mettre en \u0153uvre et contribuent \u00e0 garantir l&rsquo;int\u00e9grit\u00e9 des donn\u00e9es. Cependant, du point de vue d&rsquo;un utilisateur, ils peuvent \u00eatre maladroits et sujets \u00e0 des s\u00e9lections incorrectes, en particulier dans &hellip;<\/p>\n<p class=\"read-more\"> <a class=\"\" href=\"https:\/\/www.directimpactsolutions.com\/fr\/modernisation-des-portails\/\"> <span class=\"screen-reader-text\">Modernisation des jeux de cases \u00e0 cocher avec les portails<\/span> Lire la suite >><\/a><\/p>\n","protected":false},"author":6,"featured_media":7325,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"","footnotes":""},"categories":[34],"tags":[],"class_list":["post-7309","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-low-code"],"uagb_featured_image_src":{"full":["https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2022\/06\/Heading-5.png",1330,700,false],"thumbnail":["https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2022\/06\/Heading-5-150x150.png",150,150,true],"medium":["https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2022\/06\/Heading-5-300x158.png",300,158,true],"medium_large":["https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2022\/06\/Heading-5-768x404.png",768,404,true],"large":["https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2022\/06\/Heading-5-1024x539.png",1024,539,true],"1536x1536":["https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2022\/06\/Heading-5.png",1330,700,false],"2048x2048":["https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2022\/06\/Heading-5.png",1330,700,false],"woocommerce_thumbnail":["https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2022\/06\/Heading-5-300x300.png",300,300,true],"woocommerce_single":["https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2022\/06\/Heading-5.png",600,316,false],"woocommerce_gallery_thumbnail":["https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2022\/06\/Heading-5-100x100.png",100,100,true]},"uagb_author_info":{"display_name":"Direct Impact Solutions","author_link":"https:\/\/www.directimpactsolutions.com\/fr\/author\/direct-impact-solutions\/"},"uagb_comment_info":0,"uagb_excerpt":"Les jeux de cases \u00e0 cocher sont un \u00e9l\u00e9ment essentiel du d\u00e9veloppement de Claris FileMaker depuis des d\u00e9cennies. Ils sont simples \u00e0 utiliser, faciles \u00e0 mettre en \u0153uvre et contribuent \u00e0 garantir l&rsquo;int\u00e9grit\u00e9 des donn\u00e9es. Cependant, du point de vue d&rsquo;un utilisateur, ils peuvent \u00eatre maladroits et sujets \u00e0 des s\u00e9lections incorrectes, en particulier dans\u2026","_links":{"self":[{"href":"https:\/\/www.directimpactsolutions.com\/fr\/wp-json\/wp\/v2\/posts\/7309","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.directimpactsolutions.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.directimpactsolutions.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.directimpactsolutions.com\/fr\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/www.directimpactsolutions.com\/fr\/wp-json\/wp\/v2\/comments?post=7309"}],"version-history":[{"count":9,"href":"https:\/\/www.directimpactsolutions.com\/fr\/wp-json\/wp\/v2\/posts\/7309\/revisions"}],"predecessor-version":[{"id":21105,"href":"https:\/\/www.directimpactsolutions.com\/fr\/wp-json\/wp\/v2\/posts\/7309\/revisions\/21105"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.directimpactsolutions.com\/fr\/wp-json\/wp\/v2\/media\/7325"}],"wp:attachment":[{"href":"https:\/\/www.directimpactsolutions.com\/fr\/wp-json\/wp\/v2\/media?parent=7309"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.directimpactsolutions.com\/fr\/wp-json\/wp\/v2\/categories?post=7309"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.directimpactsolutions.com\/fr\/wp-json\/wp\/v2\/tags?post=7309"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}