Content Renderer

The qds-content-renderer component renders a QdsContentDocument in read-only mode using the same content model consumed by the QDS designer.

Usage

<qds-content-renderer id="renderer"></qds-content-renderer>

<script type="module">
  import {
    QdsContentRegistry
  } from 'https://cdn.q360.ai/assets/components/index.js';

  const registry = new QdsContentRegistry([
    {
      type: 'smart-metric',
      label: 'Metric Tile',
      modes: ['dashboard'],
      defaultConfig: {
        metricKey: 'production'
      },
      renderTag: 'qds-smart-metric'
    }
  ]);

  const documentModel = {
    version: 1,
    mode: 'dashboard',
    title: 'Operations Review',
    blocks: [
      {
        id: 'metric-1',
        type: 'smart-metric',
        config: {
          metricKey: 'production'
        },
        layout: {
          x: 0,
          y: 0,
          w: 4,
          h: 2
        }
      }
    ]
  };

  const renderer = document.getElementById('renderer');
  renderer.registry = registry;
  renderer.context = {
    blockRegistry: registry,
    services: {
      metrics: {
        production: '12.4 mboe/d'
      }
    }
  };
  renderer.document = documentModel;
</script>

Properties

Property Type Description
document QdsContentDocument | null Content document to render
registry QdsBlockRegistry | null Built-in plus host block definitions
context QdsRenderContext Optional host services and resolver functions
mode 'runtime' | 'preview' Rendering intent for host blocks

Notes