Table of Contents

Form Component

The default component for editing the main mediatype of a page. The React shell renders it as a two-column form with field-typed inputs (text, select, date, related-record pickers, toggles, …) grouped into optional sections, with a top-right Save button and a sticky left-side tab navigator.

Movies edit page rendered through the React shell

A second example — a Users admin edit page with multiple sections ("User information", "Change password", "Groups"):

Users edit page with multiple form sections

Related docs.
System Overview — RenderV2 — the request that returns {schema, data} to this widget.
6.0/React Components — Default Form Schema/Data — exact JSON shape the BFF emits.
Page Configuration — page-level flags (RETURN_URL, RETURN_AT_SAVE, SORTER, …) that affect the form wrapper.

What the React renderer gives you

  • Field-typed inputs auto-derived from the admField type via the variant mapping (Boolean → switch, Date → date, Enum → select, Related → tree-select, …).
  • A sticky left-side tab navigator that lists all the form's sections plus all sibling components (RelatedList, RelatedForm, AutoComplete, etc.). Click a tab to scroll to that section.
  • Top-right toolbar: Save (highlighted), audit/history button (when ALLOW_AUDIT_VIEW is on), tab-sorter (when SORTER is on), Delete (when permitted).
  • Per-field validation with required-asterisks, inline error markers, and the standard message vocabulary translated via {DICT:...}.
  • "Unsaved changes" guard — set by setDirty, triggers a confirm-prompt on navigation.
  • Bulk-edit mode when the user arrives via the list with multiple selected ids (/app/<pageKey>/<id1>,<id2>,...).

For a custom form-shaped widget, emit the Form Schema/Data shape and the React shell renders it with this same widget.

Configuration Keys

These are all available Configuration Keys for the Form Component.

The configuration must be inserted into the database table:

MIB3UX_PAGE_COMPONENT_CONFIGURATIONS

ALLOW_BULK_EDIT

Boolean. True (default): the page can be bulk-edited (when arrived at with multiple ids). False: bulk-edit is disabled for this component.

ASIDE_FIELDS

Specifies which columns are shown in a related aside for a specified column.

CONFIGURATION_KEY:   ASIDE_FIELDS[<RELATED_FIELD>]
CONFIGURATION_VALUE: ID,NAME,SOURCE,DATEINS,INSTANCE_ID,OWNER

ASIDE_FILTERS

Add custom filter to items shown in related aside.

CONFIGURATION_KEY:   ASIDE_FILTERS
CONFIGURATION_VALUE: { Field: 'GVP_GENRES[NAME]', Operator: 'EQUAL', Value: 'action' }

Per-field form:

CONFIGURATION_KEY:   ASIDE_FILTERS[<RELATED_FIELD>]
CONFIGURATION_VALUE: <FILTER1>,<FILTER2>

Example:

CONFIGURATION_KEY:   ASIDE_FILTERS[INSTANCE_ID]
CONFIGURATION_VALUE: { Field: 'NAME', Operator: 'STARTSWITH', Value: 'MIB' }

Dynamic value referencing a form field via [templateComponentKey.columnName]:

{Field: 'SOURCE[ID]', Operator: 'EQUAL', Value: '[mib_default_edit_template_main.SOURCE]'}

It is important to pass [ID] (or whatever field the related uses as its value), because by default MIB3 adds [NAME] as a filter of a related field.

BATCH_REFERENCE_IDENTIFIER

Sets the batch reference to something other than the component's default TemplateComponentKey. Used when multiple components share a save batch.

DENY_ON_READONLY

Boolean. True: deny save on items where the user lacks permission on any related component or field on the page. False: allow save even if the user lacks permission on some related mediatypes.

EDIT_URL

URL of a page; used when this form component is reached from a parent list. In the React era this must end with /<page-key>/{id} — see ListComponent.EDIT_URL for the full explanation of why the BFF's formPageKey regex requires the literal {id} token.

CONFIGURATION_VALUE: /app/react_movies_edit/{id}

For legacy MVC pages: display/form_mediatype/{id} works as before.

EXCLUDE_FIELDS

A comma-separated list of admField column names that should not be displayed to the user.

CONFIGURATION_KEY:   EXCLUDEFIELDS
CONFIGURATION_VALUE: name,timezone,genres

EXCLUDE_BULK_EDIT_FIELDS

A comma-separated list of admField column names that should not be displayed in the bulk-edit flow.

CONFIGURATION_KEY:   EXCLUDEBULKEDITFIELDS
CONFIGURATION_VALUE: name,timezone,genres

HIDE_BULK_EDIT

Boolean. True: the bulk-edit affordance is disabled. False (default): bulk-edit is enabled. Used when the page mediatype can be edited but some related component cannot.

INCLUDE_FIELDS

A comma-separated list of admField column names. Forces the component to display only these fields.

CONFIGURATION_KEY:   INCLUDE_FIELDS
CONFIGURATION_VALUE: name,timezone,genres

MEDIATYPE (or MEDIA_TYPE)

The name of the mediatype loaded in the component. Both spellings are accepted by the BFF for the Form Component — the hands-on tutorial and most live customer migrations use MEDIA_TYPE (with underscore). Use one consistently across a page.

READONLY

Boolean. True: forces the component to be read-only regardless of user permissions. False (default): honour user permissions.

READONLY_FIELDS

A list of fields to be made read-only regardless of user permissions.

TITLE

The title rendered in the component header.

CREATE_ONLY_FIELDS

A list of column names that are writable only during creation. After creation, the fields become read-only and show a tooltip when the cursor hovers over the title.

