Table of Contents

Online Designer Integration Guide

Products: FastReport Cloud, FastReport Corporate Server, FastReport Publisher

This guide provides comprehensive instructions for integrating Online Designer into your web applications using iframes.

Basic Iframe Setup

Online Designer can be embedded into your web application using an iframe. This allows you to open and edit report templates directly inside your existing user interface.

<iframe 
  src="https://yourdomain.com/designer/?uuid=your-template-id&apikey=your-api-key&lang=en"
  width="100%"
  height="800px"
  frameborder="0"
  style="border: 1px solid #ccc;">
</iframe>

🔗 URL Structure

The iframe source URL follows this pattern:

https://yourdomain.com/designer/?uuid={template-id}&apikey={api-key}

Example: https://fastreport.cloud/designer/?uuid={template-id}&apikey={api-key}

Where:

  • {template-id}: the report template identifier
  • {api-key}: the API key used for authorization

If the template is opened using an access key, use this format:

https://yourdomain.com/designer/?uuid={template-id}:{access-key}

Authentication Parameters

API Key Authentication

<!-- For API Key authentication -->
<iframe src="https://yourdomain.com/designer/?uuid=template-123&apikey=your-api-key-here"></iframe>

Parameter: apikey

  • Required: Yes (for API key authentication)
  • Description: Your API key for FastReport Cloud, FastReport Corporate Server, or FastReport Publisher
  • Example: apikey=dw3ized7i7i97qjsrg4mesn3n8r1bpi54wbyhywpfier7er3nqjo
  • Feature: after page load, cloud-inject.js automatically adds the Authorization: Basic ... header to all same-origin fetch and XMLHttpRequest requests performed by Online Designer

Access Key Authentication

<!-- For access key authentication -->
<iframe src="https://yourdomain.com/designer/?uuid=template-123:your-access-key"></iframe>

Parameter: uuid

  • Required: Yes
  • Format: uuid=uuid:AccessKey
  • Description: Opens a template using a temporary access key without passing an API key
  • Example: uuid=66f1d8a5b7c4a1250d9f1234:temp-key-abc123def456

Template Parameters

Use the uuid parameter to open an existing template:

<iframe src="https://yourdomain.com/designer/?uuid=template-123&apikey=your-key"></iframe>

Parameter: uuid

  • Format: uuid=uuid
  • Description: Specifies which template will be opened in Online Designer
  • Examples:
    • By API key: uuid=66f1d8a5b7c4a1250d9f1234
    • By access key: uuid=66f1d8a5b7c4a1250d9f1234:temp-key-abc123def456

To edit an existing template, the uuid parameter must point to a report template available to the current user or access key.

Localization of UI

The service automatically detects locale from:

  1. Server configuration (if available)
  2. Browser language settings

Localization of Report

Localization of text, resources, and values inside the template is determined by the report template itself and workspace parameters.

Responsive Iframe Examples

Full-width Responsive

<div style="position: relative; width: 100%; height: 0; padding-bottom: 75%;">
  <iframe 
    src="https://yourdomain.com/designer/?uuid=template-123&apikey=your-key"
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none;"
    allowfullscreen>
  </iframe>
</div>

Modal/Dialog Integration

<div class="modal" id="designerModal">
  <div class="modal-content" style="width: 95%; height: 95%;">
    <iframe 
      id="designerFrame"
      src="https://yourdomain.com/designer/?uuid=template-123&apikey=your-key"
      style="width: 100%; height: 100%; border: none;">
    </iframe>
  </div>
</div>

<script>
function openDesigner(uuid, apiKey, accessKey = null) {
  const fullUuid = accessKey ? `${uuid}:${accessKey}` : uuid;
  const baseUrl = 'https://yourdomain.com/designer/';
  const params = new URLSearchParams({ uuid: fullUuid });

  if (apiKey) {
    params.set('apikey', apiKey);
  }

  document.getElementById('designerFrame').src = baseUrl + '?' + params.toString();
  document.getElementById('designerModal').style.display = 'block';
}

// Usage
openDesigner('template-123', 'your-api-key');
</script>
  • Minimum Width: 800px
  • Minimum Height: 600px
  • Recommended: 1200px × 800px or larger
  • Full-screen: Use full-screen or near full-screen mode for comfortable designer usage

Security Considerations

  1. API Key Protection: The API key in the query string is visible on the client side, so in production use only keys with the minimum required permissions
  2. Access Keys: Use temporary access keys for template-specific access whenever possible
  3. HTTPS: Always use HTTPS for iframe sources in production
  4. CSP Headers: Configure Content Security Policy to allow frame-src and connect-src to the Online Designer domain
<iframe src="..."></iframe>

Parameter Reference

Parameter Type Required Description Example
uuid String Yes Template identifier or template identifier with access key uuid=66f1d8a5b7c4a1250d9f1234
apikey String Yes* API key for FastReport Cloud, FastReport Corporate Server, or FastReport Publisher apikey=your-api-key
accessKey String Yes* Temporary access key passed as part of uuid uuid=66f1d8a5b7c4a1250d9f1234:temp-key-abc123def456

* Either apikey or an access key inside uuid is required.