Examples - Media Manager

Examples

Complete mountVisual calls that can be dropped into the Getting Started example. Replace the existing runtime.mountVisual(...) call with one of these.

Media picker dialog

A modal where the user picks a media item, with a callback that fires on selection:

runtime.mountVisual({
  type: 'dialog',
  target: { target: 'body' },
  settings: {
    context: {
      type: 'myMedia',
      filtersByType: { allowDocuments: true },
      rowActions: {
        buttons: [
          { type: 'select', onClick: (row) => console.log('Selected:', row) },
        ],
      },
      header: {
        type: 'default',
        filters: { show: true },
      },
    },
  },
});

Full-featured inline table

An inline table featuring uploads, type filters, search, a status indicator, and row actions:

<div id="media-table" style="width: 100%; height: 700px;"></div>

runtime.mountVisual({
  type: 'table',
  target: 'media-table',
  settings: {
    context: {
      type: 'category',
      initialCategoryId: '12345',
      pageSize: 50,
      filtersByType: {
        allowDocuments: false,
        allowVideo: true,
        allowImage: true,
        allowAudio: true,
      },
      rowActions: {
        buttons: [
          { type: 'select', onClick: (row) => console.log('Selected:', row) },
        ],
        menu: [
          { action: 'delete' },
          { type: 'custom', label: 'Copy ID', onClick: (row) => navigator.clipboard.writeText(row.id) },
        ],
      },
      header: {
        type: 'default',
        breadcrumbs: { show: true, rootLabel: 'Media Library' },
        filters: {
          show: true,
          items: [
            { type: 'predefined', subType: 'freeText' },
            { type: 'predefined', subType: 'media-types', include: ['video', 'image', 'audio'] },
          ],
        },
        upload: { show: true, allowedUploadExtensions: ['mp4', 'mov', 'png', 'jpg'] },
        status: { show: true },
      },
      interceptors: {
        preGetMediaList: (action) => {
          action.filter.tagsMultiLikeAnd = 'approved';
          return action;
        },
      },
    },
  },
});