Blog

Managing styles in a growing desktop application can be difficult. The most effective solution to this problem is using WPF Resource Dictionaries. By decoupling your UI logic from your code, you can create applications that are modular, easier to extend, and ready for advanced features like theming. [Learn more about WPF Overview here]

WPF offers one of the most powerful styling systems among desktop UI frameworks. However, a "God-file" App.xaml with 2,000 lines of code is a maintenance nightmare. In this guide, we will build a professional styling architecture from scratch using WPF Resource Dictionaries.

Why Use WPF Resource Dictionaries?

Organizing styles into dedicated files isn't just about aesthetics; it is about engineering a solid foundation. Implementing WPF Resource Dictionaries properly offers several key advantages:

• Maintainability: Your App.xaml remains a clean entry point instead of a dumping ground.

• Modularity: Styles are grouped by context (e.g., ButtonStyles.xaml, FormStyles.xaml).

• Reusability: You can copy your Styles folder to a new project and immediately have your custom branding.

• Scalability: This structure supports complex features like "Dark Mode" much better than a single monolithic file.

Structure Your Project

First, let’s establish a clean directory structure. Inside your project, create a new folder named Styles.

Your Solution Explorer should look like this:

Define Your Color Palette

Before styling buttons, we should define our colors. Defining them centrally in **WPF Resource Dictionaries** prevents "magic hex codes" (like #2D89EF) from being scattered all over your code.

Create Styles/Colors.xaml:

```xml
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <Color x:Key="PrimaryColor">#2D89EF</Color>
    <Color x:Key="PrimaryHoverColor">#2b73c4</Color>
    <Color x:Key="DisabledColor">#CCCCCC</Color>

    <SolidColorBrush x:Key="PrimaryBrush" Color="{StaticResource PrimaryColor}"/>
    <SolidColorBrush x:Key="PrimaryHoverBrush" Color="{StaticResource PrimaryHoverColor}"/>
    <SolidColorBrush x:Key="DisabledBrush" Color="{StaticResource DisabledColor}"/>
    <SolidColorBrush x:Key="TextBrush" Color="#333333"/>
</ResourceDictionary>

Create a Custom Button Style

Now, let's create a button that uses the colors we defined above. We will add a ControlTemplate to change the shape. Additionally, Triggers will be used to handle Hover and Pressed states smoothly.

Create Styles/ButtonStyles.xaml:

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <Style TargetType="Button" x:Key="PrimaryButton">
        <Setter Property="Background" Value="{StaticResource PrimaryBrush}"/>
        <Setter Property="Foreground" Value="White"/>
        <Setter Property="Padding" Value="15 8"/>
        <Setter Property="FontSize" Value="14"/>
        <Setter Property="BorderThickness" Value="0"/>
        <Setter Property="Cursor" Value="Hand"/>
        
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Border x:Name="border"
                            Background="{TemplateBinding Background}" 
                            CornerRadius="4"
                            SnapsToDevicePixels="True">
                        <ContentPresenter VerticalAlignment="Center"
                                          HorizontalAlignment="Center"
                                          Margin="{TemplateBinding Padding}"/>
                    </Border>
                    
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter TargetName="border" Property="Background" Value="{StaticResource PrimaryHoverBrush}"/>
                        </Trigger>
                        <Trigger Property="IsPressed" Value="True">
                             <Setter TargetName="border" Property="Opacity" Value="0.8"/>
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="False">
                            <Setter TargetName="border" Property="Background" Value="{StaticResource DisabledBrush}"/>
                            <Setter Property="Foreground" Value="#666666"/>
                            <Setter Property="Cursor" Value="Arrow"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

Key Detail: Notice the use of ControlTemplate.Triggers. This allows us to target specific elements inside the template (like the Border named "border") for visual updates.

Create a TextBox Style

TextBoxes often require specific structural elements to function correctly. Therefore, the template is slightly more complex.

Create Styles/TextBoxStyles.xaml:

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <Style TargetType="TextBox" x:Key="RoundedTextBox">
        <Setter Property="Padding" Value="5"/>
        <Setter Property="FontSize" Value="14"/>
        <Setter Property="Foreground" Value="{StaticResource TextBrush}"/>
        <Setter Property="BorderBrush" Value="#AAAAAA"/>
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="Background" Value="White"/>
        <Setter Property="VerticalContentAlignment" Value="Center"/>
        
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="TextBox">
                    <Border x:Name="border"
                            CornerRadius="4"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            Background="{TemplateBinding Background}">
                        <ScrollViewer x:Name="PART_ContentHost" Margin="0"/>
                    </Border>
                    
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsKeyboardFocused" Value="True">
                            <Setter TargetName="border" Property="BorderBrush" Value="{StaticResource PrimaryBrush}"/>
                            <Setter TargetName="border" Property="BorderThickness" Value="2"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

Why PART_ContentHost? In the template above, the ScrollViewer named PART_ContentHost is essential. It tells WPF where the actual text goes. If you omit this, your TextBox will not display text. [Internal Link: Learn more about XAML Naming Conventions]

Merging WPF Resource Dictionaries

This is the most critical step. Styles defined in separate files are invisible until they are merged into the application scope.

Open App.xaml:

<Application x:Class="MyWpfApp.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             StartupUri="MainWindow.xaml">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="Styles/Colors.xaml"/>
                <ResourceDictionary Source="Styles/ButtonStyles.xaml"/>
                <ResourceDictionary Source="Styles/TextBoxStyles.xaml"/>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

Note on Order: The order matters! Since ButtonStyles.xaml uses resources defined in Colors.xaml, Colors.xaml must be listed above it.

Using the Styles

Now that everything is wired up, using the styles in your Views (MainWindow.xaml or UserControls) is simple.

Explicit Usage

Use the x:Key you defined.

<StackPanel Margin="20" Spacing="10">
    <Button Content="Save Changes" 
            Style="{StaticResource PrimaryButton}" 
            Width="150"/>
    <TextBox Style="{StaticResource RoundedTextBox}" 
             Width="250"/>
    <Button Content="Cannot Click Me" 
            Style="{StaticResource PrimaryButton}" 
            IsEnabled="False"/>
</StackPanel>

Implicit Usage (Global Defaults)

If you want every button in your app to look like this without typing Style="{...}" every time, you can create an implicit style. Add this to Styles/GlobalStyles.xaml:

<Style TargetType="Button" BasedOn="{StaticResource PrimaryButton}"/>

Summary & Best Practices

Refactoring your UI with WPF Resource Dictionaries is a hallmark of professional development. Here is a checklist for success:

1. Logical Separation: Keep specific control styles in their own files.

2. Centralize Colors: Always use a Colors.xaml or Brushes.xaml.

3. Use BasedOn: When creating variations, use BasedOn so you avoid rewriting the template.

4. Static vs Dynamic: Use StaticResource for performance. Only use DynamicResource if you plan to change the resource while the app is running.

By following this pattern, you build a WPF application that is not only beautiful but also clean, organized, and easy to maintain. Happy coding!

References

• Microsoft Learn - Merged Resource Dictionaries

• Microsoft Learn - Styling and Templating

• Microsoft Learn - StaticResource vs. DynamicResource

• WPF TextBox Styles & Templates

If you want to quickly turn ideas into visual diagrams directly inside your code editor—or illustrate complex system architectures without opening external tools—Mermaid is exactly what you need.
This guide will help you understand what Mermaid is, why it’s useful, and how to use it effectively inside Visual Studio Code (VS Code).

What Is Mermaid?

Mermaid is a JavaScript-based tool that allows you to create diagrams using plain text. Instead of dragging and dropping shapes like traditional diagramming tools, you simply write a concise text description and Mermaid renders it into a complete diagram.

Key Advantages of Mermaid

• Text to Graphics: Write simple syntax and get a visual diagram instantly.
• Diagrams as Code: Your diagrams stay version-controlled along with source code.
• Markdown-Friendly: Works seamlessly with README files, technical documentation, and internal wiki pages.
• No Extra Tools Needed: Everything is generated from text—no manual drawing required.

Think of Mermaid as an “automatic renderer”: you write the script, and it generates the scene for you.

Why Use Mermaid in VS Code?

VS Code is one of the most widely used development environments today. Integrating Mermaid into your workflow brings several benefits:

✔ Faster Workflow

No need to switch between VS Code and external tools like Draw.io or Lucidchart.

✔ Better Visualization

Flowcharts, sequence diagrams, workflows, and architecture diagrams can be previewed directly inside Markdown.

✔ Easy Sharing

Just share your .md or .mmd file—anyone with VS Code can preview the diagram.

How to Use Mermaid in VS Code

Mermaid works in VS Code with the help of a few extensions. Below are the most common and convenient ways to use it.

Install the Required Extension

To render Mermaid diagrams directly inside Markdown (.md) files, you need the extension:

👉 Markdown Preview Mermaid Support

Installation Steps:

1. Open VS Code.
2. Press Ctrl + Shift + X to open the Extensions panel.
3. Search for Markdown Preview Mermaid Support.
4. Click Install.

Once installed, you can write Mermaid diagrams in any Markdown file like this:

mermaid

flowchart TD

    A[Start] --> B[Process]

    B --> C[End]

Open preview using Ctrl + Shift + V.

Use .mmd Files (Optional)

If you prefer to separate diagrams from your documentation, you can use dedicated Mermaid files (.mmd).

Example diagram.mmd:

sequenceDiagram

    Alice->>Bob: Hello Bob, how are you?

    Bob-->>Alice: I am good, thanks!

To preview .mmd files, you need an additional extension:

👉 Live Preview: Mermaid (or any similar Mermaid preview extension)

After installation:

• Right-click the .mmd file
• Select Open Preview

Use Live Preview (Advanced Option)

For real-time editing and instant visual feedback, use the Live Preview feature:

1. Press Ctrl + Shift + P.
2. Type Mermaid: Live Preview.
3. Select the command to open the preview window.

This is especially useful when designing complex diagrams.

Conclusion

Mermaid streamlines the entire diagramming process by transforming manual drawing into automated, text-based visualization. When combined with VS Code, it allows you to:

• manage diagrams as part of your codebase,
• maintain version history,
• and create clear, maintainable technical documentation.

Start by adding a simple diagram to your project’s README.md. Very quickly, you’ll see how powerful and convenient the diagrams-as-code approach can be.

Modern web applications often need to export reports as PDF files. Instead of building PDF layouts manually, ActiveReportsJS by Mescius allows developers to design report templates using a JSON format, then render these templates inside Next.js using dynamic parameters and data sources.

1. Introduction

In this article, we will explore how to use ActiveReportsJS inside a Next.js project to generate PDF documents on the server side. The workflow is simple: prepare a JSON report template, pass data and parameters to it, and let ActiveReportsJS create the final PDF file.

This approach is useful for invoices, summaries, forms, and any business reports that need flexible formatting. The content below uses common technical vocabulary and is designed for developers of all levels.

2. How ActiveReportsJS Works in a Next.js Environment

ActiveReportsJS is a client-side and server-side reporting engine. When used with Next.js API routes, it can render PDF files without exposing sensitive logic to the browser. The typical flow includes:

• Loading a JSON report template (.rdl.json)
• Passing parameters and dynamic data
• Rendering the report into a PDF stream
• Returning the file to the user

Below is a simplified example of how the process looks.

2.1 JSON Template Structure

A basic ActiveReportsJS template includes layout, text boxes, and bindings. Templates are normally created using the ActiveReportsJS Designer tool.

{
  "Name": "StudentReport",
  "Type": "report",
  "DataSources": [
    {
      "Name": "ReportDataSource",
      "ConnectionProperties": {
        "DataProvider": "JSON",
        "ConnectString": "jsondata="
      }
    }
  ],
  "DataSets": [
    {
      "Name": "ReportDataSet",
      "Query": {
        "DataSourceName": "ReportDataSource",
        "CommandText": "$.value[*]"
      },
      "Fields": [
        {
          "Name": "qrcd",
          "DataField": "qrcd",
          "Type": "String"
        },
        {
          "Name": "studentId",
          "DataField": "studentId",
          "Type": "String"
        },
        {
          "Name": "ticketInfo",
          "DataField": "ticketInfo",
          "Type": "Object"
        }
      ]
    }
  ],
  "Page": {
    "PageWidth": "8.5in",
    "PageHeight": "11in",
    "Margins": {
      "Top": "0.5in",
      "Bottom": "0.5in",
      "Left": "0.5in",
      "Right": "0.5in"
    }
  },
  "Body": {
    "ReportItems": [
      {
        "Type": "textbox",
        "Name": "QrcdValue",
        "Value": "=Fields!qrcd.Value",
        "Style": {
          "FontFamily": "Noto Sans JP",
          "FontSize": "10pt"
        },
        "Top": "0.9in",
        "Left": "2in",
        "Width": "5.5in",
        "Height": "0.25in"
      },
      {
        "Type": "textbox",
        "Name": "TicketIdValue",
        "Value": "=Fields!ticketInfo.Value.ticketId",
        "Style": {
          "FontFamily": "Noto Sans JP",
          "FontSize": "10pt"
        },
        "Top": "2.3in",
        "Left": "2in",
        "Width": "5.5in",
        "Height": "0.25in"
      }
    ],
    "Height": "9.8in"
  }
}

2.2 Basic PDF Generation with Parameters

The simplest example: using parameters to inject values into the report template.

// pages/api/basic-report.ts
import { NextApiRequest, NextApiResponse } from 'next';
import { 
  outputPDFByARJ, 
  createParameter
} from '@/common/utils/sample-active-report-js';

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  try {
    const { title, author } = req.query;

    // Create simple parameters
    const parameters = [
      createParameter('reportTitle', title || 'Default Report Title'),
      createParameter('authorName', author || 'Unknown Author'),
      createParameter('generationDate', new Date().toLocaleDateString('ja-JP'))
    ];

    // Generate PDF using the utility function
    await outputPDFByARJ({
      jsonUrl: '/data/basic-report-template.json',
      fileName: `basic-report-${Date.now()}.pdf`,
      parameters
    });

  } catch (error) {
    console.error('PDF Generation Error:', error);
    res.status(500).json({ error: 'Failed to generate PDF' });
  }
}

2.3 Working with Complex Data Structures

When dealing with complex business data containing nested objects, ActiveReportsJS requires careful handling. The template in our example expects data with nested structures like ticket information, status, and procedure details.

// pages/api/generate-student-report.ts
import { NextApiRequest, NextApiResponse } from 'next';
import { 
  outputPDFByARJ, 
  createParameter,
  flattenNestedObjectToParameters 
} from '@/common/utils/sample-active-report-js';

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  try {
    const { studentId, orgCode } = req.query;

    // Sample complex data structure matching the report template
    const reportData = {
      value: [
        {
          qrcd: `QR${Date.now()}`,
          studentId: studentId || "STU001",
          orgCode: orgCode || "ORG001",
          ticketInfo: {
            ticketId: `TICKET${studentId || '001'}`,
            seatNumber: "A-001",
            facultyName: "Faculty of Arts",
            departmentName: "Design",
            categoryName: "General Admission",
            area: "Main Campus"
          },
          numberInfo: {
            number: "2024001",
            appNumber: `APP${studentId || '001234'}`,
            schoolName: "Sample High School"
          },
          resultInfo: {
            status: "Passed",
            comment: "Congratulations on your success!"
          },
          procedures: {
            fee: "$3,000",
            startDate: "2024-04-01",
            endDate: "2024-04-30"
          },
          qrCodeReference: {
            comment: "Scan for details",
            destAddress: "contact@example.com",
            destName: "Admission Office"
          }
        }
      ]
    };

    // Method 1: Using createParameter for simple values
    const simpleParams = [
      createParameter('reportTitle', 'Admission Certificate'),
      createParameter('generatedDate', new Date().toISOString().split('T')[0])
    ];

    // Method 2: Using flattenNestedObjectToParameters for complex objects
    const nestedData = {
      student: {
        name: "John Doe",
        studentId: "S2024001"
      },
      contact: {
        email: "john.doe@example.com",
        phone: "+1-555-0123"
      }
    };
    
    const flattenedParams = flattenNestedObjectToParameters(nestedData);

    // Combine all parameters
    const allParameters = [...simpleParams, ...flattenedParams];

    // Generate PDF using the utility function
    await outputPDFByARJ({
      jsonUrl: '/data/student-report-template.json', // Updated generic filename
      fileName: `report-${Date.now()}.pdf`,
      parameters: allParameters,
      data: reportData
    });

  } catch (error) {
    console.error('PDF Generation Error:', error);
    res.status(500).json({ error: 'Failed to generate PDF' });
  }
}

2.4 Client-Side Integration with React Components

Here's how to integrate PDF generation into your React components:

// components/ReportGenerator.tsx
import { useState } from 'react';
import { 
  outputPDFByARJ, 
  createParameter,
  flattenNestedObjectToParameters 
} from '@/common/utils/sample-active-report-js';

// Define interface for data structure
interface ReportData {
  qrcd: string;
  studentId: string;
  orgCode: string;
  ticketInfo: {
    ticketId: string;
    seatNumber: string;
    facultyName: string;
    departmentName: string;
    categoryName: string;
    area: string;
  };
  numberInfo: {
    number: string;
    appNumber: string;
    schoolName: string;
  };
  resultInfo: {
    status: string;
    comment: string;
  };
  procedures: {
    fee: string;
    startDate: string;
    endDate: string;
  };
  qrCodeReference: {
    comment: string;
    destAddress: string;
    destName: string;
  };
}

export const ReportGenerator = () => {
  const [isGenerating, setIsGenerating] = useState(false);
  const [studentId, setStudentId] = useState('');
  const [orgCode, setOrgCode] = useState('');

  const generateReport = async () => {
    if (!studentId || !orgCode) {
      alert('Please enter Student ID and Org Code');
      return;
    }

    setIsGenerating(true);
    try {
      // Prepare complex nested data
      const data: ReportData = {
        qrcd: `QR${Date.now()}`,
        studentId,
        orgCode,
        ticketInfo: {
          ticketId: `TICKET${studentId}`,
          seatNumber: 'A-001',
          facultyName: 'Faculty of Arts',
          departmentName: 'Design',
          categoryName: 'General Admission',
          area: 'Main Campus'
        },
        numberInfo: {
          number: studentId,
          appNumber: `APP${studentId}`,
          schoolName: 'Sample High School'
        },
        resultInfo: {
          status: 'Passed',
          comment: 'Congratulations on your success.'
        },
        procedures: {
          fee: '$3,000',
          startDate: '2024-04-01',
          endDate: '2024-04-30'
        },
        qrCodeReference: {
          comment: 'Access Link',
          destAddress: 'contact@example.com',
          destName: 'Office'
        }
      };

      // Create parameters using utility functions
      const parameters = [
        createParameter('reportTitle', 'Admission Certificate'),
        createParameter('generationTime', new Date().toLocaleString('en-US')),
        ...flattenNestedObjectToParameters({
          metadata: {
            version: '1.0',
            generatedBy: 'Report System'
          }
        })
      ];

      // Generate PDF with complex data
      await outputPDFByARJ({
        jsonUrl: '/data/student-report-template.json',
        fileName: `admission-certificate-${studentId}.pdf`,
        parameters,
        data: { value: [data] } // Wrap in { value: [...] } as expected by template
      });

      alert('PDF generated successfully!');
    } catch (error) {
      console.error('Generation failed:', error);
      alert('Failed to generate PDF. Please try again.');
    } finally {
      setIsGenerating(false);
    }
  };

  return { generateReport };
}

2.5 Understanding the outputPDFByARJ Function

Before diving into complex examples, let's understand the outputPDFByARJ function - this is the main utility function for generating PDFs from JSON templates:

/**
 * Generates and downloads a PDF file from a report definition JSON (RDL).
 * This function fetches the report layout, applies specified parameters, runs the report,
 * and then exports the result as a PDF, triggering a download in the browser.
 */
export const outputPDFByARJ = async ({
  jsonUrl,
  fileName,
  parameters,
  password,
  data,
}: OutputPdfParams): Promise => {
  // Check if running in browser environment
  if (typeof window === 'undefined') {
    console.log('PDF Output Error: Not running in browser environment');
    return;
  }

  // Helper: Temporarily neutralize i18n mutating methods to avoid vendor side-effects
  const runWithI18nPatched = async (work: () => Promise) => {
    // Save original methods
    const i18nAny = i18n as unknown as Record<string, unknown>;
    const original = {
      use: i18nAny.use,
      init: i18nAny.init,
      changeLanguage: i18nAny.changeLanguage,
      addResourceBundle: i18nAny.addResourceBundle,
      addResources: i18nAny.addResources,
      addResource: i18nAny.addResource,
      loadLanguages: i18nAny.loadLanguages,
      loadNamespaces: i18nAny.loadNamespaces,
    };

    // Patch to no-ops (non-mutating)
    i18nAny.use = () => i18n;
    i18nAny.init = () => i18n;
    i18nAny.changeLanguage = () => i18n.language;
    i18nAny.addResourceBundle = () => undefined;
    i18nAny.addResources = () => undefined;
    i18nAny.addResource = () => undefined;
    i18nAny.loadLanguages = () => undefined;
    i18nAny.loadNamespaces = () => undefined;

    try {
      await work();
    } finally {
      // Restore originals
      i18nAny.use = original.use;
      i18nAny.init = original.init;
      i18nAny.changeLanguage = original.changeLanguage;
      i18nAny.addResourceBundle = original.addResourceBundle;
      i18nAny.addResources = original.addResources;
      i18nAny.addResource = original.addResource;
      i18nAny.loadLanguages = original.loadLanguages;
      i18nAny.loadNamespaces = original.loadNamespaces;
    }
  };

  await runWithI18nPatched(async () => {
    // Dynamically import ActiveReports to avoid SSR issues
    const { Core, PdfExport } = await import(
      './wrappers/activereports-wrapper'
    );

    // Fetch the report layout from the provided URL
    const response = await fetch(jsonUrl);
    const jsonData = await response.json();

    // Modify ConnectString with JSON data
    jsonData.DataSources[0].ConnectionProperties.ConnectString = `jsondata=${JSON.stringify(data)}`;

    const fontsToRegister = [
      {
        name: 'IPA EXG',
        source: '/fonts/ipaexg.ttf',
      },
      {
        name: 'IPA EXM',
        source: '/fonts/ipaexm.ttf',
      },
    ];
    await Core.FontStore.registerFonts(...fontsToRegister);

    // Load the report definition
    const report = new Core.PageReport();
    await report.load(jsonData);

    if (!data) {
      // Normalize and apply parameters to the report
      const normalizedParameters = parameters.map((param) => ({
        ...param,
        Value: normalizeParameterValue(param.Value),
      }));

      // Apply normalized parameters to the report
      await report.reportParameters.applySteps(normalizedParameters as any);
    }

    // Run the report to generate the document
    const pageDocument = await report.run();

    // Export the document to a PDF blob and initiate download
    const pdfSettings = password
      ? { security: { userPassword: password } }
      : undefined;
    const pdfBlob = await PdfExport.exportDocument(pageDocument, pdfSettings);
    pdfBlob.download(fileName);
  });
};

Parameters of the outputPDFByARJ function:

• jsonUrl: Path to the JSON template file
• fileName: Output PDF file name
• parameters: Array of parameters to pass to the report
• password (optional): Password to protect the PDF
• data: JSON data to bind to the report template

The function will:

1. Fetch the JSON template from the URL
2. Apply parameters and data
3. Render the report into a PDF
4. Trigger download in the browser

3. Best Practices When Using ActiveReportsJS with Next.js

• Store report templates in a secure directory of your project.
• Validate all parameters to avoid unwanted data injection.
• Use API routes to protect server-side rendering logic.
• Do not expose confidential structures from real projects.
• Always review generated code before deployment.

4. Additional Considerations

• Using ActiveReportsJS together with i18next / other i18n libraries:
  If your Next.js project already uses i18next (or similar JavaScript localization / translation libraries), be aware that there can be potential conflicts — especially if your report templates or the rendering logic depend on global locale settings, overridden prototypes, or modifications to built‑in objects.
  To avoid unexpected behavior (e.g. locale/format overrides, translation JSON interfering with report JSON, or i18next initialization affecting global state), you should isolate the report‑rendering context from the rest of your app. For example: load and render the JSON template without i18next’s context, or ensure i18next is not active / initialized when generating PDF on the server.
• Licensing: Free for development / evaluation — but production requires a valid license key:
  ActiveReportsJS provides a “trial / evaluation mode” which allows you to develop locally without a license key. However, in this mode, exported reports will contain a watermark and the standalone designer has a limited evaluation period. For more details, see the official licensing documentation.
  When you deploy to staging or production (or distribute your application), you need to purchase the appropriate ActiveReportsJS license (e.g., a distribution / deployment license), generate a distribution key, and configure your application to set that license key (typically via Core.setLicenseKey(...) or similar). This will remove the watermark and ensure compliance with licensing terms.

5. Conclusion

Using ActiveReportsJS with Next.js provides a clean and scalable way to generate PDF files from JSON templates. By combining parameters, dynamic data, and predefined layouts, developers can create powerful report systems without building UI elements manually.

If you are exploring modern reporting solutions and want to apply them in real-world applications, our company encourages continuous learning and high-quality engineering. For more information about our technology expertise or to discuss potential collaboration, please reach out through our official contact channels.

Whether you need scalable software solutions, expert IT outsourcing, or a long-term development partner, ISB Vietnam is here to deliver. Let’s build something great together—reach out to us today. Or click here to explore more ISB Vietnam's case studies.

Reference Documentation

• ActiveReportsJS Official Documentation
• Next.js Official Documentation