Common component properties

Properties shared across most components, like `when` and `color`.

Some properties are shared across most Jigx components.

• when
• color
• Text or Label

When

Use when to show or hide a component conditionally. It’s also used on actions to conditionally allow execution.

Accepted values

• when: true (always visible / always enabled)
• when: false (always hidden / never enabled)
• when: <expression> where the expression returns a boolean

Hiding a component does not automatically change validation rules. If a field can be hidden, keep isRequired: false or make requirement conditional too.

Example and code snippet

This example displays how the when property is used at a component level to display a component.text-field (Note requirements) only when the component.checkbox (Special Diet) is selected.

When-Display a field

When.jigx

title: Lunch Order
description: Place your lunch order here
type: jig.default

header:
  type: component.jig-header
  options:
    height: medium
    children:
      type: component.image
      options:
        source:
          uri: >
            https://images.unsplash.com/photo-1543352634-99a5d50ae78e
            ?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D
            &auto=format&fit=crop&w=1171&q=80
children:
  - type: component.entity
    options:
      children:
        - type: component.entity-field
          options:
            label: Order Date
            value: =$now()
  - type: component.form
    instanceId: MealSelection
    options:
      children:
        - type: component.dropdown
          instanceId: Meal
          options:
            label: Select your meal
            data: =@ctx.datasources.meals
            item:
              type: component.dropdown-item
              options:
                title: =@ctx.current.item.meal
                value: =@ctx.current.item.meal
        - type: component.checkbox
          instanceId: SpecialDiet
          options:
            label: Special Diet
            helperText: Select if you have special diet requirements
            isRequired: false
        - type: component.text-field
          instanceId: SpecialDietDescp
          # When the checkbox is selected the text-field is shown.
          when: =@ctx.components.SpecialDiet.state.value = true ? true:false
          options:
            label: Note Requirements
            isMultiline: true
            isRequired: false
actions:
  - children:
      - type: action.submit-form
        options:
          formId: MealSelection
          provider: DATA_PROVIDER_DYNAMIC
          title: Book Meal
          entity: default/meal-selection
          method: create
          onSuccess:
            type: action.go-back

datasource

---

Colors

Applying colors based on specific conditions: Colors can be configured based on specific conditions. For example, a payment amount exceeding a certain threshold can be displayed in red. However, conditional color configurations are only available in areas that support conditions, such as list items. In contrast, direct color options are more widely supported, for example, lists allow both conditional and direct setups, whereas interactive-images only support direct options. Additionally, certain areas restrict the available color choices, while UI elements support the predefined set of fourteen colors.

• When configuring the color property, select the color condition option.
• Under the when property, add an expression that defines the condition under which the specified color should be applied.

Conditional color

color-condition

color:
  - when: =@ctx.current.item.registered = true
    color: color2
  - when: =@ctx.current.item.registered = false
    color: color4

color (no condition)

Use the color1- color14 values available in the UI theme. Availability can vary by component.

---

Text or Label

Many Jigx components support configurable text and label properties to control how text is localized, formatted, and styled. Depending on the component, one or more of the options below may be available.

Style and formatting

Use IntelliSense in your editor to discover which text options are supported for a specific component.

Text with Locale - Text that can be translated

Text with Locale defines text that can be translated using localization keys or localized values. See localization to learn how to configure different languages.

Usage:

• This option is typically used for static labels or titles that must adapt to the user’s language.
• The value may be static or dynamically resolved.
• The localized value can be formatted according to the language, for example, currency or date and time format.

Example:

Text-with-Locale (default)

- type: component.entity-field
              options:
                label: Localized Text (Expression)
                value:
                # Text with locale configured
                  id: example-dynamic
                  values:
                    name: =@ctx.user.displayName
                    time: =$fromMillis($millis(),'[P]')
                    date:  =$fromMillis($millis(),'[D]') 

For format properties see Text with Format -Text that can be evaluated, translated, and formatted

Text-with-Locale-and-formatting

