Table of Contents

Content Criteria Component

The Content Criteria Component lets an operator compose a complex content selection — a stored expression that picks a set of records from a mediatype based on field-level conditions, manual highlights, and an ordering rule. The result of the selection is what an end-application (a STB / OTT app) renders to its users when they enter the corresponding channel, swim-lane, or list.

This page is the most complex of the stock components. Plan to spend a few minutes learning the three-tab model before configuring criteria on a customer's pages.

Related docs.
Content Criteria Microservice — the backend that evaluates the criteria expression against the Data API and returns the result set.
System Overview — ContentCriteria MS — service role and inter-service topology.
Form Component — the typical parent component sitting in the same page (e.g. the Channel form on the page that hosts this criteria component).

What this component is for

A common product requirement: an editor wants to define a "channel" of content that automatically updates as content is added to the catalog. For example "New releases this month" should always show the 20 most recent movies released in the last 30 days, ordered by release date descending.

Rather than maintaining the list by hand, the editor composes a Content Criteria expression that the system evaluates at runtime:

WHERE release_date >= today() - 30 days
ORDER BY release_date DESC
LIMIT 20
PLUS the operator's hand-picked Highlights at the top

The component handles the editor flow. The Content Criteria Microservice handles the runtime evaluation. The result is consumed either via a list query on the Data API or directly via the microservice's REST API.

The three tabs

The component renders three tabs at the top of the panel:

Tab Purpose
Edit Compose the filter expression (groups, conditions, operators) and the default ordering (primary / secondary / max results).
Highlights Hand-pick records that pin to the top of the result regardless of how the filter expression scores them.
Preview See the live result set the criteria currently produces — highlights at the top, then matched records by the default ordering.

The component below is on the Movie Criteria tab of a VOD Channel edit page — the channel's playable content is defined by this criteria expression, evaluated against the MOVIES mediatype.

Edit tab — composing the filter

The Edit tab has two sections: Default Order (top) and Groups (below).

Empty Edit tab — Default Order and Groups sections

Default Order

Three controls that shape the result set's order and size:

  • Primary order — required if you want a sort. A dropdown of pre-defined sort options (each option is a Content Criteria filter configured by the implementor with the "order" usage). For Movies, typical options are License Start, License Start Descending, Release Date, etc.

    Primary order dropdown with available sort options

  • Secondary order — optional. Same dropdown vocabulary as Primary. Used as a tie-breaker when two records compare equal on the primary sort.

  • Max results — optional integer. Caps the result set to N rows. 0 (default) means no cap.

The order options the operator sees are configured by the implementor in the Content_Criteria_Filter table — see Configuring filter options at the bottom.

Groups

A criteria expression is a tree of Groups, each containing one or more Conditions. Conditions inside a group combine via an Operations between items operator (AND or OR); groups combine via an Operations between groups operator (also AND or OR):

(condition AND condition AND ...)    ← Group 1, AND inside
  OR                                 ← Operations between groups
(condition OR condition)             ← Group 2, OR inside
  OR
(condition AND condition)            ← Group 3

Click + Add Group to add a new group. A fresh group looks like:

A new Group 1 with no conditions yet

Notice three things on that screenshot:

  1. Group header shows GROUP 1 with a clone icon (copy the group with all its conditions) and a delete icon (remove the whole group).
  2. Operations between items: AND toggle on the right edge of the group — defaults to AND. Click the chevron to flip to OR.
  3. + Add Condition at the bottom of the group adds a new condition row.

The yellow banner at top of the screenshot reads:

There are more than 50% of criteria changes in GVP_MOVIES Criteria. This action can't be undone.

That's the CHANGE_THRESHOLD_BEFORE_WARNING mechanism in action — when the cumulative percentage of changed filters exceeds the configured threshold, the component shows a non-blocking warning so the operator notices large changes before saving. The percentage is recalculated on every save and reset to 0 afterwards.

Composing a condition

Each condition has two parts: field and value.

Click + Add Condition then click the Select a field dropdown to see the available fields:

