Table of Contents

List Component

The default component for listing multiple items of a mediatype. The React shell renders it as a paginated, sortable, filterable table with toolbar actions (Refresh, Export, New) and per-row edit links — plus a rich filtering surface (simple search, advanced filter chips, column-header filters) that the operator can combine freely.

Movies list page rendered through the React shell

A second example with admin-page Users:

Users administration list rendered through the React shell

Related docs.
System Overview — RenderV2 — the request that returns {schema, data} to this widget.
6.0/React Components — Default List Schema/Data — exact JSON shape the BFF emits.
Component Creation — author a custom component that emits the same Schema/Data shape and gets rendered by this widget.

Page anatomy

A list page renders four bands top-to-bottom plus a left-side icon nav and a top-right toolbar:

  1. Title bar — the page title (e.g. Movies), a star to favorite the page, and the top-right toolbar (notification bell + user avatar).
  2. Filters band — the Filters @ heading with a gear icon, the active filter chips (e.g. Source), and the Add Filter + button. The top-right of this band hosts the simple-search row (field selector + value input + magnifying glass) and the action buttons (Refresh, Export, + New).
  3. Header row — the table columns. Each header is sortable (chevron pair). Most non-text columns also expose a column-header filter when clicked (different widget per field type).
  4. Body and pagination — the data rows, ending with the pagination row at the bottom (item count, page numbers, page-size selector, Go to page jump).

The features below correspond to operator actions on each of these bands.

Searching and filtering

The List Component has three independent ways to filter the data, and they compose:

Mechanism Where Best for
Simple search Top-right field-selector + input Quick one-shot search by ID or one named field
Filter chips Below the Filters header Persistent, multi-condition filters; saved across sessions
Column header filters Click a column header Per-column refinement, especially Source / Enum / Owner trees

Simple search (top-right)

The top-right band contains a field selector dropdown (default ID) paired with a search input and a magnifying-glass button.

The field selector lists every column the operator can search by:

Simple search field selector dropdown

Type a value, press Enter (or click the magnifying glass) and the search runs against the selected field with the operator implied by the field type (Equal for ID, Like for text, etc.).

Behaviour worth knowing:

  • The simple search does not stack — running a new simple search replaces any previous simple search.
  • After a successful simple search, the search is promoted into a filter chip in the Filters band, so you can keep it active while you compose other filters. The simple-search row clears.
  • This is why filter chips behave consistently regardless of whether the operator added them via the chip-row or the simple-search row.

Filter chips and the Add Filter + button

Below the Filters header, every active filter is a chip with a chevron (to expand/edit) and an X (to remove).

Filter chip after a simple-search promotion

Clicking the chevron expands the chip in-place into four dropdowns that let you edit the chip:

Filter chip expanded for editing — mediatype, field, operator, value, Save

The four dropdowns are:

  1. Mediatype — the mediatype the filter targets. Defaults to the page's main mediatype but can target a related one (so you can filter movies by their genre's name, for example).
  2. Field — the column of that mediatype.
  3. Operator — depends on the field type: Equal, NotEqual, GreaterThan, GreaterOrEqual, LessThan, LessOrEqual, Like, StartsWith, EndsWith, Contains, In, IsEmpty, IsNotEmpty.
  4. Value — the input widget matches the field's variant (date picker, select, source tree, free text, etc.).

The Add Filter + button at the end of the chip row opens the same four-dropdown popup for a brand-new filter:

Add Filter + popup opens the new-filter composer

Each chip you add becomes a row in the chip-row. Chips compose with AND semantics — the list shows items that match all active chips. To express OR between two values of the same field, prefer the In operator over two chips, or use the ADVANCED_FILTERS configuration with a Clause: "Or" join.

To the right of Add Filter + you'll see (when at least one chip is active):

  • Save filters — store the current chip set as a named saved filter (managed via the Filters gear menu → Saved filters).
  • Clear all filters — remove every chip (does not affect column-header filters; those live separately).

Column header filters

Most columns expose a filter trigger in the header — different widget per field type:

Field type (variant) Header widget
Source (tree) Tree-checkbox with expandable nodes
Enum, DropRelated, NullableDropRelated, Keyword Multi-select checkbox list
Owner (user) User-picker
Boolean Tri-state (True / False / Any)
Date, DateTime, UtcDateTime, Time Date range picker
Integer, Long, Float Min/Max range inputs
Varchar, Text, Html, Link, Ipv4 Search input

