Display-friendly
Format dates, currency, percentages, truncation.
Formatters (transform data for display)
Use App Connect formatters to transform values (date, currency, text, collections) using Wappler’s expression picker.
Formatters
Section titled “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
Section titled “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.
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
Section titled “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
Section titled “Using the picker”In Wappler, formatters are easiest to apply via the expression picker in any bindable field.
Any bindable field can use formatters
Section titled “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
Section titled “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
Section titled “Best practices”Avoid common mistakes and keep expressions readable.
Use the App Connect formatter names
Section titled “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
Section titled “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
Section titled “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
Section titled “Conclusion”Formatters help you keep data clean and UI readable — applied right where you display values.
Pick your next tour
Section titled “Pick your next tour”Continue with validations or filtering.