Table of Contents

Ordered Related List Component

Like the Simple Related List but with drag-and-drop reordering. The React shell renders each row with a drag handle on the left; rows can be dragged into any position and the new order is persisted on save.

Ordered Related List in the React shell — drag handles visible on the left of each row, Add Related button top-right

The screenshot above shows the Ordered Related List rendering a small related-records set (in this case an APPs list on a parent record). Each row's leading :: icon is the drag handle — drag a row up or down to change its position in the list. The new order is persisted when the operator clicks the page-level Save button.

Related docs.
Simple Related List — base component this extends; configuration keys below are mostly identical.
System Overview — RenderV2.

Limitations:

  1. This component only accepts relation by Relationship Table (not by direct foreign key).
  2. Maximum rows per list: 15. If you need more, switch to the Simple Related List + a sort field.

Configuration Keys

These are all available Configuration Keys for the Ordered Related List Component.

The configuration must be inserted into the database table:

MIB3UX_PAGE_COMPONENT_CONFIGURATIONS

TITLE

The value is the name of the component rendered in the page.

ALLOW_ADD_EXISTING

Boolean value;

True: default value; enable render of addExisitng button into a related component

False: disable render of addExisitng button into a related component

ALLOW_ADD_NEW

Boolean value;

True: enable render of addNew button in related component;

False: disable render of addNew button in related component;

Note

This configuration is applied together with RelatedCopyType for the copy-with-relateds flow and directly affects its applicability. Here are the use cases:
RelatedCopyType.DoNotCopy,RelatedCopyType.ShallowCopy
if AllowAddNew is true and the user does not have write permission on the MediaType, the data will not be copied.
RelatedCopyType.DeepCopy
if AllowAddNew is false or the user does not have write permission on the MediaType, the data will not be copied.

ALLOW_CLEAR_ALL

Allows one to remove all items of the list just by clicking a button

Boolean value;

True: Enables the Clear All button

False: default value; Disables the Clear All button

ALLOW_EDIT

Boolean value;

True: default value; Enable page item to be edited

False: disable component edition disregarding the user permissions

ALLOW_REMOVE

Boolean value;

True: default value; Enable page item to be deleted

False: disable component deletion disregarding the user permissions

ALLOW_ROW_REORDER

Boolean Value;

True: Enable drag & drop. True is Default value

False: Desable drag & drop

Details : Allows user to drag & drop each row item to reorder the list.

ASIDE_FIELDS

Flag that specify which columns will be shown into related aside

Ex:

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

ASIDE_FILTERS

Add custom filter to items shown in related aside;

Ex: having a related field, the custom aside configuration should be:

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

In this case, only genres with value ‘ação’ should be shown

Another way to use is this one:

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

Ex:

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

It is also possible to use a dynamic value making reference of a form component field, using as Value [templateComponentKey.columnName],

for example:

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

It is important to pass the [ID] (or any field that related use as value), because by default MIB3 will add[NAME] as a filter of a related field.

Note

When MIB applies the filter and does not find the Value, it will display a message to the end user indicating that the information is missing: {DICT:validation/invalidvalueforasidefilter}. It is possible to customize the message that will be displayed to the user for each ASIDE_FILTERS configuration by specifying the new parameter: Message. Example: {Field: 'SOURCE[ID]', Operator: 'EQUAL', Value: '[mib_default_edit_template_main.SOURCE]', Message: `{DICT:validation/mycustommessage}.`}

BATCH_REFERENCE_IDENTIFIER

Set batch reference to another value instead of the component TemplateComponentkey

DENY_ON_READONLY

Boolean value;

True: Deny save on items when the user does not have permission in a related component or field in page

False: Allow save to a user even if it does not have permission of all media types in the page

EXCLUDE_FIELDS

Value is a list of admFields;

The admifields in list will not be displayed to the user.

Ex:

CONFIGURATION_KEY:   EXCLUDEFIELDS
CONFIGURATION_VALUE: name,timezone,genres

IGNORE_ADMFIELDS

Boolean Value;

True: The related admFields of a page will not be loaded.

False: Value default; load all related mediatypes associated with the main one

Details: Having a movie list page, this page contains the related fields source, genres and content category. By default, each movie that the api load also query the related fields. Now if (IGNORE_ADM_FIELDS = true) is specified the api in preload will not load the related admfields.

INCLUDE_FIELDS

Values is a List of Admfields;

Force component display only admfields contained in the passed list.

Ex:

CONFIGURATION_KEY:   INCLUDE_FIELDS
CONFIGURATION_VALUE: name,timezone,genres

IS_CHILD_REQUIRED

Boolean Value;

True: Force user add some register to a secondary component in order to save the edition

False: default value; The user does not need to add any register to the auxiliary components

Details : Having a movie form with a simple related list genres, if the flag is IsChildRequired = true to the genre component, at least one register should be added.

MEDIATYPE

The value is a name of a meditype.

This configuration defines which mediatype is loaded in the component.

PARENT_BATCH_REFERENCE_IDENTIFIER

Set parent batch reference to another value instead of the component default ParentTemplateComponentkey

PARENT_MEDIATYPE

Value is a Mediatype name;

It is used to link the main mediatype from the page with the mediatype of related component;

Ex:

Having a Movie page with a MMedias related form component.

Into the MMedias related form configuration, may be used the following:

CONFIGURATION_KEY:   PARENT_MEDIA_TYPE
CONFIGURATION_VALUE: MVP_MOVIES

Now, the mmedias items are linked with the main mediatype (movies) item.

READONLY

Boolean value;

True: force a component be read only disregarding the user permissions

False: default value; component behavior regards only user permissions

READONLY_FIELDS

List value;

Force fields in component be read only disregarding the user permissions.

Configurations Exclusive to MibReact

Below are some configurations that apply only to MibReact components.

Value type: String

Allows inserting a footer message in the component. This information can be in html format. Example:

CONFIGURATION_KEY: FOOTER_INFORMATION
CONFIGURATION_VALUE: <b>Footer Information</b>

REDIRECT_TO_EDIT_PAGE_BY_FIELD

Dictionary<string, string>;

Defines a field in the related mediatype that, when clicked, redirects to the edit page of the mediatype specified in the value.

Use as follow:

CONFIGURATION KEY:   REDIRECT_TO_EDIT_PAGE_BY_FIELD[ID] 
CONFIGURATION VALUE: react_movies_edit

Source reference
React type-key (effective) relatedList — set via COMPONENT_VIEW_TYPE. The raw class name resolves to orderedrelatedlist, which is not directly mapped in the React shell's registry today
BFF assembly MibServer3.Web
BFF class MibServer3.Web.Component.OrderedRelatedListComponent
MIB3UX_COMPONENTS.COMPONENT_KEY mib_default_orderedrelatedlistcomponent
React widget source packages/core-components/src/components/related-list/RelatedList.tsx — the drag-handle UI is enabled by the schema's Reorderable flag
Schema / data contract Default List Schema — same as Simple Related List, plus Reorderable: true

Custom backend, core React. Same shape as Simple Related List with Reorderable: true in the schema's configuration, and COMPONENT_VIEW_TYPE = 'relatedList'. The drag-and-drop behavior, the 15-row hard limit, and the persistence of the new order all live in the RelatedList.tsx widget — your C# class only needs to emit a list of items in the desired initial order.

Edit this page