Make Columns and Fields Pop with Readily Available Formatters

While many Nitro App Builder users are well-acquainted with the common formatting options for dates, currency, and numbers, the Miscellaneous category tucked inside the format configuration window often flies under the radar. Yet these readily available formatters for certain types of values can instantly make your grids and forms far more intuitive and visually polished — all without writing a single line of code.

This month’s tip highlights all the easy-to-use options in the Miscellaneous section that many developers may not have noticed, which includes two styles of checkboxes, clickable email and webpage links, common phone number formats, and a progress bar for percentage values. Applying any of them takes just a couple clicks and delivers an immediate boost to your app’s usability.

Accessing the Miscellaneous Formatters

Whether you’re working with a Grid widget or a Form widget, the process is straightforward:

  1. Open your widget in the NAB Designer.
  2. On the Columns tab (for grids) or the equivalent Fields tab (for forms), click the formatting cogwheel button that appears on the far right.
  3. In the formatting window that opens, scroll down to and expand the Miscellaneous section. Note that for forms, this is only available for non-editable fields.

You’ll then see the full list of special formatters ready to apply with a single click…

Two Styles of Checkboxes for Boolean Fields

Boolean or Yes/No columns are a perfect candidate for visual improvement. Instead of displaying raw “Y/N”, “1/0”, or “True/False” text, you can render them as clean checkboxes:

  • Checkbox with box border – Shows a traditional square checkbox outline with a checkmark inside when true. Ideal when you want users to clearly see the control itself. This relatively new option was recently introduced in build 6.3.20260306.
  • Checkbox without box border (checkmark style) – Displays just the checkmark icon for true values (nothing for false). This creates a cleaner, less cluttered look that can be effective when scanning large grids.

These two options give you flexibility depending on whether you want the control to feel interactive or simply want to highlight the status at a glance.

Intuitive Email and Webpage Links

Email addresses and URLs become far more useful when they’re clickable:

  • Email link – Automatically turns a column containing an email address into a mailto: link. Users can click it to open their default email client with the address pre-filled.
  • Webpage link – Converts a URL into a clickable hyperlink that opens in a new tab.

Both formatters work beautifully in both grid columns and form fields, instantly turning plain text into actionable contact or reference points.

Common Phone Number Formats

Raw phone numbers stored as 10-digit strings (or with varying punctuation) can look messy. The phone formatters in the Miscellaneous category automatically apply popular, human-readable styles such as (123) 456-7890 or 123-456-7890.

Choose the one that best matches your organization’s preferred display style. The formatting is applied on the fly, so your underlying data stays clean.

Progress Bar for Percentage Values

When you have a column containing a decimal percentage (e.g., 0.0 to 1.0), the progress bar formatter provides an instant visual cue of completion or status.

A simple value like 0.75 becomes a colored horizontal bar showing 75% filled — perfect for dashboards, project status grids, inventory levels, or any metric where “at-a-glance” understanding matters more than the exact number.

HTML-Encoded Content

Common HTML tags like <br> (line feed) or <b> (bold) </b> are normally obeyed when being rendered inside a cell or field. But for the unique use case where you don’t want the tags to affect the display (meaning you want the tags themselves to show), the <htmlEncode renderer will actually show the tags in their raw form.

What if I Need Something Else?

When the available pre-configured formatters don’t suit a particular need for your column or field, custom formatters are always available. This is handled with a custom JavaScript function entered by clicking the < > button adjacent to the cogwheel. And thanks to the Valence Assistant AI tool, you don’t need to fret about how to code it; Rather you just describe in plain text what you want the formatted text to look like, and the tool will provide the necessary code to apply. We’ll cover this in more detail in a future post.

Why Formatters Matter

All of these pre-configured formatter options take literally seconds to apply, yet they deliver outsized improvements in user experience. Your end users spend less time deciphering data and more time acting on it. Grids become scannable at a glance, forms feel more modern and responsive, and the overall app simply looks and behaves more professionally.

Best of all, because these are built-in formatters, they require no custom code, no additional widgets, and no maintenance when Valence is upgraded.

So the next time you’re polishing a Nitro App Builder app, take a quick detour to the Miscellaneous section of the FORMAT window. You’ll be surprised how much polish you can add with a couple clicks, and your users will definitely notice the difference.