Report DesignerDeveloper portal

Embedding the designer

<report-designer> is a standard custom element, so it works in any framework, or with none. The pattern is the same everywhere:

  1. Import @rd/designer once. This registers the element.
  2. Host the fonts: copy the fonts/ folders of @rd/fonts (and the optional @rd/fonts-cjk) into one served folder and set font-base-url (Install). The user guide for the Help drawer is built into the component, so there is nothing to host for help.
  3. Set objects as properties, not attributes: template, schema and gallery. HTML attributes can only carry strings.
  4. Listen to DOM events: template-change (debounced edits) and save (Ctrl/Cmd+S or the Save button). event.detail.template is a deep copy of the template.
  5. Give it a height. The element fills its container (display: block; height: 100%).

Every sample below is complete and verified (how). Working apps for each framework are also in the product's examples/hosts/ folder.

mountDesigner(): imperative API (any framework)#

If you'd rather not deal with custom-element bindings, mountDesigner creates the element inside a container and gives you a handle:

import { mountDesigner, type Template } from '@rd/designer';

const container = document.getElementById('designer-host')!;   // must have a height
const handle = mountDesigner(container, {
    template: await loadTemplate('bol'),
    schema: bolSchema,
    fontBaseUrl: '/rd-fonts/',
    lang: 'en',
    onChange: (template: Template) => console.log('edited', template.name),
    onSave: (template: Template) => saveTemplate('bol', template),
});

// later
const current = handle.getTemplate();
handle.setLang('de');
const { pageCount, license } = await handle.renderPdf();   // placeholder preview, no data, watermarked PREVIEW
console.log(current.name, pageCount, license.watermark);    // 'preview'
handle.destroy();   // removes the element and its listeners

loadTemplate, saveTemplate and bolSchema stand for your own code and values. The designer needs no license: it only authors templates, and the render service turns template + data into the final PDF (License).

Next steps#