{"id":12358,"date":"2016-06-14T18:45:02","date_gmt":"2016-06-14T18:45:02","guid":{"rendered":"https:\/\/www.directimpactsolutions.com\/?p=12358"},"modified":"2023-05-22T19:50:32","modified_gmt":"2023-05-22T19:50:32","slug":"invisible-formatting-for-button-bars","status":"publish","type":"post","link":"https:\/\/www.directimpactsolutions.com\/en\/invisible-formatting-for-button-bars\/","title":{"rendered":"Invisible Formatting for Button Bars"},"content":{"rendered":"

In our\u00a0first\u00a0blog post<\/a>\u00a0on button bar techniques, I outlined why we love them so much (calculated labels!), and the main reason they\u2019re so useful (calculated labels!). In our second post on Button Bar Techniques, I delve into the first of several button bar tricks we use. One thing that these techniques all have in common is the\u00a0formatting of the button bars<\/a>. The formatting used is typically\u00a0invisible \u2013\u00a0<\/em>entirely or partially.<\/p>

What is invisible formatting?<\/h3>

By invisible formatting, I mean that we remove outlines and fills for most or all of the states (active, inactive, hover, and pressed). This way the button simply appears to be text on the layout. \u00a0Sometimes, we\u2019ll actually use the hover state, to indicate that the text can be edited, or as a navigation link. Whatever the use case, we\u2019re not making the object\u00a0look like<\/em>\u00a0a button.<\/p>

The button bar technique we use most is simply\u00a0replacing\u00a0merge data with dynamically formatted text.<\/strong><\/p>

\"\"<\/figure>

Note that the inactive state of this button bar style has no fill and no outline. The active state has no formatting either.<\/p>

Problems with Merge Fields<\/h3>

Merge fields can be useful, but without resorting to a calculated field, they can\u2019t dynamically change depending on various criteria (as when using a case statement, for example). Further, one of the biggest problems with merge fields is that the data in the field can become too long to fit in\u00a0the area allotted for the merge text (not to mention the problem with stupidly-long fully-qualified field names that won\u2019t fit in layout mode).<\/p>

Calculations in Button Bars<\/h3>

Using the calculation engine in a button bar label, you can resize or truncate text as needed to make it fit. Additionally, you gain the benefit of all the button states available (hover, active, pressed, etc), plus an icon if wanted. We now regularly\u00a0use\u00a0button bar calculated text on report subsummary parts<\/a>\u00a0to describe the section (instead of using fields or merge text).<\/p>

\"\"<\/figure>

Subsummary parts with calculated headers using button bars.<\/p>

By using a case statement, we can display just about anything we need to. By using functions like TextStyleAdd or TextColor, we can change the formatting of just parts of the text.<\/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":"

In our\u00a0first\u00a0blog post\u00a0on button bar techniques, I outlined why we love them so much (calculated labels!), and the main reason they\u2019re so useful (calculated labels!). In our second post on Button Bar Techniques, I delve into the first of several button bar tricks we use. One thing that these techniques all have in common is …<\/p>\n

Invisible Formatting for Button Bars<\/span> Read More »<\/a><\/p>\n","protected":false},"author":23,"featured_media":12364,"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":[232,269,39],"class_list":["post-12358","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-low-code","tag-button-bar-techniques","tag-button-bars","tag-filemaker"],"uagb_featured_image_src":{"full":["https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2023\/05\/Invisible-Formatting-for-Button-Bars.jpg",2535,1183,false],"thumbnail":["https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2023\/05\/Invisible-Formatting-for-Button-Bars-150x150.jpg",150,150,true],"medium":["https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2023\/05\/Invisible-Formatting-for-Button-Bars-300x140.jpg",300,140,true],"medium_large":["https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2023\/05\/Invisible-Formatting-for-Button-Bars-768x358.jpg",768,358,true],"large":["https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2023\/05\/Invisible-Formatting-for-Button-Bars-1024x478.jpg",1024,478,true],"1536x1536":["https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2023\/05\/Invisible-Formatting-for-Button-Bars-1536x717.jpg",1536,717,true],"2048x2048":["https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2023\/05\/Invisible-Formatting-for-Button-Bars-2048x956.jpg",2048,956,true],"woocommerce_thumbnail":["https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2023\/05\/Invisible-Formatting-for-Button-Bars-300x300.jpg",300,300,true],"woocommerce_single":["https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2023\/05\/Invisible-Formatting-for-Button-Bars-600x280.jpg",600,280,true],"woocommerce_gallery_thumbnail":["https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2023\/05\/Invisible-Formatting-for-Button-Bars-100x100.jpg",100,100,true]},"uagb_author_info":{"display_name":"David Weiner","author_link":"https:\/\/www.directimpactsolutions.com\/en\/author\/david-weiner\/"},"uagb_comment_info":0,"uagb_excerpt":"In our\u00a0first\u00a0blog post\u00a0on button bar techniques, I outlined why we love them so much (calculated labels!), and the main reason they\u2019re so useful (calculated labels!). In our second post on Button Bar Techniques, I delve into the first of several button bar tricks we use. One thing that these techniques all have in common is…","_links":{"self":[{"href":"https:\/\/www.directimpactsolutions.com\/en\/wp-json\/wp\/v2\/posts\/12358","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\/23"}],"replies":[{"embeddable":true,"href":"https:\/\/www.directimpactsolutions.com\/en\/wp-json\/wp\/v2\/comments?post=12358"}],"version-history":[{"count":1,"href":"https:\/\/www.directimpactsolutions.com\/en\/wp-json\/wp\/v2\/posts\/12358\/revisions"}],"predecessor-version":[{"id":12363,"href":"https:\/\/www.directimpactsolutions.com\/en\/wp-json\/wp\/v2\/posts\/12358\/revisions\/12363"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.directimpactsolutions.com\/en\/wp-json\/wp\/v2\/media\/12364"}],"wp:attachment":[{"href":"https:\/\/www.directimpactsolutions.com\/en\/wp-json\/wp\/v2\/media?parent=12358"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.directimpactsolutions.com\/en\/wp-json\/wp\/v2\/categories?post=12358"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.directimpactsolutions.com\/en\/wp-json\/wp\/v2\/tags?post=12358"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}