Formatters (transform data for display)

Use App Connect formatters to transform values (date, currency, text, collections) using Wappler’s expression picker.

Formatters

Formatters transform values for display and simple data manipulation, without changing the source data — applied visually via the expression picker.

What a formatter is

A formatter is a method-like helper you chain in an App Connect expression (for example: text case, date formatting, currency). In Wappler you typically pick them from the expression picker.

Display-friendly

Format dates, currency, percentages, truncation.

Declarative

Keep formatting declarative in expressions.

Composable

Chain multiple formatters to get the final output.

Keep source data unchanged

Transform at the point of display

Use the picker to discover available formatters

Component folder requirement

Using formatters requires the formatter extension/component folder to be present (dmxFormatter). If you don’t see formatters in the picker, check your installed frameworks/extensions.

tip: In practice, Wappler project templates typically include the needed App Connect packages. Missing formatters often means a missing/disabled extension.

Verify dmxFormatter is installed

Check framework/extension setup

Use the picker to browse available formatters

Using the picker

In Wappler, formatters are easiest to apply via the expression picker in any bindable field.

Any bindable field can use formatters

Look for fields with an expression/binding picker (Value fields, text bindings, filters, class bindings, etc.). That’s where you can apply formatters.

Common formatter categories

Use formatters to transform strings, numbers, dates, and collections right where you display them.

Strings: lowercase/uppercase/titlecase/trunc

Numbers: formatCurrency/formatNumber/toFixed

Dates: toDate/formatDate/addDays

Collections: count/sum/avg/where/hasItems

Best practices

Avoid common mistakes and keep expressions readable.

Use the App Connect formatter names

Use the formatter names shown in the picker (lowercase/uppercase/titlecase, etc.) so you get valid results at runtime.

important: If something doesn’t appear in the picker, it’s usually not a valid formatter for that value. Prefer picking over typing.

Pick formatter names from the UI

Avoid typos in hand-written chains

Use type conversion when needed

Convert types before formatting

If a value is a string but you need numeric/date formatting, convert first (toNumber/toDate), then format.

string → toNumber → currency/number formatting

string → toDate → formatDate/addDays

check isDefined before converting when data is optional

Use filtering where it fits

Formatters are great for display and small transforms, but avoid using collection filtering formatters as a replacement for real filtering and paging on large datasets.

warning: If you notice slow UI updates, move filtering out of the browser and into Server Connect or Data View.

Small datasets: simple collection formatters are fine

Bigger datasets: use Data View for filter/sort/page

Very large datasets: filter/page in Server Connect and return only what you need

Conclusion

Formatters help you keep data clean and UI readable — applied right where you display values.

Pick your next tour

Continue with validations or filtering.