- type: component.entity
          options:
            children:
            - type: component.entity-field
              options:
                label: Localized Text (Expression)
                value:
                  # Text with locale configured.
                  id: example-dynamic
                  values:
                    name: =@ctx.user.displayName
                    time: =$fromMillis($millis(),'[P]')
                    date:  
                      # Text with formatting add to the locale config. 
                      text: =$fromMillis($millis(),'[D]') 
                      format:
                        dateFormat: 
                          ll 

Text with Format -Text that can be evaluated, translated, and formatted

Formatting rules such as currency, date, decimal, percent, or units can be applied, the default is decimal.Text formatting is supported inside localization values. Various format properties can be configured to get the required format

Usage:

• The text value is dynamic
• A specific formatting type required
• Formatting should be applied based on locale

Properties:

Category	Properties	Example
Currency	currency	Used for general monetary values, it includes a currency code and two decimal places. Default is USD. Result is $1,245.00
	currencyDisplay	It is used only when numberStyle is set to currency and is one of the following values: code: ISO 4217 alphabetic currency code symbol: localized currency symbol, such as $. narrowSymbol: narrow format symbol ($100 rather than US$100). name: localized currency name, such as dollar.
	currencySign	Is set to either standard (default) or accounting, specifying whether to render negative numbers in accounting format, often signified by parentheses. It is used only when numberStyle is currency.
Date	dateFormat	What format will be used to display the value (example: MM/DD/YYYY). default: LL LT: 3:28 PM LTS: 3:28:57 PM L: 03/03/2022 l: 3/3/2022 LL: March 3, 2022 (default) ll: Mar 3, 2022 LLL: March 3, 2022 3:28 PM lll: Mar 3, 2022 3:28 PM LLLL: Thursday, March 3, 2022 3:28 PM llll: Thu, Mar 3, 2022 3:28 PM HH:mm: 15:28 (24 hour format) fromNow: time passed since a given date toNow: time remains until a future date
Decimal	decimal	The decimal type can be used on its own or combined with currency, percent, or unit formats to define how numeric values are displayed. You can control how many digits appear before and after the decimal point by configuring the following options: minimumFractionDigits maximumFractionDigits minimumSignificantDigits maximumSignificantDigits minimumIntegerDigits For more information on these options, see Mmdn_Intl.NumberFormat() constructor documentation.
Percent	percent	5% configured as a string. =$string(0.05)
Unit	long or short	This identifies measurement units. Can be the following: acre: 5 ac (short) or 5 acres (long) bit: 5 bit (short) or 5 bits (long) byte: 5 byte (short) or 5 bytes (long) celsius: 5ºC bit (short) or 5 degrees Celsius (long) centimeter: 5 cm (short) or 5 centimeters (long) day: 5 days (short) or 5 days (long) degree: 5 deg (short) or 5 degrees (long) fahrenheit: 5ºF (short) or 5 degrees Fahrenheit (long) fluid-ounce: 5 fl oz (short) or 5 fluid ounces (long) foot: 5 ft (short) or 5 feet (long) gallon: 5 gal (short) or 5 gallons (long) gigabit: 5 Gb (short) or 5 gigabits (long) gigabyte: 5 GB (short) or 5 gigabytes (long) gram: 5 g (short) or 5 grams (long) hectare: 5 ha (short) or 5 hectares (long) hour: 5 hr (short) or 5 hours (long) inch: 5 in (short) or 5 inches (long) kilobit: 5 kb (short) or 5 kilobits (long) kilobyte: 5 kB (short) or 5 kilobytes (long) kilogram: 5 kg (short) or 5 kilograms (long) kilometer: 5 km (short) or 5 kilometers (long) liter: 500 L (short) or 500 litres (long) megabit: 5 Mb (short) or 5 megabits (long) megabyte: 5 MB (short) or 5 megabytes (long) meter: 5 m (short) or 5 meters (long) mile: 5 mi (short) or 5 miles (long) mile-scandinavian: 5 smi (short) or 5 mile-scandinavian (long) milliliter: 5 mL (short) or 5 milliliters (long) millimeter: 5 mm (short) or 5 millimeters (long) millisecond: 5 ms (short) or 5 milliseconds (long) minute: 5 min (short) or 5 minutes (long) month: 5 mths (short) or 5 months (long) ounce: 5 oz (short) or 5 ounces (long) percent: 5% (short) or 5 percent (long) petabyte: 5 PB (short) or 5 petabytes (long) pound: 5 lb (short) or 5 pounds (long) second: 5 sec (short) or 5 seconds (long) stone: 5 st (short) or 5 stones (long) terabit: 5 Tb (short) or 5 terabits (long) terabyte: 5 TB (short) or 5 terabytes (long) week: 5 wks (short) or 5 weeks (long) yard: 5 yd (short) or 5 yards (long) year: 5 yrs (short) or 5 years (long) unitDisplay: long

