Localization and internationalization

​

Internationalization

Internationalization (i18n) in FlowX enables applications to be easily adapted for multiple languages and regions without altering the core code. It sets the foundation for localization by handling language structure, layout adjustments, and supporting various formats.

​

Localization

Locale settings impact all date, number, and currency formats based on the combination of region and language. The language dictates translations, while the region specifies formatting order and conventions.

​

Locale sources

Locale settings are derived from two main sources:

• Container Application: Provides global locale settings across the application.

• Application Level: Enables context-specific overrides within the application for formatting Numbers, Dates, and Currencies.

​

Core i18n & l10n features

​

Date formats

The default date format in FlowX is automatically determined by the default locale set at the application or system level. Each locale follows its region-specific date convention.

For example:

• en-US locale (United States): MM/DD/YYYY → 09/28/2024

UI Elements supporting date formats:

• Text
• Link
• Message
• Datepicker

FlowX will apply the following formatting options, adapting to the region’s standard conventions:

The following example will demonstrate how to set and display various date formats using text UI elements. We will override the default format (originating from the application level) directly in the UI Designer to showcase all available formats:

​

Number formatting

FlowX adjusts number formats to align with regional standards, including the use of appropriate decimal separators and digit grouping symbols. This ensures that numbers are displayed in a familiar format for users based on their locale.

​

Locale-specific formatting

Formatting the numbers to adapt decimal separators (comma vs. dot) and digit grouping (1,000 vs. 1.000) to match regional conventions.

​

Decimal precision

You can set minimum and maximum decimal places for numbers in application settings to store data and display it with the required precision in the data store.

• Minimum Decimals: Sets the least number of decimal places that a number will display. If a number has fewer than the specified decimals, trailing zeros will be added to meet the requirement.
• Maximum Decimals: Limits the number of decimal places a number can have. If the number exceeds this limit, it will be rounded to the specified number of decimals.

Example:

If you set both Minimum and Maximum Decimals to 3, a number like 2 would display as 2.000, and 3.14159 would be 3.141.

​

Currency formatting

FlowX provides currency formatting features that dynamically adapt to regional settings, ensuring accurate representation of financial data.

​

Currency object structure

Currencies are managed as a system object with amount and code keys, creating a wrapper that facilitates consistent handling. This design ensures that every currency display corresponds accurately to the regional and formatting standards defined by the locale. If the code is not provided, the system uses the locale to determine the appropriate currency symbol or code.

​

Display behavior

When displaying currency values, the system expects keys like loanAmount to have both amount and code properties. For example, with the locale set to en-US, the output will automatically follow the US formatting conventions, displaying amounts like “$12,000.78” when the currency is USD.

• If the value found at the key path is not an object containing amount or code, the system will display the value as-is if it is primitive. If it’s an object, it will show an empty string.
• If the key path is not defined, similar behavior applies: primitive values are displayed as-is, and objects result in an empty string.

​

Locale-sensitive formatting

Currency formatting depends primarily on the region defined by the locale, not the language.

​

Dynamic formatting in UI

FlowX dynamically applies number formatting within UI components, such as inputs and sliders. These components adjust in real-time based on the current locale, ensuring that users always see numbers in their preferred format. UI components that support currency values dynamically format them in real time. For example:

• Input fields with CURRENCY types save values in {key path}.amount and will delete the entry from the data store if the input is empty.
• Sliders will save integer values (with no decimals) to {key path}.amount and format the displayed values, including min/max labels, according to the locale and currency.

Formatting Text with locale and data from UI elements

This example demonstrates how to format a dynamic text by substituting placeholders with values from a data store, taking into account locale-specific formatting. In this case, the goal is to insert the value coming from a key called loanAmount (added on an Input UI element) into a text and format it according to the en-US locale.

Data store:

A JSON object containing key-value pairs. The loanAmount key holds a currency object with two properties:

• amount: The actual loan value (a float or number).
• code: The currency code in ISO format (e.g., “USD” for US Dollars).

  "loanAmount": {
    "amount": 12000.78,
    "code": "USD"
  }
}

Locale

The locale determines the number and currency formatting rules, such as the use of commas, periods, and currency symbols.

Locale: en-US (English - United States)

Processing

• Step 1: The platform extracts the loanAmount.amount value (12000.78) and the loanAmount.code from the data store.
• Step 2: Format the amount according to the specified locale (en-US). In this locale:
  • Use a comma , to separate thousands.
  • Use a period . to denote decimal places.
• Step 3: Replace the ${loanAmount} placeholder in the text with the formatted value $12,000.78.

Output

The resulting text with the formatted loan amount and the appropriate currency symbol for the en-US locale.

Here is the data extracted from the data store (it is available on the process instance)

​

Data model integration

FlowX integrates number formatting directly with the data model. When keys are set to number or currency types, the system automatically checks and applies precision settings during data storage. This approach ensures consistency across different data sources and UI components.

Integration Details:

• Numbers are broken down into integer and decimal parts, stored according to specified precision.
• Currency keys are managed as wrapper objects containing amount and code, formatted according to the locale settings.

​

UI Designer integration

Formatting is dependent on the locale, which includes both language and region settings. The application container provides the locale for display formatting.

Formatting settings (which is by default auto) can be switched to manual and overridden for text, message, and link components within the UI Designer’s properties tab.

The UI Designer enables application-level formatting settings for localized display of dynamic values.

​

Supported components

• Text/Message/Link: Override general localization settings to match localized content presentation.
• Input Fields: Inputs correctly format currency and number types based on regional settings.
• Sliders: Currency formatting for sliders, with suffixes disabled when currency types are detected.
• Datepickers: Date formatting