CONFIGURATION_KEY:   CREATE_ONLY_FIELDS
CONFIGURATION_VALUE: name,timezone,genres

The default tooltip can be customised via a dictionary entry:

<form>
    <fieldCreationOnly>Default message</fieldCreationOnly>
</form>

FORMGROUPING

Splits the form into titled blocks. Each block lists the fields it contains, in display order. Fields not in any block fall into a default block.

[{
    "order": 1,
    "title": "Movie: Date & Location",
    "fields": ["RELEASE_DATE", "COUNTRY"]
}, {
    "order": 2,
    "title": "Movie: Licensing",
    "fields": ["LICENSE_START", "LICENSE_END"]
}, {
    "order": 3,
    "title": "Movie: Others",
    "fields": ["DISTRIBUTOR_ID", "PRODUCER_ID"]
}]
Note

In React, ordering applies globally to the components on the page, so blocks may compete with the page's component structure when rendering. Parts of a component may end up at different positions on the page if grouping order conflicts with the page-level order.

REDIRECT_TO_EDIT_PAGE_BY_FIELD

Dictionary<string, Uri>. Defines a field whose value, when clicked, redirects to the edit page of the mediatype specified in the value.

CONFIGURATION_KEY:   REDIRECT_TO_EDIT_PAGE_BY_FIELD[ID]
CONFIGURATION_VALUE: react_movies_edit
Note

In the legacy MIB, applicable only to Integer and Related admField types.

FIELD_PERSIST_FORMAT

Defines the persistence format of a Cron-expression field. Default is Unix format.

  • CONFIGURATION_KEY: FIELD_PERSIST_FORMAT[<FIELD_NAME>]
  • CONFIGURATION_VALUE: Unix (default) or Aws

Configurations Exclusive to React (MibReact)

The settings below apply only when the page is rendered through the React shell (~/app/...).

MAX_FILE_SIZE

Limits upload sizes when the form has a file mediatype (e.g. Images). May also be set application-wide via MaxFileSizeDefaultValue.

MAX_FILE_SIZE[FieldName]

Limits upload sizes for related fields that point to file mediatypes.

CUSTOM_FIELD_SCHEMA[FieldName]

Used to override default field schema properties such as layout and field-specific options. Set the configuration value according to the AdmFieldType of the target field.

{
    "colFlex": 1,
    "colSpan": 12,
    "height": 300
}

ColorPicker Field

{
    "colFlex": 1,
    "colSpan": 12,
    "disabled": true,
    "disabledAlpha": true,
    "allowClear": true,
    "disabledFormat": true
}

Supported properties for ColorPicker fields:

  • colFlex: Controls the responsive width behavior of the field.
  • colSpan: Controls how many columns the field spans in the form grid.
  • disabled: Disables the field when the field is not already read-only by metadata.
  • disabledAlpha: Hides the alpha channel control when set to true.
  • allowClear: Shows a clear action when set to true.
  • disabledFormat: Disables color format switching when set to true.

DISABLE_IF_FILLED[FieldName]

Disables a field when another field or sibling component has a value.

Disable based on another field in the same form:

[
    ["{templateComponentKey}", "{otherFieldName}"]
]

Disable when a related list has items:

[
    ["{templateComponentKey}", "items"]
]

You can combine conditions — disable if any matches:

[
    ["movies-form", "Year"],
    ["genres-related-list", "items"]
]

CUSTOM_BEHAVIORS[FieldName]

Defines dynamic behaviour rules — when a criterion is met, apply an update to the field's schema and/or data.

Disable a field when another field is empty:

[
  {
    "criteria": {
      "field": { "name": "password", "variant": "input" },
      "operator": "isEmpty",
      "value": true
    },
    "update": {
      "schema": { "props": { "disabled": true } },
      "data":   { "force": true }
    }
  }
]

Clear and disable a field when another field has a specific value:

[
  {
    "criteria": {
      "field": { "name": "provider", "variant": "select" },
      "operator": "equal",
      "value": { "label": "AgileTV", "value": 90 }
    },
    "update": {
      "schema": { "props": { "options": [] } },
      "data":   { "value": [], "force": true }
    }
  }
]

For more information, see the Dynamic Form Documentation.

Custom field validation

Starting with MIB 6.0, custom validation criteria can be implemented for field persistence. See Custom Validation plugin.

Schema and Data shape

The Form Component speaks the Default Form Schema

  • Schema carries mediaType, fields[] with per-field {variant, config, props}, title, and page-level configuration (download, preview).
  • Data carries id, fields (per-field values, with {id, title, value} triples for related-typed fields), permissions, checksum.

Custom form-shaped widgets that emit this shape get rendered by the same React form widget.

Source reference
React type-key form
BFF assembly MibServer3.Web
BFF class MibServer3.Web.Component.FormComponent
MIB3UX_COMPONENTS.COMPONENT_KEY mib_default_formcomponent
React widget source packages/core-components/src/components/form/Form.tsx
Schema / data contract Default Form Schema

Custom backend, core React. Emit the Default Form Schema + Data shape from your MapSchema / MapData and set MIB3UX_TEMPLATE_COMPONENTS.COMPONENT_VIEW_TYPE = 'form'. The widget maps each AdmField variant to a control from @agilecontent/ui (Input, Select, AsyncSelect, TreeSelect, DatePicker, RangePicker, Switch, TextArea, JsonEditor, Upload, etc.); your schema's fields[].variant is what picks the control.

See also

Edit this page