Skip to main content

Foundation Forms - controls

Foundation forms has a range of advanced components for entering text, numbers, floats, dates and booleans, as well as select and autocomplete input boxes. You can use these to create polished, complex forms for your application in quick time.

Examples​

Text control​

This is the standard renderer. This creates a text-field in your form. The input takes any characters.

const textInputJsonSchema: JSONSchema7 = {
  type: "object",
  properties: {
    textInput: {
      type: "string",
      description: "kotlin.String",
    },
  },
};

const textInputUiSchema: UiSchema = {
  type: "VerticalLayout",
  elements: [{ type: "Control", scope: "#/properties/textInput" }],
};

Number control​

The number renderer creates a number-field in your form. This input only accepts numeric data. It sets a numeric value on the underlying form model.

const numberJsonSchema: JSONSchema7 = {
  type: "object",
  properties: {
    numberInput: {
      type: "number",
      description: "kotlin.Double",
    },
  },
};

const numberInputUiSchema: UiSchema = {
  type: "VerticalLayout",
  elements: [
    {
      type: "Control",
      scope: "#/properties/numberInput",
    },
  ],
};

Boolean control​

The boolean renderer creates a checkbox control. Set the type value in the JSONSchema to boolean to invoke this renderer. It sets a true or false on the underlying form model.

const booleanInputJsonSchema: JSONSchema7 = {
  type: "object",
  properties: {
    booleanInput: {
      type: "boolean",
      description: "kotlin.Boolean",
    },
  },
};

const booleanInputUiSchema: UiSchema = {
  type: "VerticalLayout",
  elements: [
    {
      type: "Control",
      scope: "#/properties/booleanInput",
    },
  ],
};

Date control​

The date control schema creates a date renderer with an input field and a date picker. To invoke this control, set the description property in the JSONSchema to org.joda.time.DateTime. The form only allows numbers to be input. It stores the date value in milliseconds in the underlying form model.

const dateInputJsonSchema: JSONSchema7 = {
  type: "object",
  properties: {
    dateInput: {
      type: "number",
      description: "org.joda.time.DateTime",
    },
  },
};

const dateInputUiSchema: UiSchema = {
  type: "VerticalLayout",
  elements: [
    {
      type: "Control",
      scope: "#/properties/dateInput",
    },
  ],
};

Password control​

The password control schema creates a password field. This is a text field with the input characters obscured. To invoke this renderer, set the isPassword property in options to be true in the JSONSchema.

const passwordInputJsonSchema: JSONSchema7 = {
  type: "object",
  properties: {
    textInput: {
      type: "string",
      description: "kotlin.String",
    },
  },
};

const passwordInputUiSchema: UiSchema = {
  type: "VerticalLayout",
  elements: [
    {
      type: "Control",
      scope: "#/properties/password",
      options: <StringRendererOptions>{
        isPassword: true,
      },
    },
  ],
};

Textarea control​

The textarea control schema creates a textarea field. This a multi-line entry field. To invoke this renderer, set the textarea property in options to be true in the JSONSchema.

const textAreaInputJsonSchema: JSONSchema7 = {
  type: "object",
  properties: {
    textarea: {
      type: "string",
      description: "kotlin.String",
    },
  },
};

const textAreaInputUiSchema: UiSchema = {
  type: "VerticalLayout",
  elements: [
    {
      type: "Control",
      scope: "#/properties/textarea",
      options: <StringRendererOptions>{
        textarea: true,
      },
    },
  ],
};

Select control​

The select control schema creates a dropdown select box. Users can select only one value from the given list.

To invoke this renderer, include an options section in the UISchemaElement with an array of data. You can specify which properties of your array objects are used for the underlying option value, valueField, and for the display value, labelField.

// Select Input
const selectData = ['Miami', 'New York', 'London', 'Dublin', 'São Paulo', 'Bengaluru']

const selectInputJsonSchema: JSONSchema7 = {
  type: "object",
  properties: {
    selectInput: {
      type: "string",
      description: "kotlin.String",
      enum: selectData,
    },
  },
};

const selectInputUiSchema: UiSchema = {
  type: "VerticalLayout",
  elements: [
    {
      type: "Control",
      scope: "#/properties/selectInput",
      options: <ConnectedRenderersOptions>{
        data: selectData.map((label) => ({ label })),
        labelField: "label",
        valueField: "label",
      },
    },
  ],
};

Connected select​

The connected select renderer creates a select input field that populates the list of dropdown options from an endpoint in your Data Server.

In the UISchemaElement options property, specify the allOptionsResourceName. In this example, we use the ALL_COUNTERPARTIES endpoint from sales-forms-examples.dataserver.kts to use the list of counterparties. The display value is the counterparty name and the underlying value is the counterparty id.

const selectInputJsonSchema: JSONSchema7 = {
  type: "object",
  properties: {
    connectedSelectInput: {
      type: "string",
      description: "kotlin.String",
    },
  },
};

const selectInputUiSchema: UiSchema = {
  type: "VerticalLayout",
  elements: [
    {
      type: "Control",
      scope: "#/properties/selectInput",
      options: <ConnectedRenderersOptions>{
        allOptionsResourceName: 'ALL_COUNTERPARTIES',
        valueField: 'COUNTERPARTY_ID',
        labelField: 'NAME',
      },
    },
  ],
};

Connected multi select​

The connected multi select renderer connects to your back end in the same way as the connected select renderer.

To invoke the connected multi select renderer, in the JSONSchema, specify the type property to be array.

const connectedMultiSelectJsonSchema: JSONSchema7 = {
  type: "object",
  properties: {
    connectedMultiSelectInput: {
      type: "array",
      description: "Kotlin.String",
    },
  },
};

const connectedMultiSelectUISchema: UiSchemaElement = {
  type: "VerticalLayout",
  elements: [
    {
      type: "Control",
      label: "Connected select",
      scope: "#/properties/connectedMultiSelectInput",
      options: {
        allOptionsResourceName: "ALL_COUNTERPARTIES",
        valueField: "COUNTERPARTY_ID",
        labelField: "NAME",
      },
    },
  ],
};

Connected Multi Select

info

After you have looked at the basics here, you can find more details in our API Docs

Full source code at Controls