{"id":7183,"date":"2022-06-08T00:21:21","date_gmt":"2022-06-08T00:21:21","guid":{"rendered":"https:\/\/www.directimpactsolutions.com\/?p=7183"},"modified":"2023-06-27T19:13:21","modified_gmt":"2023-06-27T19:13:21","slug":"modernizing-checkboxes","status":"publish","type":"post","link":"https:\/\/www.directimpactsolutions.com\/en\/modernizing-checkboxes\/","title":{"rendered":"Modernizing Checkbox Sets with Portals"},"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>Checkbox sets have been a staple in Claris FileMaker development for decades. They are simple to use, easy to implement, and help ensure data integrity. However, from the standpoint of a user, they can be clunky and prone to incorrect selections, especially in large lists.<\/p><p>Checkbox sets have been a key element in the development community because they are easy to understand. All that is needed is a simple value list and a quick change in the field control style to display the list on the field. The style of the check can be modified to a check or an 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=\"checkbox sets\" 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>Using values from a field is exceptionally powerful and allows a developer to dynamically generate the values for the list.<\/p><p>One way that FileMaker is powerful is that in displaying from a value list, a developer can display only data from a second field, but still save the related ID. By normalizing the data this way, a developer can create a list that can update all records in a system at once. For example, if a customer changed their name because they were married, a user would only need to update the customer&#8217;s record in one place.<\/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=\"checkbox sets with portal\" 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>However, checkbox sets are not without their pitfalls and limitations:<\/p><ul class=\"wp-block-list\"><li>They don\u2019t work as well when there are many values that change often<\/li>\n\n<li>Larger lists use significant layout space and can be unruly<\/li>\n\n<li>Adding values can break a well-crafted layout<\/li>\n\n<li>Removing values can prevent previous selections from being displayed<\/li>\n\n<li>Value lists only have the option of showing data from 2 separate fields, which may not provide enough information for the user to make an appropriate decision<\/li>\n\n<li>The checkbox set also has very limited styling options<\/li><\/ul><h2 class=\"wp-block-heading\" id=\"Modern-UI\/UX-Alternatives-to-Checkbox-Sets\">Modern UI\/UX Alternatives to Checkbox Sets<\/h2><p>Thankfully, there are alternatives to using checkbox sets that perform similar functionality.<\/p><h3 class=\"wp-block-heading\" id=\"2-Button-Button-Bar\">2-Button Button Bar<\/h3><p>Button bars were revolutionary in FileMaker. They added the ability to use SVG icons and calculations.<\/p><p>Combining this functionality with the <em>hide object<\/em> calculations, a developer can mimic a checkbox set while ensuring the layout doesn\u2019t change.<\/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=\"checkbox example\" class=\"wp-image-7192\"\/><figcaption class=\"wp-element-caption\"><br>This method has many strengths:<\/figcaption><\/figure><ul class=\"wp-block-list\"><li>Because it is not tied to a single text field, all styling options are open to the developer<\/li>\n\n<li>By using the button bar, a developer can use different icons for checked and unchecked states<\/li>\n\n<li>A text value can be calculated to different text when the item is checked or unchecked<\/li>\n\n<li>Creates a consistent look across multiple platforms by allowing the developer to make precise placements<\/li><\/ul><p>However, this method is not without its pitfalls:<\/p><ul class=\"wp-block-list\"><li>It can require additional scripting<\/li>\n\n<li>If so, developers must manually change the layout<\/li>\n\n<li>It requires many calculations to show and hide the appropriate objects<\/li><\/ul><p>This method works exceptionally for a 1-item checkbox list to ensure consistency in appearance. It also works well on layouts where there are multiple items a user needs to set individually, such as a user preferences layout.<\/p><h2 class=\"wp-block-heading\">Checklist Portals<\/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>This method allows for lists to be dynamically updated by using a related table, either with a cartesian join or a regular relationship.<\/p><p>The benefits to this list are numerous, including:<\/p><ul class=\"wp-block-list\"><li>The ability to display as much data as needed<\/li>\n\n<li>The list can be dynamically filtered by allowing the user to provide search terms to reduce shown items<\/li><\/ul><p>As with any other method, there are also drawbacks:<\/p><ul class=\"wp-block-list\"><li>Unlike checkbox sets, portals cannot be formatted into multiple columns<\/li>\n\n<li>The value list feature cannot be used in this method, so another table may be required<\/li><\/ul><p>This method&#8217;s versatility allows it to be implemented easily in many scenarios, such as:<\/p><ul class=\"wp-block-list\"><li>Replacing an existing checkbox set where the list grows, but space is limited.<\/li>\n\n<li>When a user may only want to see a smaller subset of the overall list by using a filter.<\/li>\n\n<li>A large value set where a user needs to see additional information. (i.e. a full address)<\/li><\/ul><h2 class=\"wp-block-heading\">2-Portal Selector List<\/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\">Using 2 portals is versatile and provides many benefits:<\/figcaption><\/figure><ul class=\"wp-block-list\"><li>It automatically filters the list for the user, allowing them to easily see what is and isn\u2019t selected<\/li>\n\n<li>A designer can show more details in one portal and not the other<\/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>Compared to the other methods, the largest drawback of this method is the understanding of FileMaker mechanics, followed by the amount of space it requires to implement.<\/p><p>This is useful in many scenarios, such as:<\/p><ul class=\"wp-block-list\"><li>Quizzes where a user needs to put items in the correct order<\/li>\n\n<li>A comparison list that allows a user to select multiple items to display more details<\/li>\n\n<li>When a value list is exceptionally long, and users need to verify that the appropriate options are selected<\/li>\n\n<li>As part of a wizard allowing options to be set and automatically created upon completion<\/li><\/ul><h2 class=\"wp-block-heading\" id=\"Conclusion\">Conclusion<\/h2><p>Claris has provided many useful new tools over the last several versions of FileMaker. As developers, we should leverage these tools to provide a cleaner, better interface for our users.<\/p><p>You can download the sample file to play around with ways to implement these methods into your own solution(s).<\/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\">Download<\/a><\/div>","protected":false},"excerpt":{"rendered":"<p>Checkbox sets have been a staple in Claris FileMaker development for decades. They are simple to use, easy to implement, and help ensure data integrity. However, from the standpoint of a user, they can be clunky and prone to incorrect selections, especially in large lists. Checkbox sets have been a key element in the development &hellip;<\/p>\n<p class=\"read-more\"> <a class=\"\" href=\"https:\/\/www.directimpactsolutions.com\/en\/modernizing-checkboxes\/\"> <span class=\"screen-reader-text\">Modernizing Checkbox Sets with Portals<\/span> Read More &raquo;<\/a><\/p>\n","protected":false},"author":6,"featured_media":7221,"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":[29],"tags":[],"class_list":["post-7183","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-4.png",1330,700,false],"thumbnail":["https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2022\/06\/Heading-4-150x150.png",150,150,true],"medium":["https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2022\/06\/Heading-4-300x158.png",300,158,true],"medium_large":["https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2022\/06\/Heading-4-768x404.png",768,404,true],"large":["https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2022\/06\/Heading-4-1024x539.png",1024,539,true],"1536x1536":["https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2022\/06\/Heading-4.png",1330,700,false],"2048x2048":["https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2022\/06\/Heading-4.png",1330,700,false],"woocommerce_thumbnail":["https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2022\/06\/Heading-4-300x300.png",300,300,true],"woocommerce_single":["https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2022\/06\/Heading-4.png",600,316,false],"woocommerce_gallery_thumbnail":["https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2022\/06\/Heading-4-100x100.png",100,100,true]},"uagb_author_info":{"display_name":"Direct Impact Solutions","author_link":"https:\/\/www.directimpactsolutions.com\/en\/author\/direct-impact-solutions\/"},"uagb_comment_info":0,"uagb_excerpt":"Checkbox sets have been a staple in Claris FileMaker development for decades. They are simple to use, easy to implement, and help ensure data integrity. However, from the standpoint of a user, they can be clunky and prone to incorrect selections, especially in large lists. Checkbox sets have been a key element in the development&hellip;","_links":{"self":[{"href":"https:\/\/www.directimpactsolutions.com\/en\/wp-json\/wp\/v2\/posts\/7183","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.directimpactsolutions.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.directimpactsolutions.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.directimpactsolutions.com\/en\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/www.directimpactsolutions.com\/en\/wp-json\/wp\/v2\/comments?post=7183"}],"version-history":[{"count":10,"href":"https:\/\/www.directimpactsolutions.com\/en\/wp-json\/wp\/v2\/posts\/7183\/revisions"}],"predecessor-version":[{"id":21011,"href":"https:\/\/www.directimpactsolutions.com\/en\/wp-json\/wp\/v2\/posts\/7183\/revisions\/21011"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.directimpactsolutions.com\/en\/wp-json\/wp\/v2\/media\/7221"}],"wp:attachment":[{"href":"https:\/\/www.directimpactsolutions.com\/en\/wp-json\/wp\/v2\/media?parent=7183"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.directimpactsolutions.com\/en\/wp-json\/wp\/v2\/categories?post=7183"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.directimpactsolutions.com\/en\/wp-json\/wp\/v2\/tags?post=7183"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}