Foundation Forms - rules

Rules enable you to add dynamic aspects to a form. For example, you can show, hide, enable or disable a UI Schema element based on another value in the form.

Rule type

Foundation forms can use a value RuleEffect enum from the jsonforms library. There are four possible options:

• RuleEffect.SHOW - shows a UI Schema element
• RuleEffect.HIDE - hides a UI Schema element
• RuleEffect.ENABLE - enables a UI Schema element
• RuleEffect.DISABLE - disables a UI Schema element

Rule condition

To create a rule in a UISchemaElement, set the rule property equal to an object with effect, which can be one of the RuleEffect enum values, and a condition.

In the condition property, you create an object with scope, a string value corresponding to the value you want to test and a schema property which evaluates the value from the scope value against a test.

Boolean rule example

In the below example, there is a checkbox withLimit. When this is set to true, it enables the limitPrice field.

const formsWithRulesJsonSchema: JSONSchema7 = {
  ...
  properties: {
    ...
    withLimit: {
      type: 'boolean'
    },
    limitPrice: {
      type: 'number'
    }
    ...
  }
};

const formsWithRulesUiSchema: UiSchema = {

  type: 'VerticalLayout',
  elements: [
    ...
    {
      type: 'Control',
      scope: '#/properties/withLimit',
      label: 'Add limit price?',
    },
    {
      type: 'Control',
      scope: '#/properties/limitPrice',
      rule: {
        effect: RuleEffect.ENABLE,
        condition: {
          scope: '#/properties/withLimit',
          schema: { const: true }
        }
      }
    }
    ...
  ]
}

The result of this is that when the withLimit box is not checked, the limit price field is disabled.

When checked, the limit price field is enabled.

Enum rule example

The example below shows you how to use the enum condition. In this case, we show the zipCode control if the user selects United States and postCode if the user selects either United Kingdom or Canada.

export const formsWithRulesUiSchema: UiSchema = {
  type: 'VerticalLayout',
  elements: [
    ...
    {
      type: 'Control',
      scope: '#/properties/country',
      label: 'Country',
    },
    {
      type: 'Control',
      scope: '#/properties/zipCode',
      rule: {
        effect: RuleEffect.HIDE,
        condition: {
          scope: '#/properties/country',
          schema: { enum: ['United Kingdom', 'Canada'] }
        }
      }
    },
    {
      type: 'Control',
      scope: '#/properties/postalCode',
      rule: {
        effect: RuleEffect.SHOW,
        condition: {
          scope: '#/properties/country',
          schema: { enum: ['United Kingdom', 'Canada'] }
        }
      }
    },
  ]
}

When the value of country is United States, the zip code field is shown.

When the value of country is either United Kingdom or Canada, the postal code field is shown.

Full source code at Rules

License

Note: this project provides front-end dependencies and uses licensed components listed in the next section; thus, licenses for those components are required during development. Contact Genesis Global for more details.

Licensed components

Genesis low-code platform