Skip to main content

Switch Setter

In the App Designer, many component properties support more than one input mode. The Switch Setter icon Switch Setter icon appears next to these properties. Click the icon to cycle through the available setter modes for that property. The available modes depend on the property type, but can include the following:

SetterDescription
Array setterAllows you to define a list of items for properties that accept arrays.
Audio setterAllows you to select an audio file from the project's resource library.
Bool setterProvides a toggle for boolean (true/false) properties.
Expression inputAllows you to enter a JavaScript expression that is evaluated at runtime.
Function setterAllows you to define a JavaScript function for the property value.
i18n setterAllows you to bind the property to an internationalised copy entry.
Icon setterAllows you to select an icon from the platform's built-in icon library.
Image setterAllows you to select an image from the project's resource library.
Json setterProvides a JSON editor for properties that accept structured data.
MasterCode setterAllows you to bind the property to a centrally managed MasterCode entry.
Number setterProvides a numeric input for properties that accept numbers.
Object setterProvides a structured editor for properties that accept objects with named fields.
Radio group setterProvides a set of predefined options to choose from.
Select setterProvides a dropdown of predefined options, supporting single or multi-select.
Slot setterAllows you to insert a child component or slot into the property.
String setterProvides a plain text input for string properties.
Variable inputAvailable on every property that has a Switch Setter. Allows you to bind the property value to a JavaScript expression instead of a static value. Refer to Variable Binding for details on how to use it.
important

For all components, the user-defined value is on a higher priority than the default value. If both are set, the component uses user-defined value and ignores the default value.

i18n setter

Some component properties support internationalisation, allowing you to display localised text based on the user's language preference. These properties provide an i18n setter Switch Setter icon, a built-in tool for associating a property value with an i18n copy entry instead of a hard-coded string.

Supported languages

The i18n feature currently supports the following languages:

  • English
  • Chinese
  • Japanese
  • Russian
  • Italian
  • Fijian

Identify i18n-supported properties

Properties that support internationalisation display the globe icon Globe icon to the right of the input field.

Use the i18n setter

To assign an i18n copy to a property, perform the following:

  1. Click the globe icon next to the property input field. A popover opens with the following options:

    • Search defined copy
    • + New i18n copy
  2. To use an existing copy, type a keyword in the search field to find the entry, then select it from the results.

  3. To create a new copy, click + New i18n copy. The platform creates a new i18n entry and binds it to the property. You can then define translations for each supported language in the project's i18n configuration.

MasterCode setter

The MasterCode setter allows you to bind a component property to a centrally managed MasterCode entry instead of hard-coding static values.

MasterCode integration

Hard-coding values (such as dropdown options) makes maintenance difficult. MasterCode is KAIZEN's solution for centralised management of data references. You will need admin rights to perform the following:

  • Dynamic binding: Take the location options for example. Instead of manually typing options like "Singapore" or "Malaysia" into every dropdown, you can bind the component to a MasterCode, for example LocationCode.
  • Automatic updates: When you update a MasterCode value in the central system, every dropdown in every application referencing that code updates automatically.

Use the MasterCode setter

To bind a property to a MasterCode entry, perform the following:

  1. Click the Switch Setter icon next to the property input field and select MasterCode.
  2. In the MasterCode setter panel, select a MasterCode from the list or type a keyword to search for one.
  3. The property value is now dynamically sourced from the selected MasterCode entry.

Image setter

The image setter allows you to set a property value by selecting an image asset. Instead of manually entering a URL or Base64 string, you can browse and select from images that have been uploaded to the project's resource library.

To use the image setter, perform the following:

  1. Click the Switch Setter icon next to the property input field and select Image.
  2. Browse or search for an image in the asset picker that opens.
  3. Select an image to bind it to the property.

Icon setter

The icon setter allows you to set a property value by selecting an icon from the platform's built-in icon library. This is useful for properties such as button icons, sort indicators, or status icons.

To use the icon setter, perform the following:

  1. Click the Switch Setter icon next to the property input field and select Icon.
  2. Browse or search for an icon in the icon picker that opens.
  3. Select an icon to bind it to the property.

Audio setter

The audio setter allows you to set a property value by selecting an audio file from the project's resource library. This is useful for properties that play sound, such as notification or alert components.

To use the audio setter, perform the following:

  1. Click the Switch Setter icon next to the property input field and select Audio.
  2. Browse or search for an audio file in the asset picker that opens.
  3. Select an audio file to bind it to the property.

Last updated on 20 May 2026