Table of Contents

Form Component

Need a small backend tweak — a computed/derived field, a read-only field, a save-time rule or side-effect (Kafka, sync), or a custom permission? Don't reimplement the component. Override one extension seam on FormComponent and keep the Core pipeline. See Extending Core Components · Seam Reference.

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, string>. Defines a field whose value, when clicked, renders as a link to the edit page of another content item. Applicable only to Integer and Related admField types (the discriminator is the admField type, not the resulting React variant). The bracket key must match the field COLUMNNAME exactly (matched case-insensitively).

React (MibReact). The value is the bare page key — no ~, no app/ prefix, no {ID} placeholder.

CONFIGURATION_KEY:   REDIRECT_TO_EDIT_PAGE_BY_FIELD[ID]
CONFIGURATION_VALUE: react_movies_edit

The BFF emits a link descriptor on the field props and the React Form builds the route /${pageKey}/${id}:

  • Integer field → props.link = { pageKey, id }, where id is the field's own value. If the field value is empty, id is omitted and no link is rendered.
  • Related field → props.link = { pageKey } (no id; the id comes from the selected related item on the client).

Any other admField type (including Image, which shares the React related variant) does not render a link.

Note

Legacy MIB (.cshtml). The value is a URL template: a leading ~// is trimmed and the id placeholder {ID} (uppercase, case-sensitive) is replaced with the field value, e.g. ~app/mvp_movies_form/{ID}. Both a relative path and an absolute URL are accepted. The React and legacy render paths are independent; a page rendered through the React shell uses the bare-page-key form above.

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.

Slider Field

{
  "min": 0,
  "max":100,
  "step":0.5
}

Supported properties for Slider fields:

  • min: double, minimum value for the slider.
  • max: double, maximum value for the slider.
  • step: double, value step. Must be divisible by max-min.

Money Field

{
    "colFlex": 1,
    "colSpan": 12,
    "currency": "USD",
    "precision": 2,
    "maxDigits": 17,
    "stringMode": true
}

Supported properties for Money fields:

  • colFlex: Controls the responsive width behavior of the field.
  • colSpan: Controls how many columns the field spans in the form grid.
  • currency: string, currency code used to render the currency symbol. Optional; the backend passes it through without ISO validation. Defaults to null (no symbol).
  • precision: int, number of decimal places. Defaults to 2.
  • maxDigits: int, maximum number of digits accepted. Defaults to 17.
  • stringMode: bool, keeps the value as a string in the input to preserve high-precision decimals without floating-point rounding. Defaults to true.

The stored value is a numeric decimal (AdmFieldType.Money), not a string.

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, click here.

RANGE_FIELDS[FieldName]

Supports a UI "range" field that maps two backend date fields to a single frontend RangePicker. The mapping is configured at the component level through the RangeFields dictionary in the form component configuration.

Configuration key: RangeFields

  • Key: column name of the start field (for example, DATE_FROM).
  • Value: a JSON string with the following properties:
    • end (required): column name of the end field (for example, DATE_TO).
    • format (optional): frontend display format for the range (default: "DD/MM/YYYY").
    • group (optional): logical group name used to identify the range if needed.

Example configuration:

{ "end": "DATE_TO", "format": "DD/MM/YYYY", "group": "broadcastPeriod" }

SECTION_BEHAVIORS

The value is a JSON string containing an array of section behavior rules.

It is used to control the visibility of form sections dynamically based on field values.

Important: The configuration must be applied to the page component that should be affected by the visibility change. For example, if the configuration is applied to "form_1" component, when the criteria is validated, "form_1" will become visible or invisible.

Syntax

The JSON structure is: [{"criteria":{"field":{"name":["componentKey","fieldName"],"variant":"fieldType"},"operator":"operator","value":value},"update":{"visible":true|false}}]

Example

[{"criteria":{"field":{"name":["user_form","user_type"],"variant":"select"},"operator":"equal","value":"Administrator"},"update":{"visible":true}}]

Details

criteria.field.name
Array format: ["componentKey", "fieldName"]
Example: ["user_form", "user_type"]
The componentKey refers to the component containing the field to observe, while fieldName is the field that will trigger the behavior.

criteria.field.variant
Field type: "input", "select", "checkbox", etc.

criteria.operator
Supported operators: "equal", "notEqual", "contains", "isEmpty", "isNotEmpty", "greaterThan", "lessThan", "in", "notIn"

criteria.value
Any JSON value (string, number, boolean, array, null)

update.visible
true: Show the section where this configuration is applied
false: Hide the section where this configuration is applied (fields remain in data, just not rendered)

Configuration Target

The SECTION_BEHAVIORS configuration is set on the target component that should be shown/hidden.

Example scenario:

  • Page has two form components: "user_basic_info" and "user_admin_settings"
  • You want to show/hide "user_admin_settings" based on a field in "user_basic_info"
  • Apply SECTION_BEHAVIORS configuration to "user_admin_settings" component
  • Set criteria.field.name to ["user_basic_info", "user_type"]
  • When user_type changes in "user_basic_info", "user_admin_settings" visibility will update

Multiple Behaviors

Multiple behaviors can be defined in the same array:

[{"criteria":{"field":{"name":["form","field"],"variant":"select"},"operator":"equal","value":"show"},"update":{"visible":true}},{"criteria":{"field":{"name":["form","field"],"variant":"select"},"operator":"notEqual","value":"show"},"update":{"visible":false}}]

Notes

  • The JSON must be minified (no line breaks) when stored in the database
  • Invalid JSON will be ignored (section will remain visible)
  • Field values are preserved even when section is hidden
  • Behaviors are evaluated on field change events
  • The configuration affects only the component where it is applied

Custom fields validation

Starting with Mib 6.0, custom validation criteria can be implemented for field persistence. For more information, click here

======= For more information, see the Dynamic Form Documentation.

CARD_FIELD[FieldName]

Note

This configuration is mostly used for the event edition form of the epg component, but it can be used for any form.

Used to enrich a related field into a card field. It is configured through the following json:

{
          "ImageDefinition": {
            "Type": "Url",
            "ColumnName": "NAME"
          },
          "MetadataColumns": {
              "Genre": "NAME"            
          },
          "LinkFormPageKey": "epg_content_edit",          
          "DescriptionColumn": "NAME",
          "TypeColumn": "EPG_PROGRAM_TYPE_ID"
        }

Nowadays, the ImageDefinition only supports images stored in the database as a url.
The ColumnName property on ImageDefinition, as well as the DescriptionColumn and TypeColumn properties expect the column name of the related media type. Conversely, the (key, value) pairs on MetadataColumns obey the relation ([Frontent property]: [Column Name]).
List of available metadata properties:

  • "genre"
  • "year"
  • "age"
  • "rating"

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, createdAtAsUtc, addNew).
    • addNew (bool) drives the form's "New" button. The BFF mirrors it from the page's create permission (buttons.Create = component create permission + edit mode + AllowCreate), so it matches the toolbar configuration.create. It is set uniformly on every form schema of the payload — media-type edit pages and the Authorization edit pages (Users/Groups/Instances/Account) alike.
  • 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