Table of Contents

Static Preview Integration Guide

Products: FastReport Cloud, FastReport Corporate Server, FastReport Publisher

This guide provides comprehensive instructions for integrating Service solutions reports into your web applications using iframes.

Basic Iframe Setup

Service solutions Static Preview service is designed to be easily embedded in your web applications using iframes. This allows you to integrate report previews seamlessly into your existing user interfaces.

<iframe 
  src="https://yourdomain.com/staticpreview/t/your-template-id?apikey=your-api-key"
  width="100%"
  height="600px"
  frameborder="0"
  style="border: 1px solid #ccc;">
</iframe>

🔗 URL Structure

The iframe source URL follows this pattern:

https://yourdomain.com/staticpreview/{type}/{report-id}?{parameters}

Example: https://fastreport.cloud/staticpreview/{type}/{report-id}?{parameters}

Where:

  • {type}: Either t for templates or r for reports
  • {report-id}: Your template or report identifier
  • {parameters}: Query string parameters for authentication and configuration

Authentication Parameters

API Key Authentication

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

Parameter: apikey

  • Required: Yes (for API key auth)
  • Description: Your API key for FastReport Cloud, FastReport Corporate Server, or FastReport Publisher.
  • Example: apikey=dw3ized7i7i97qjsrg4mesn3n8r1bpi54wbyhywpfier7er3nqjo

Access Key Authentication

<!-- For Access Key authentication -->
<iframe src="https://yourdomain.com/staticpreview/r/report-456?accessKey=your-access-key"></iframe>

Parameter: accessKey

  • Required: Yes (for access key auth)
  • Description: Temporary access key for specific report access
  • Example: accessKey=temp-key-abc123def456

Report Parameters

For templates that require parameters, use the rp parameter format:

<iframe src="https://yourdomain.com/staticpreview/t/sales-report?apikey=your-key&rp=StartDate:2023-01-01&rp=EndDate:2023-12-31&rp=Region:North"></iframe>

Parameter: rp (Report Parameters)

  • Format: rp=ParameterName:ParameterValue
  • Multiple: Use multiple rp parameters for different values
  • Description: Sets initial values for report parameters
  • Examples:
    • Date: rp=StartDate:2023-01-01
    • String: rp=CustomerName:John Doe
    • Number: rp=MinAmount:1000
    • Boolean: rp=IncludeInactive:true

The parameters must be specified inside the report template.

Localization of UI

The service automatically detects locale from:

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

Localization of Report

The report localization will be used from the report parameters itself. Or from the workspace parameters.

Responsive Iframe Examples

Full-width Responsive

<div style="position: relative; width: 100%; height: 0; padding-bottom: 75%;">
  <iframe 
    src="https://yourdomain.com/staticpreview/t/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="reportModal">
  <div class="modal-content" style="width: 90%; height: 90%;">
    <iframe 
      id="reportFrame"
      src="https://yourdomain.com/staticpreview/t/template-123?apikey=your-key"
      style="width: 100%; height: 100%; border: none;">
    </iframe>
  </div>
</div>

<script>
function openReport(templateId, apiKey, parameters = {}) {
  const baseUrl = 'https://yourdomain.com/staticpreview/t/' + templateId;
  const params = new URLSearchParams({ apikey: apiKey });
  
  // Add report parameters
  Object.entries(parameters).forEach(([key, value]) => {
    params.append('rp', `${key}:${value}`);
  });
  
  document.getElementById('reportFrame').src = baseUrl + '?' + params.toString();
  document.getElementById('reportModal').style.display = 'block';
}

// Usage
openReport('sales-report', 'your-api-key', {
  StartDate: '2023-01-01',
  EndDate: '2023-12-31',
  Region: 'North America'
});
</script>
  • Minimum Width: 400px (for mobile compatibility)
  • Minimum Height: 300px (to show at least one page)
  • Recommended: 800px × 600px or larger
  • Full-screen: Use responsive design for best experience

Security Considerations

  1. API Key Protection: Never expose API keys in client-side code for production
  2. Access Keys: Use temporary access keys when possible
  3. HTTPS: Always use HTTPS for iframe sources in production
  4. CSP Headers: Configure Content Security Policy to allow iframe sources
<iframe src="..."></iframe>

Parameter Reference

Parameter Type Required Description Example
apikey String Yes* API key for FastReport Cloud, FastReport Corporate Server, or FastReport Publisher. apikey=your-api-key
accessKey String Yes* Temporary access key accessKey=temp-key-123
rp String No Report parameter in Name:Value format rp=StartDate:2023-01-01

* Either apikey or accessKey is required depending on authentication method.