Field dropdown showing customer-defined Content Criteria filters

These options come from the Content_Criteria_Filter table — each row is a named filter that maps a label (what the operator sees) to a backing field, operator, and value-renderer (input / select / tree / multiselect). Typical filters seen in the customer screenshot:

  • Past External Live Events From X hours in the past (number input)
  • Future External Live Events From X hours (number input)
  • Team/Id (related-record selector)
  • Pricing Model Group Legacy (select)
  • Pricing Category/Id (related-record selector)
  • Availability Window Start in the last X days (including) (number)
  • Release Date in the last X month(s) (number)
  • Distributor/ID - Network Catchup (related-record selector)

After choosing the field, the value widget on the right adjusts to the filter's type. For Release Date in the last X month(s), the value is a numeric input:

Two conditions in Group 1 — Release Date in last 3 months + empty second

The icons on the right of each condition row:

  • A delete icon (red trash) to remove the condition.
  • A drag handle appears between conditions when the order matters (some filter implementations care about ordering, most don't).

Some filters that look like a simple related-record selector (one value, one record) can be promoted to multi-select via the MULTI_SELECT_FILTER configuration. When promoted, the operator picks one or more values from the related mediatype and the filter behaves as IN. Common candidates: Genres, Age Ratings, Person Roles — places where the operator wants "this channel includes Drama OR Comedy" rather than "exactly one genre".

Saving and the change-threshold warning

The criteria expression is persisted as a single row in the criteria table when the operator clicks Save on the page. Before save:

  • The component validates that every condition has a non-empty value (or short-circuits to IsEmpty if the operator's filter supports it).
  • If ALLOW_EMPTY_SELECTION is false (default), at least one condition is required — saving with zero conditions is rejected unless the page only uses the Highlights pin list.
  • If the cumulative-change percentage crosses CHANGE_THRESHOLD_BEFORE_WARNING, the warning banner is shown. The save still proceeds — the warning is purely informational.

Highlights tab — manual pinning

Highlights are records the operator wants pinned at the top of the result set, regardless of where the filter expression would have placed them. Typical use: a marketing-driven hero on a swim-lane that shouldn't move even if the rest of the list churns.

The Highlights tab opens empty by default:

Empty Highlights tab with the + Add Highlight button

Click + Add Highlight to open the Add Highlight aside selector — a side panel that lets the operator pick records from the parent mediatype:

Add Highlight aside selector — Movies search + ID Equal filter + Relate button

The aside is itself a list — it has its own filter row (ID Equal + Search), sortable columns, and a Show only selected toggle to filter to records already picked. The visible columns come from HIGHLIGHTS_ASIDE_FIELDS. The aside is the same selector used elsewhere in the CMS for Add Existing flows.

Operator workflow:

  1. Tick the checkbox of each record to highlight.
  2. The Relate button at the top-right enables once at least one row is checked. Click it to add the selection to the highlights list.
  3. The aside stays open if the operator wants to keep adding; click outside the aside or the back-arrow to close it.

Back on the Highlights tab, the picked records appear as a list:

Highlights tab with three pinned records, each with a drag handle

Each row has:

  • A drag handle (••) on the left — drag to reorder the highlights among themselves. The order shown here is the order they appear in the result.
  • The columns configured by HIGHLIGHTS_ASIDE_FIELDS.
  • A delete icon on the right to remove the highlight without affecting the underlying record.

The drag-to-reorder behaviour is enabled by REORDER_HIGHLIGHTS. With it disabled, the highlights still pin to the top but cannot be reordered.

Important

Highlights are always displayed before the criteria result. They are not subject to the filter expression — even a record that wouldn't match the filter appears at the top if it was added to highlights. This is deliberate; it lets editors override the rule for one-off campaigns without touching the rule.

Preview tab — live result

The Preview tab shows the live evaluated result of the criteria expression as the operator would see it on the end-application:

Preview tab — highlights at top (badged), then criteria matches

Top of the page:

  • Search row (ID Equal + Search input) for ad-hoc lookups inside the preview.
  • Default Order heading reminding the operator of the active sort.

Each row:

  • The columns are configured by the same registry as the parent list — typically ID, DATEINS, NAME.
  • The first three rows above bear a Highlight badge on the right — these are the operator's pinned highlights.
  • The remaining rows are the criteria filter result, ordered by the Primary/Secondary order.
  • Pagination at the bottom (1-10 of 2019 items) — Preview supports the same page-size selector and Go-to as a normal list.

The Preview is read-only. Clicking a row's ID link navigates to the record's edit page via the PREVIEW_EDIT_URL configuration — useful for verifying that a record's metadata matches the operator's expectation.

The displayed columns in Preview can be customised independently of Highlights via the HIGHLIGHTS_ASIDE_FIELDS config or per-mediatype schema defaults.

End-to-end editor workflow

A typical session for an editor looks like:

  1. Open the criteria page (e.g. Movies tab on a VOD Channel edit page).
  2. Compose the filter on the Edit tab. Most start with one group, AND between items. Add Group only when an OR across two clauses is needed.
  3. Set ordering. For "new releases" type lanes, Primary = Release Date Descending, Max results = 20.
  4. Switch to Preview to verify the result set looks right. Iterate on the filter / ordering if not.
  5. Switch to Highlights to pin any campaign-specific records the filter doesn't catch (or shouldn't depend on).
  6. Switch to Preview one more time to confirm Highlights appear correctly.
  7. Save the page.

The change-threshold warning is most useful between steps 5 and 7 — if the editor accidentally widened the filter and is about to save a massively different result set, the banner gives them one last chance to double-check the Preview.

Configuring filter options (implementor task)

Everything the operator sees in the Select a field dropdown comes from the Content_Criteria_Filter table. Each row registers a named filter:

Column Purpose
Id Surrogate primary key
Public_Id (GUID) Stable identifier used by MULTI_SELECT_FILTER
Name The label the operator sees
Field / Operator Maps to the MIB API filter — e.g. RELEASE_DATE + GreaterThan
Select_Type input / select / simple_related / tree / etc. — drives the value widget
Usage filter (appears in conditions) / order (appears in Primary/Secondary order)
MediaType Optional — restricts the filter to a specific mediatype context

Adding a new filter requires a migration to the table. There is no UI for it.

Configuration Keys

Configuration goes into MIB3UX_PAGE_COMPONENT_CONFIGURATIONS.

ALLOW_BULK_EDIT

Boolean. True (default): the page can be bulk-edited (when the parent page allows it). False: bulk-edit is disabled for this component.

ALLOW_EMPTY_SELECTION

Boolean. False (default): the operator must add at least one condition (or one highlight) before save. True: save proceeds even with no conditions and no highlights — useful for criteria that defaults to "everything" until configured.

BATCH_REFERENCE_IDENTIFIER

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

CHANGE_THRESHOLD_BEFORE_WARNING

Integer between 0 and 100. Default 0 (disabled).

When set, the component computes a cumulative-change percentage during editing and shows the change-warning banner once the percentage crosses the threshold.

Calculation rules:

  • The number of filters when the criteria was loaded is the baseline. Each added / removed / changed filter contributes 100 / baseline % to the cumulative change. For 10 filters, each edit is 10 %.
  • A change to a filter's value counts as a full filter change (the same 100 / baseline %).
  • For multi-select filters, value-level changes are sub-weighted: if a filter has 5 values, each added / removed / changed value is 100/5 of the filter's weight, so on a 10-filter criteria, one value change is 0.20 * 0.10 = 2% of total.
  • Global AND/OR between groups and group-level AND/OR between conditions always counts as a change above-threshold — flipping the global operator always shows the warning.

Recommendation: CHANGE_THRESHOLD_BEFORE_WARNING = 50 for criteria that drive customer-facing surfaces; lower for criteria where accuracy is paramount.

CONTENT_CRITERIA_ID

Integer. Must reference an existing row in the criteria table. Binds a single criteria record to this component instance. Required.

CONTENT_SELECTION_FIELD

String — a database column name (integer-typed). Holds the id of the content selection (the row in the selection table that this criteria produces). Required for the criteria result to be persisted and referenced by other parts of the data model.

HIDE_BULK_EDIT

Boolean. True: bulk-edit is disabled for this component even when the parent page allows it. False (default): bulk-edit is enabled.

MAX_FILTERS

Integer. Caps the number of conditions allowed across all groups. Useful to prevent runaway criteria expressions that would be expensive to evaluate. Default: no cap.

MAX_GROUPS

Integer. Caps the number of groups. Default: no cap.

MEDIATYPE

The name of the mediatype the criteria evaluates against (e.g. MOVIES, CHANNELS). Required.

MULTI_SELECT_FILTER

A list of Public_Id GUIDs from Content_Criteria_Filter. The referenced filters become multi-select on this component instance — the operator picks multiple values and the filter behaves as IN.

CONFIGURATION_KEY:   MULTI_SELECT_FILTER
CONFIGURATION_VALUE: 7B8BD736-7A93-4054-B207-D04D658ED745,27B9F4B9-E016-451E-8784-F73FB2C3A2C8

In the example above, Genres (7B8BD736-...) and Age Rating (27B9F4B9-...) — both registered as simple_related in the filter table — are promoted to multi-select for this component.

PARENT_BATCH_REFERENCE_IDENTIFIER

Sets the parent batch reference to something other than the default ParentTemplateComponentKey. Used when this component is a child of a non-standard parent.

PARENT_MEDIATYPE

Mediatype name. Links the page's main mediatype to the mediatype this component operates on:

CONFIGURATION_KEY:   PARENT_MEDIA_TYPE
CONFIGURATION_VALUE: GVP_VOD_CHANNELS

Without this, the criteria isn't bound to the parent record and saves as a standalone selection.

READONLY

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

HIGHLIGHTS_ASIDE_FIELDS

Comma-separated list of column names shown in the Highlights tab table and the Add Highlight aside selector. Defaults to a sensible minimum (ID, NAME, DATEINS).

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

REORDER_HIGHLIGHTS

Boolean. True: drag handles appear on highlight rows and the operator can reorder them. False: highlights stay in insertion order.

TITLE

String. Override the auto-generated component title. Defaults to the mediatype display name.

PREVIEW_EDIT_URL

Uri. Partial URL used to link from a Preview row's ID to the corresponding edit page. {id} is substituted with the record's id at render time.

Legacy MVC form (concatenated with the application rootUrl):

CONFIGURATION_KEY:   PREVIEW_EDIT_URL
CONFIGURATION_VALUE: ~/display/several_sample_components_movie_form/{id}
Note

In the React shell, the CONFIGURATION_VALUE should be just the React page key (no ~/display/ prefix):

CONFIGURATION_KEY:   PREVIEW_EDIT_URL
CONFIGURATION_VALUE: react_movies_edit

Configurations Exclusive to React (MibReact)

String. Adds a footer message at the bottom of the component panel. Supports HTML.

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

Source reference
React type-key contentcriteria
BFF assembly MibServer3.Web
BFF class MibServer3.Web.Component.ContentCriteriaComponent
MIB3UX_COMPONENTS.COMPONENT_KEY mib_default_contentcriteriacomponent
React widget source packages/core-components/src/components/content-criteria/ContentCriteria.tsx
Schema / data contract Three-tab schema (Edit, Highlights, Preview) with criteria, groups, highlights, defaultOrder. The criteria language compiles to MIB API expressions — see MIB API — Simple Operations / Expressions

Custom backend, core React. The widget is tightly coupled to the Content Criteria microservice; a custom backend usually means a custom criteria evaluator, not a custom React widget. If you do need to swap the backend, set COMPONENT_VIEW_TYPE = 'contentcriteria' and emit the same shape — the Edit/Highlights/Preview UI then just works.

See also

Edit this page