Example:

Currency

# Currency - basic defaults to use USD currency
- type: component.entity-field
  options:
    label: Purchase Amount
    # Select Text with Format for value key
    value:
      text: 1245,50
      # Select currency with symbol = $100
      # Select currency with code = USD100 
      format:
        numberStyle: currency
        currencySign: accounting
        currencyDisplay: symbol
 # Currency - Configure specific currency
- type: component.entity-field
  options:
    label: Purchase Amount
    # Select Text with Format for value key
    value:
      text: 1245,50
      # Select currency with symbol = €100
      # Select currency with code = EUR 100 
      format:
        currency: EUR
        currencyDisplay: code        

Text with Styles - Text value with optional formatting options and styles for enhanced text display

Purpose:

Text with Styles provides a text value with visual styling options to control how the text is displayed.

Usage:

• This option focuses on presentation rather than formatting or localization.
• Visual styling is required
• The text does not need locale-based formatting
• You want control over font size, color, weight, or layout

Properties:

Property	Example
text	Configure the text that will be displayed. You can use a datasource, expression, or string.
fontSize	Set the text's font size to medium, regular, or small. The default is regular.
color	Sets the text's color; you can also base the color on conditions by using the color conditions when property. First evaluated to true will be used. Choose a color from the provided color palette. The default color is grey if the property is not specified in the YAML. See the list of available colors in Jigx color palette.
isSubtle	Displays text with low-emphasis for secondary or supporting content.
isBold	Strong emphasis to highlight key information.
numberOfLines	Number of lines to show before truncating with ellipsis.
transform	Transform the text to uppercase, lowercase, capitalize or none

Example:

Text with styling

type: component.list-item
  options:
    # Configure each list-item to display in a container/card.   
    isContained: true
    # Define a title and apply custom styling.
    title:
      text: =@ctx.current.item.title
      # Add text color
      color: color1
      # Set the font size
      fontSize: regular
      # Make the text bold
      isBold: true
      # Configure the number of lines the text can use
      numberOfLines: 1
    # Define the color of the subtitle's text.
    subtitle:
      text: = 'Group id:'& ' ' & @ctx.current.item.groupId
      color: color4
    # Define a description, apply custom styling and wrap the text. 
    description:
      text: =@ctx.current.item.project
      isSubtle: true
      fontSize: small
      numberOfLines: 3

Text with Styles and Formats - Text value with optional formatting options and styles for enhanced text display

Purpose:

Text with Styles and Formats combines localization, formatting, and styling in a single configuration.

Usage:

• This option provides the most flexibility for displaying dynamic, localized, and visually styled text.
• The text is dynamic and translated
• Formatting (currency, date, units, etc.) is required
• Visual styling must be applied to the formatted output

Properties:

• For format properties see Text with Format -Text that can be evaluated, translated, and formatted
• For Styles properties see Text with Styles - Text value with optional formatting options and styles for enhanced text display

Example:

- type: component.list-item
    options:
      # Configure each list-item to display in a container/card.   
      isContained: true
      # Define a title and apply custom styling.
      title:
        text: =@ctx.datasources.retail.amount
        # Add Styling to text
        color: color5
        fontSize: medium
        isBold: true
        numberOfLines: 1
        # Add formating to text to define the currency
        format:
          numberStyle: currency
          currency: USD
          currencyDisplay: symbol
          maximumFractionDigits: 2