{"id":12195,"date":"2020-12-07T18:44:57","date_gmt":"2020-12-07T18:44:57","guid":{"rendered":"https:\/\/www.directimpactsolutions.com\/?p=12195"},"modified":"2023-05-22T19:44:04","modified_gmt":"2023-05-22T19:44:04","slug":"better-webdirect-checkboxes","status":"publish","type":"post","link":"https:\/\/www.directimpactsolutions.com\/en\/better-webdirect-checkboxes\/","title":{"rendered":"Better WebDirect Checkboxes"},"content":{"rendered":"
\"better<\/figure>

FileMaker Checkboxes<\/h3>

Here\u2019s a quick guide to creating visually pleasing FileMaker checkboxes and radio buttons in a format that translates to WebDirect (and even includes emojis)!<\/strong><\/p>

Accessing FileMaker solutions via WebDirect is convenient, but has unfortunate limitations, especially when it comes to design. A common frustration among developers is that the formatting of checkboxes in FileMaker doesn\u2019t translate to WebDirect. This occurs because checkboxes (and radio buttons) are controlled by the browser, and therefore render as standard HTML elements. Here\u2019s our guide to creating visually better WebDirect checkboxes in FileMaker.<\/p>

One solution to this problem is to avoid checkboxes and radio buttons altogether, and use button bars instead! We love button bars at AppWorks. In fact, we have multiple videos (1<\/a>,\u00a02<\/a>,\u00a03<\/a>), and a\u00a0three-part blog series\u00a0comprised Techniques for Button Bars<\/a>, Invisible Formatting for Button Bars<\/a> and Dynamic Text Resizing in FileMaker<\/a>, which are dedicated to the versatility of button bars.\u00a0<\/p>

The technique outlined below can be applied to radio button sets with more than two options, and you can even add emojis! This method is perfect for boolean options, like marking something as a favorite, indicating whether or not an invoice has been paid. It also works for any situation where you would use a radio button set.<\/p>

Using Boolean Fields<\/strong> in FileMaker<\/h3>

When using boolean fields, make sure your table contains a number field that corresponds to what you\u2019re tracking. For example, I\u2019m marking something as a favorite, so my field is called \u201cisFavorite\u201d. That number field will use a custom value list containing only the number 1. 1 corresponds to true, and 0 is false. <\/p>

Next, grab a button bar, give it two segments, and style it however you\u2019d like. I removed the border and made it show an icon only. <\/p>

\"\"<\/figure>

Each button will have only one step, which will be the same for both buttons: use the \u201cSet Field\u201d script step, specify the field to your boolean field, and set the calculation to \u201cnot [field]\u201d<\/p>

\"\"<\/figure>

This should be enough to put in basic functionality.<\/p>

\"\"<\/figure>

Don\u2019t stop here though! Both buttons can be used to toggle the field, and we want to use one for on and off. We\u2019ll do this with conditional visibility.<\/p>

First, go to layout mode. In the Data tab of the inspector pane, select the \u201con\u201d button and scroll down to \u201cHide object when\u201d. Click the pencil and enter \u201cnot [field]\u201d because we want to hide the on button when the field is set to 0. Select the off button, click the pencil and enter \u201c[field]\u201d because we want to hide the off button when the field is set to 1. <\/p>

\"\"<\/figure>

By default, this will stack the button segments on top of each other. <\/p>

\"\"<\/figure>

From here you can also add visibility styles or conditional formatting to the buttons to extend their customization.<\/p>

When Using WebDirect<\/strong>\u2026<\/h3>

This method doesn\u2019t produce exactly the same results when it translates to WebDirect, but there\u2019s an easy fix. Instead of a single button bar, use two stacked buttons with the same visibility settings as the button bar segments. <\/p>

\"\"<\/figure>

Using Radio Buttons<\/strong> in FileMaker<\/h3>

A similar technique can be applied to replace radio buttons. With a little bit of conditional formatting, you can make radio buttons much more interesting. First, I made a simple color selector. I used a vertical button bar without a border and with icons only, and rounded the corners of each segment. Each button sets the field \u201cColor\u201d to its corresponding color. Each button is conditioned to change the fill and icon color when the field is set to that color. <\/p>

\"\"<\/figure>
\"\"<\/figure>

FileMaker and Emojis<\/strong><\/h3>

Did you know that FileMaker supports emojis? If you\u2019re on MacOS, you can use emojis throughout your solution, even in calculations. Click on the Symbols and Keyboards menu from the top left and select \u201cShow Emojis and Symbols.\u201d Once you\u2019ve completed this step, you can insert emojis just like text. <\/p>

\"\"<\/figure>

From here, instead of your button bar using icons only, set it to text only, and insert emojis as you would text. Now you can create all kinds of fun buttons. <\/p>

\"\"<\/figure>
\"\"<\/figure>

If you have any questions about formatting checkboxes in a format that translates to WebDirect, feel free to contact us<\/a>!<\/p>

*This article was originally written for AppWorks, which has since joined Direct Impact Solutions. This article is intended for informative purposes only. To the best of our knowledge, this information is accurate as of the date of publication.<\/em><\/p>","protected":false},"excerpt":{"rendered":"

FileMaker Checkboxes Here\u2019s a quick guide to creating visually pleasing FileMaker checkboxes and radio buttons in a format that translates to WebDirect (and even includes emojis)! Accessing FileMaker solutions via WebDirect is convenient, but has unfortunate limitations, especially when it comes to design. A common frustration among developers is that the formatting of checkboxes in …<\/p>\n

Better WebDirect Checkboxes<\/span> Read More »<\/a><\/p>\n","protected":false},"author":6,"featured_media":12219,"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":[266,267,39,268,83],"class_list":["post-12195","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-low-code","tag-checkboxes","tag-emojis","tag-filemaker","tag-radio-buttons","tag-webdirect"],"uagb_featured_image_src":{"full":["https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2023\/05\/WebDirect-Checkboxes.jpg",2535,1183,false],"thumbnail":["https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2023\/05\/WebDirect-Checkboxes-150x150.jpg",150,150,true],"medium":["https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2023\/05\/WebDirect-Checkboxes-300x140.jpg",300,140,true],"medium_large":["https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2023\/05\/WebDirect-Checkboxes-768x358.jpg",768,358,true],"large":["https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2023\/05\/WebDirect-Checkboxes-1024x478.jpg",1024,478,true],"1536x1536":["https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2023\/05\/WebDirect-Checkboxes-1536x717.jpg",1536,717,true],"2048x2048":["https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2023\/05\/WebDirect-Checkboxes-2048x956.jpg",2048,956,true],"woocommerce_thumbnail":["https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2023\/05\/WebDirect-Checkboxes-300x300.jpg",300,300,true],"woocommerce_single":["https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2023\/05\/WebDirect-Checkboxes-600x280.jpg",600,280,true],"woocommerce_gallery_thumbnail":["https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2023\/05\/WebDirect-Checkboxes-100x100.jpg",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":"FileMaker Checkboxes Here\u2019s a quick guide to creating visually pleasing FileMaker checkboxes and radio buttons in a format that translates to WebDirect (and even includes emojis)! Accessing FileMaker solutions via WebDirect is convenient, but has unfortunate limitations, especially when it comes to design. A common frustration among developers is that the formatting of checkboxes in…","_links":{"self":[{"href":"https:\/\/www.directimpactsolutions.com\/en\/wp-json\/wp\/v2\/posts\/12195","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=12195"}],"version-history":[{"count":5,"href":"https:\/\/www.directimpactsolutions.com\/en\/wp-json\/wp\/v2\/posts\/12195\/revisions"}],"predecessor-version":[{"id":12369,"href":"https:\/\/www.directimpactsolutions.com\/en\/wp-json\/wp\/v2\/posts\/12195\/revisions\/12369"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.directimpactsolutions.com\/en\/wp-json\/wp\/v2\/media\/12219"}],"wp:attachment":[{"href":"https:\/\/www.directimpactsolutions.com\/en\/wp-json\/wp\/v2\/media?parent=12195"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.directimpactsolutions.com\/en\/wp-json\/wp\/v2\/categories?post=12195"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.directimpactsolutions.com\/en\/wp-json\/wp\/v2\/tags?post=12195"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}