Property Panel Configuration

Overview

Property panels are the tabbed side panels that appear when a user selects an asset or live channel. Each tab represents a panel (e.g. Properties, Transcript, Sharing) and is driven by the pageModules section of the portal configuration.

The portal ships with sensible defaults for every page type, so pageModules can be omitted entirely from the config. When it is present, it is used to:

• Override the splitter layout sizes for a page
• Disable specific default panels
• Add custom panels (e.g. embedded iFrames)

pageModules structure

pageModules is a top-level array in the portal config. Each entry targets one page by type and optionally carries a propertiesPanelModule and splitterSizes.

{
  "pageModules": [
    {
      "type": "assets",
      "splitterSizes": [20, 50, 25],
      "propertiesPanelModule": {
        "panels": []
      }
    }
  ]
}

pageModules properties

propertiesPanelModule properties

Page types

Default panels

The following panels are included by default for each page type. No configuration is required to enable them.

Assets, Collections, Continue Watching

Note: Some panels are also gated by top-level config flags. transcript requires showTranscripts: true, annotations requires allowAnnotations: true, clipSearch requires enableLlmSearch: true, and sharing only appears when the asset has an embed code.

Live Channels

panels array

The panels array in propertiesPanelModule is the single place for both disabling default panels and adding custom panels. Each entry is matched by its type value against the built-in defaults for the page:

• Matched entry — merged with the default, allowing any field to be overridden (including disabled: true to suppress it).
• Unmatched entry — treated as a new panel and appended after the defaults.

panels properties

Disabling default panels

Add the panel's type to panels with disabled: true to suppress it for that page.

{
  "pageModules": [
    {
      "type": "assets",
      "propertiesPanelModule": {
        "panels": [
          { "type": "sharing", "disabled": true },
          { "type": "annotations", "disabled": true }
        ]
      }
    }
  ]
}

Adding custom panels

Add a new entry to panels with a type value that does not match any default panel. The primary use case is embedding an external URL in an iFrame tab.

{
  "pageModules": [
    {
      "type": "assets",
      "propertiesPanelModule": {
        "panels": [
          {
            "title": { "en": "Rights Portal", "es": "Portal de derechos" },
            "name": "rightsPortal",
            "type": "iframe",
            "icon": "pi pi-external-link",
            "url": "https://example.com/rights",
            "order": 100,
            "targets": ["itemPreview"],
            "mediaTypes": [2]
          }
        ]
      }
    }
  ]
}

Media type values

Full examples

Assets page — disable sharing, add an iFrame panel

{
  "pageModules": [
    {
      "type": "assets",
      "splitterSizes": [20, 50, 30],
      "propertiesPanelModule": {
        "panels": [
          { "type": "sharing", "disabled": true },
          {
            "title": { "en": "Rights Portal", "es": "Portal de derechos" },
            "name": "rightsPortal",
            "type": "iframe",
            "icon": "pi pi-external-link",
            "url": "https://example.com/rights",
            "order": 100,
            "targets": ["itemPreview", "itemDialog"]
          }
        ]
      }
    }
  ]
}

Live Channels page — disable sharing

{
  "pageModules": [
    {
      "type": "liveChannels",
      "propertiesPanelModule": {
        "panels": [
          { "type": "sharing", "disabled": true }
        ]
      }
    }
  ]
}

Multiple page types in one config

In this example both pages use their default splitterSizes, so neither entry needs to declare them. The assets page disables the sharing panel; the live channels page adds a custom iFrame tab.

{
  "pageModules": [
    {
      "type": "assets",
      "propertiesPanelModule": {
        "panels": [
          { "type": "sharing", "disabled": true }
        ]
      }
    },
    {
      "type": "liveChannels",
      "propertiesPanelModule": {
        "panels": [
          {
            "title": { "en": "Stream Info" },
            "name": "streamInfo",
            "type": "iframe",
            "icon": "pi pi-info-circle",
            "url": "https://example.com/stream-info",
            "order": 30,
            "targets": ["itemPreview"]
          }
        ]
      }
    }
  ]
}

Splitter sizes

splitterSizes controls the relative width of the page's layout columns as a percentage array. The number of values must match the number of columns the page uses.

• Pages with a folder tree + content + properties layout (assets, collections) take 3 values.
• Pages with a content + properties layout (live channels, continue watching, favorites, search) take 2 values.

All values must sum to 100. If splitterSizes is omitted, the defaults from the Page Types table are applied automatically — most configurations will not need to set this at all.

"splitterSizes": [20, 55, 25]

Tip: On mobile viewports the layout switches to vertical orientation automatically regardless of the configured sizes.