Example — the Source column opens a tree-checkbox:

Column header filter on Source — tree-checkbox with Select / Reset

Inside the popup you get a search input to filter the tree, a Reset action, and Select all. Selecting one or more values and clicking outside the popup applies the filter — the column header shows a small indicator dot while a filter is active.

Important: column-header filters are independent of the filter-chip row above. Clear all filters on the chip row does not reset column-header filters; reset each column individually via its header popup.

Sorting

Each column header has a pair of stacked chevrons (▲ / ▼). Click the column header (not the filter trigger) to sort:

  • One click → ascending.
  • Second click → descending.
  • Third click → unsorted.

The active sort indicator brightens the matching chevron. Sorting is single-column today — clicking a different column header replaces the previous sort. The sort order is included in the BFF request (?sort=<column>&order=<asc|desc>) and is preserved by RESTORE_STATE across navigation.

Filters gear menu

The gear icon next to the Filters heading opens a menu with three submenus:

Filters gear menu — Saved filters / Columns view / Search history

Submenu Purpose
Saved filters Named filter presets the operator has saved. Selecting one replaces the current chip-row. Empty until the operator clicks Save filters on an active chip row.
Columns view Reorder columns (drag the dotted handles) and toggle their visibility (eye icon). Hover and the panel pops out to the right.
Search history Recent searches by this operator, scoped to this page. Convenient for re-running a search without recomposing it.

Columns view in detail

Columns view — drag handles and visibility eye toggles

The panel lists every column in the current display order. Each row has:

  • Drag handle (••) on the left — drag to reorder.
  • Column name — bold if currently visible.
  • Visibility eye on the right — click to hide/show.

A Default view link at the top resets to the page's configured defaults (the column ordering and visibility that ship in MIB3UX_PAGE_COMPONENT_CONFIGURATIONS).

The state is per-user, per-page, persisted to the user preferences. Use the disabledHide flag in your schema to lock a column visible (e.g. the ID column on a page where IDs are mandatory).

Multi-select and bulk-edit

When ALLOW_MULTI_SELECT is true (default), each row exposes a checkbox in its first cell, and the header has a "select-all-on-this-page" checkbox.

Once at least one row is selected, the column-header row is replaced by a multi-select toolbar showing the selection count and bulk actions:

Multi-select toolbar with 3 Selected + Edit + Preview, plus the page-size dropdown open

Two bulk actions are exposed:

Action Behaviour
Edit Opens the bulk-edit page (/app/<editPage>/<id1>,<id2>,...). All selected ids load into the same form. Fields edited apply to all selected records on save. Suppress fields from bulk-edit with EXCLUDE_BULK_EDIT_FIELDS on the form.
Preview Opens a side-by-side preview of the selected records, scoped to non-excluded fields (see EXCLUDE_FROM_PREVIEW).

The selection persists across pagination — you can select 3 on page 1, flip to page 2, select 2 more, return to bulk-edit them all together.

The list itself can also be made entirely inline-editable by using the EditableListComponent C# class instead of ListComponent. In that mode every cell binds to its field's edit variant directly, and the Save button on each row commits the change to the Data API. Configuration keys are identical between the two; the difference is at the C# component level.

Toolbar actions

Top-right of the Filters band:

