Adaptable Form

The Adaptable Form is defined in Predefined Config and then created dynamically by AdapTable as required.

It is currently used by these Modules:

ModuleDetails
AlertForm in the Alert Notification allows user to enter a different value if validation fails
ExportAdditional information can be provided for Custom Destinations

Form Definition

The Adaptable Form includes a collection of Form Fields and Form Buttons together with some top level properties (all of which are optional).

The full definition of the object is:

PropertyDescription
buttonsButtons to include in the Form
descriptionAdditional information to appear in the Form
fieldsCollection of Dynamic Fields to display
titleTitle to appear in the Form

Form Fields

An Adaptable Form will typically contain one of more Form Fields.

Each Field has a fieldType property which will cause a different input control to be created based on its value, and a defaultValue to display in the field.

note

The available input controls which can be created are: text, date, number, checkbox, and select

The object is defined as follows:

PropertyDescription
defaultValueField Default Value - can be of type string, boolean, number
fieldTypeField Type: text, date, number, checkbox, select
labelLabel to display in in the Field
nameName of the Field
optionsItems to populate the Select input

Form Buttons

An Adaptable Form can also contain a number of Adaptable Buttons.

important

For some Form use cases (e.g. Alerts) AdapTable will make sure that at least one 'OK' button is shown (which will close the Form)

The Adaptable Button is described at length here, and is defined as follows:

PropertyDescription
buttonStyleStyle for Button - can be object or function thats provides a Style object
disabledFunction that disables / enables the button based on its evaluation result
hiddenFunction which sets whether Button is hidden
iconIcon to display, requires string for URL, other props are optional
labelLabel for Button - can be string or function that provides string
onClickFunction to invoke when button is clicked
tooltipTooltip for Button - can be string or function that provides string

Validation

Each button has a disabled property, which is a user-provided boolean function.

This can be used to perform validation on the whole form, e.g. by disabling an 'OK' button if certain requirements have not been met.

In the example below we provide a form which requires a value for BidOfferSpread to be provided between 20 and 100 for the 'OK' button to be enabled.

const adaptableOptions: AdaptableOptions = {
alertOptions: {
alertForms: [
{
name: 'provideBidOfferSpreadValue',
form: {
fields: [
{
name: 'bidOfferSpread',
label: 'B/O Spread',
fieldType: 'number',
},
],
buttons: [
{
label: 'OK',
disabled: (button: AdaptableButton<AlertButtonContext>,
context: AlertButtonContext) => {
const formBOSpreadValue = context.formData?.['bidOfferSpread'];
return formBOSpreadValue > 20 && formBOSpreadValue < 100;
},
},
],
},
},
],
},
}