AutoForm is client-rendered forms driven by JSON
AutoForm uses an IFormDefinition object, which is simply a map of IFormDefinitionProperty objects. These interfaces are defined in this file.
In Syndesis this code is used to map the Syndesis map of ConfigurationProperty objects to an IFormDefinitionObject.
The propertyDefinitionSteps
field in a descriptor
can contain one or more elements of objects that contain a properties
attribute.
The properties
attribute is a map that describes each property of the configuration object that the user's extension would require.
The key for a given element in the properties
map corresponds to a key in the resulting configuredProperties
object that will be stored on the step when the user configures the extension in the editor.
Each value of the properties object must at the very least contain a type
field, which tells the UI what kind of form control to use. Other fields are optional. The fields that can be set on a given value are:
- type - Controls the kind of form control that should be displayed in the UI. The corresponding table shows how the field is mapped:
Type Value | HTML Form Control |
---|---|
boolean, checkbox | input of type "checkbox" |
int, integer, long, number | input of type "number" |
hidden | input of type "hidden" |
select | input of type "select" |
duration | a custom duration control is used |
textarea | a textarea element is used |
text, string, any unknown value | an input of type "text" is used. |
array | A special array component is used |
- required - boolean: controls whether or not the
required
attribute is set on the control, if true then the user will need to supply a value for the form to successfully validate. - secret - boolean: If specified the form control will be overridden to be an input of type
password
. - displayName - string: sets the label text for the form control, if not set then the raw property name is shown
- labelHint or labelTooltip - string: if set, a
?
icon will be displayed next to the label and the value will be shown in a popover when the user clicks on the?
icon - controlHint or controlTooltip - string: If set the value will be used to set the "title" property of the form control, resulting in a tooltip that will appear when the user hovers the mouse over the control.
- description - string: If set, the value will be shown underneath the control, generally used to display a short useful message about the field to the user.
- placeholder - string: if set, the value will be used in the form control's
placeholder
property. - enum - array: if set, the "type" will be overridden to be a "select" control. The array should contain a list of objects that contain a "label" and "value" attributes. The "label" attribute is used for each select item's label, and the "value" will be set for each select items' value.
- dataList - array: Used for "text" fields, will be used to add a "datalist" element to the form control that provides typeahead support for the user. The array should contain just strings values.
- multiple - boolean: If set to "true" for a "select" field (or a field with "enum" set) a multi-select control will be used instead of a select drop-down.
- max - number: If set for a "number" field, controls the highest value accepted by the form control.
- min - number: if set for a "number" field, controls the lowest value accepted by the form control.
- rows - number: if set for a "textarea" field, controls the number of rows initially displayed for the textarea control.
- cols - number: if set for a "textarea" field, controls the number of columns initially displayed for the textarea control.
- order - number: influences order of controls in the resulting form. The arrangement of controls will be lower values first.
const roles = [
{ name: 'Admin', id: 0 },
{ name: 'User', id: 1 },
{ name: 'Guest', id: 2 },
];
const definition: IFormDefinition = {
LIST: {
displayName: 'List',
type: 'list',
enum: [
{ label: 'Basic', value: 'Basic' },
{ label: 'SSLCert', value: 'SSLCert' },
],
},
TYPHEAD: {
displayName: 'Typehead',
type: 'typeahead',
enum: [
{ label: 'Basic', value: 'Basic' },
{ label: 'SSLCert', value: 'SSLCert' },
],
},
REDCAPCLOUD_API_URL: {
displayName: 'REDCap Cloud URL',
order: 1,
secret: false,
deprecated: false,
kind: 'parameter',
type: 'STRING',
group: 'common',
javaType: 'java.lang.String',
required: true,
},
FHIR_VERSION: {
displayName: 'FHIR Version',
defaultValue: 'DSTU2_HL7ORG',
order: 2,
secret: false,
deprecated: false,
kind: 'parameter',
type: 'string',
group: 'common',
javaType: 'java.lang.String',
enum: [
{ label: 'DSTU2', value: 'DSTU2_HL7ORG' },
{ label: 'DSTU3', value: 'DSTU3' },
{ label: 'R4', value: 'R4' },
],
},
FHIR_AUTH: {
displayName: 'FHIR Authorization',
defaultValue: 'Basic',
order: 4,
secret: false,
deprecated: false,
kind: 'parameter',
type: 'string',
group: 'common',
javaType: 'java.lang.String',
enum: [
{ label: 'Basic Auth', value: 'Basic' },
{ label: 'SSL Certificate', value: 'SSLCert' },
],
},
FHIR_USERNAME: {
displayName: 'FHIR Username',
order: 5,
secret: false,
deprecated: false,
kind: 'parameter',
type: 'STRING',
group: 'common',
javaType: 'java.lang.String',
relation: [
{ action: 'ENABLE', when: [{ id: 'FHIR_AUTH', value: 'Basic' }] },
],
},
FHIR_PASSWORD: {
displayName: 'FHIR Password',
order: 6,
secret: true,
deprecated: false,
kind: 'parameter',
type: 'STRING',
group: 'common',
javaType: 'java.lang.String',
relation: [
{ action: 'ENABLE', when: [{ id: 'FHIR_AUTH', value: 'Basic' }] },
],
},
FHIR_SSL_FILE: {
displayName: 'SSL Certificate',
order: 11,
secret: false,
deprecated: false,
kind: 'parameter',
type: 'files',
group: 'common',
javaType: 'java.lang.String',
relation: [
{
action: 'ENABLE',
when: [{ id: 'FHIR_AUTH', value: 'SSLCert' }],
},
],
},
FHIR_SSL_PASSWORD: {
displayName: 'SSL Password',
order: 12,
required: false,
secret: true,
deprecated: false,
kind: 'parameter',
type: 'STRING',
group: 'common',
javaType: 'java.lang.String',
relation: [
{
action: 'ENABLE',
when: [{ id: 'FHIR_AUTH', value: 'SSLCert' }],
},
],
},
FHIR_EPIC_CLIENT_ID: {
displayName: 'Epic client id',
order: 13,
secret: false,
deprecated: false,
kind: 'parameter',
type: 'STRING',
group: 'common',
javaType: 'java.lang.String',
relation: [
{
action: 'ENABLE',
when: [{ id: 'FHIR_AUTH', value: 'SSLCert' }],
},
],
},
DATE_TIME: {
type: 'date',
fieldAttributes: {
showTime: true,
format: 'DD MM YYYY hh:mm:ss',
},
displayName: 'DATE_TIME',
},
IS_ENABLED: {
type: 'switch',
displayName: 'Start by default',
defaultValue: false,
},
roleIds: {
displayName: 'ROLES',
defaultValue: [(roles?.find(role => role.name === 'User') || {}).id],
type: 'multi',
fieldAttributes: {
options:
roles?.map(role => ({
value: role.id,
label: role.name,
disabled: role.name === 'User',
})) || [],
},
},
IS_ALLOWED: {
displayName: 'This module is allowed for Guests',
defaulValue: false,
type: 'checkbox',
},
MAPSET: {
displayName: 'This mapset field',
type: 'mapset',
mapsetOptions: {
i18nKeyColumnTitle: 'i18nKeyColumnTitle',
i18nValueColumnTitle: 'i18nValueColumnTitle',
},
mapsetKeys: [
{
name: 'Name1',
displayName: 'DisplayName1',
},
{
name: 'Name2',
displayName: 'DisplayName2',
},
],
mapsetValueDefinition: {
required: true,
order: 1,
secret: true,
type: 'STRING',
},
},
LEGEND: {
displayName: 'This legend field',
type: 'legend',
},
DURATION: {
type: 'duration',
displayName: 'This duration field',
labelHint: 'This is label hint!!!',
defaultValue: 18000000,
},
ARRAY: {
type: 'array',
displayName: 'This array field',
arrayDefinition: {
ARRAY_1: {
type: 'string',
required: true,
displayName: 'Intire field string',
placeholder: 'Placeholder',
},
ARRAY_2: {
type: 'switch',
displayName: 'Start by checkbox',
defaultValue: false,
},
ARRAY_3: {
type: 'string',
displayName: 'Intire field 2 string',
},
},
arrayDefinitionOptions: {
rowTitle: 'Row title',
i18nAddElementText: 'Add new',
minElements: 1,
showSortControls: true,
},
},
};
<AutoForm<IFormValue>
i18nRequiredProperty={t('requiredFieldMessage')}
definition={definition}
initialValue={{}}
enableReinitialize
onSave={onSave}
validate={validateTemplateIntegrationForm}
uploadFile={handleUploadFile}
renderFileName={renderFileName}
>
{({ fields, handleSubmit, submitForm, isSubmitting }) => (
<FormSkeleton withFooterPanel>
<Formlayout
// validationResults={validationError}
onSubmit={handleSubmit}
title={'Development form'}
>
<>
{Object.keys(definition).length > 0 ? (
fields
) : (
<Alert
type="info"
showIcon
message={t('NoPropertiesToConfigured')}
/>
)}
</>
</Formlayout>
<StepsFooterPanel
cancelAction={onCancel}
nextAction={submitForm}
loading={isSubmitting}
/>
</FormSkeleton>
)}
</AutoForm>