Button Behaviour
Refresh Re-fetches the current page of data, honouring all active filters / sort / page-size. Useful when other operators have edited records concurrently.
Export Triggers a TSV export of the fully-filtered result set (not just the visible page). The export runs through the TSV Exporter — large exports show a progress notification, complete via the FileManagement MS when UseFileManagementServiceForTsvDownload=true.
+ New Navigates to the corresponding edit page in create mode (no id in the URL). The edit page is taken from the EDIT_URL configuration of the list component (or the page's default if not set).

Pagination

The pagination band at the bottom shows:

  • X-Y of N items — current visible range and total.
  • Page numbers — < 1 2 3 4 5 ... <last> >.
  • Page-size selector — <n> / page dropdown with options 10, 20 (default), 50, 100, 250. See the same screenshot above.
  • Go to — type a page number for direct jump.

Page size is per-user, per-page; the chosen size persists in user preferences.

Per-row actions

Element Behaviour
Row checkbox Toggles row selection (multi-select).
Row ID link Navigates to the edit page in single-edit mode (/app/<editPage>/<id>). Equivalent to clicking the edit pencil.
Edit pencil Navigates to the edit page. When ALLOW_QUICK_EDIT is true, opens an edit drawer on the list page instead of full navigation.

Quick-edit drawers preserve the list's state under them — close the drawer to return to the same scroll position, selection, and active filters.

Image preview

When a column is of type Image (or any related-file column with images), the cell renders a small thumbnail next to the value, and hovering the thumbnail opens a larger preview popover. This is enabled by default; suppress it per-column-instance with HIDE_IMAGE_PREVIEW.

The preview image URL is built by combining MibMediaConfig's storage-area public base URL with the image's relative path — both the list and the related-list use the same image URL pipeline, so any storage-area routing applies consistently.

Search-text virtual column (React-only)

Setting ALLOW_SEARCHTEXT=true adds a virtual column to the field selector dropdown labelled All (or Search text). Searching against it performs a Like-style query across all visible text fields on the page. Useful when the operator doesn't know which field contains the term but knows the term itself.

The virtual column does not appear in the table headers or in Columns view — it's purely a search-target field.

Configuration Keys

These are all available Configuration Keys for the List Component. Insert them in the MIB3UX_PAGE_COMPONENT_CONFIGURATIONS table.

ALLOW_MULTI_SELECT

Boolean. True (default): row checkboxes are enabled, allowing multi-select and the bulk-edit toolbar. False: checkboxes are disabled.

ASIDE_FIELDS

Specifies which columns are shown in a related aside (the side-pane opened when adding an existing related record from a parent form that links to this list).

CONFIGURATION_KEY:   ASIDE_FIELDS
CONFIGURATION_VALUE: ID,NAME,SOURCE,DATEINS,INSTANCE_ID,OWNER

ASIDE_FILTERS

Adds custom filters to items shown in the related aside.

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

Form-style:

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

You can use a dynamic value that references a field in the main form component 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 will add [NAME] as the filter of a related field.

Note

When MIB applies the filter and does not find the Value, it will display a message indicating that the information is missing: {DICT:validation/invalidvalueforasidefilter}.
The message can be customised per ASIDE_FILTERS entry by specifying a Message parameter.

BATCH_REFERENCE_IDENTIFIER

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

EDIT_URL

URL of the edit page that the per-row edit icon and the + New button navigate to. In the React era, the URL MUST end with /<page-key>/{id} (literal {id} token). The BFF runs the regex /(?<pageKey>[^/]+)/{id}$ against this value to derive the schema's formPageKey field; without {id} the regex fails, formPageKey ends up empty, and the React list widget renders without the "+ New" button and without the per-row edit pencil. The framework later substitutes {id} with 0 for the Create action and with each row's actual id for the per-row edit link.

CONFIGURATION_VALUE: /app/react_movies_edit/{id}

For legacy MVC pages the substitution still applies but the regex gate doesn't — display/form_mediatype/{id} works as before. See Page Configuration and the live-run note in the hands-on tutorial for the full derivation.

EXCLUDE_FIELDS

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

CONFIGURATION_KEY:   EXCLUDEFIELDS
CONFIGURATION_VALUE: name,timezone,genres

EXCLUDE_FROM_PREVIEW

A comma-separated list of admField column names that should not appear in the multi-select Preview view.

CONFIGURATION_KEY:   EXCLUDEFROMPREVIEW
CONFIGURATION_VALUE: name,timezone,genres

FILTER

A MIB API filter expression applied before any operator-supplied filter — effectively a hardcoded scope.

CONFIGURATION_KEY:   FILTER
CONFIGURATION_VALUE: genre_$eq_action

For the API filter syntax, see Simple Operations — Expressions.

INCLUDE_FIELDS

A comma-separated list of admField column names. Restricts the rendered columns to this set.

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 List 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. Disables + New, the edit pencil, and inline edit (in EditableListComponent). False (default): honour user permissions.

READONLY_FIELDS

A list of fields to be made read-only regardless of user permissions. For EditableListComponent, this prevents inline edit of these columns even if the user has write permission on the mediatype.

TITLE

The title rendered in the page heading. Defaults to the mediatype's display name.

ADVANCED_FILTERS

Predefined filters added to the advanced search (the chip-row filters), applied only when the user runs an advanced search — they're not active for plain table view.

A predefined filter becomes active in a given search only if its MediaType matches one of the MediaTypes the user has set in their own chips.

The predefined filters are evaluated in isolation from the user's filters; the results are joined with AND: (PredefinedFilters) AND (UserFilters).

CONFIGURATION_KEY: ADVANCED_FILTERS
CONFIGURATION_VALUE: "[
      { MediaType: \"ALL_MIB_FIELDS_TEST\", Field: \"DATETIME\", Clause: \"Or\", Operator: \"GreaterThan\", Value: \"$DATETIME_NOW_UTC\"},
      { MediaType: \"ALL_MIB_FIELDS_TEST\", Field: \"DATETIME\", Clause: \"Or\", Operator: \"Equal\", Value: \"1698789728\"},
      { MediaType: \"CUSTOM_ENUM\", Field: \"NAME\", Clause: \"Or\", Operator: \"Like\", Value: \"%TEF%\"}
    ]"

The first filter acts on a datetime field and uses a runtime-value keyword. The second acts on the same field but with a literal Unix-Epoch date.

JSON shape:

[
   {
      "MediaType":"",
      "Field":"",
      "Clause":"",
      "Operator":"",
      "Value":""
   }
]

Clause options: and, or.

Operator options: equal, like, notequal, greaterthan, greaterorequal, lessthan, lessorequal.

Runtime substitution keywords for Value:

  • $DATETIME_NOW_UTC
  • $DATE_TODAY_UTC

If MediaType is omitted, the filter applies to the page's own mediatype.

HIDE_IMAGE_PREVIEW

Boolean. True: suppresses the inline thumbnail and hover-preview for Image columns in this component instance. False (default): the preview thumbnail + hover-popover render as usual.

Configurations Exclusive to React (MibReact)

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

MAX_FILE_SIZE[FieldName]

Limits upload sizes for related fields that point to file mediatypes. May also be set application-wide via the middleware env var MaxFileSizeDefaultValue.

ALLOW_QUICK_EDIT

Boolean. Default false. When true, the per-row edit pencil opens a side drawer on the list page instead of navigating away. Saving inside the drawer refreshes the list row in place.

ALLOW_SEARCHTEXT

Boolean. Default false. When true, adds a Search text virtual column to the simple-search field selector. Selecting it issues a Like query across every visible text-typed field — convenient when the operator knows the value but not the column.

Decorators (federated remote extensions)

Custom federated remotes can inject one decorator surface into the List widget:

Surface Federation key Visibility gate
Bulk-selection toolbar action decorators.list.selectionHeaderActions[name] Visible when one or more rows are checked. Filtered by schema.configuration[name] being truthy.

What is NOT wired today (v6.0.97 shell):

  • decorators.list.headerActions — declared in some older type definitions but not consumed. No useDecorators('list') reads it. Use selectionHeaderActions instead, or ship the action as a custom widget bound to the page template.
  • decorators.list.itemActions — same. Per-row actions on a List page are not a wired surface today. They are available on the Simple Related List (see SimpleRelatedListComponent — Header & Item Actions).

Even for selectionHeaderActions, the schema.configuration map emitted by the BFF's ListSchemaConfiguration is a closed C# class with a fixed set of keys today, so an arbitrary myCustomAction = true row in MIB3UX_PAGE_COMPONENT_CONFIGURATIONS won't reach the React schema. Wiring a per-page custom toggle currently needs a BFF patch.

Schema and Data shape

The List Component speaks the Default List Schema

  • Schema carries columns[], mediaType, filters[], formPageKey, page-level configuration (addNew, editable), and the component name.
  • Data carries items[] (with per-item fields, permissions, checksum) and total for pagination.

Custom widgets that emit this shape get rendered by the same React list widget — see Component Authoring.

Source reference
React type-key list (also editablelist, kept as an alias)
BFF assembly MibServer3.Web
BFF class MibServer3.Web.Component.ListComponent
MIB3UX_COMPONENTS.COMPONENT_KEY mib_default_listcomponent
React widget source packages/core-components/src/components/list/List.tsx
Schema / data contract Default List Schema

Custom backend, core React. To reuse this React widget from a custom C# class, emit the Default List Schema / Data shapes from your MapSchema / MapData methods and set MIB3UX_TEMPLATE_COMPONENTS.COMPONENT_VIEW_TYPE = 'list' so the shell dispatches to List.tsx. The widget reads everything it renders from that single payload — sub-features (sortable columns, filter chips, column-header filters, pagination, simple search, exports) are all driven by individual flags inside the schema.

See also

Edit this page