[{"id":"26713f3d-fbf1-4c9c-bdbe-31fb188e7096","tags":[{"name":"new","color":"#ed7422","productId":"d699a6af-e150-4da3-ab30-25fd97934601","links":null,"id":"4d7b6a40-ab32-4c71-a381-58f3ffd2653e"}]},{"id":"21c749ac-6a80-4731-ac3b-597990e79038","tags":[{"name":"new","color":"#ed7422","productId":"d699a6af-e150-4da3-ab30-25fd97934601","links":null,"id":"4d7b6a40-ab32-4c71-a381-58f3ffd2653e"}]},{"id":"a64d445f-5e12-4939-999f-7ecbd70978c5","tags":[{"name":"new","color":"#ed7422","productId":"d699a6af-e150-4da3-ab30-25fd97934601","links":null,"id":"4d7b6a40-ab32-4c71-a381-58f3ffd2653e"}]},{"id":"d9f783e1-612a-4fa7-9408-7f1c821a45fc","tags":[{"name":"new","color":"#ed7422","productId":"d699a6af-e150-4da3-ab30-25fd97934601","links":null,"id":"4d7b6a40-ab32-4c71-a381-58f3ffd2653e"}]},{"id":"af5bd81a-b6cd-410b-84b4-9de9c51c3a7d","tags":[{"name":"new","color":"#ed7422","productId":"d699a6af-e150-4da3-ab30-25fd97934601","links":null,"id":"4d7b6a40-ab32-4c71-a381-58f3ffd2653e"}]},{"id":"60de5e12-02d9-4fd1-8db5-cb82a6bca160","tags":[{"name":"new","color":"#ed7422","productId":"d699a6af-e150-4da3-ab30-25fd97934601","links":null,"id":"4d7b6a40-ab32-4c71-a381-58f3ffd2653e"}]},{"id":"6af12f79-8609-4b30-8be3-d617d0cd7a16","tags":[{"name":"new","color":"#ed7422","productId":"d699a6af-e150-4da3-ab30-25fd97934601","links":null,"id":"4d7b6a40-ab32-4c71-a381-58f3ffd2653e"}]},{"id":"86b2a642-0ee8-4605-b04d-e7e0ec019e01","tags":[{"name":"new","color":"#ed7422","productId":"d699a6af-e150-4da3-ab30-25fd97934601","links":null,"id":"4d7b6a40-ab32-4c71-a381-58f3ffd2653e"}]},{"id":"aa9c6845-a521-49a8-ba61-f85856865f32","tags":[{"name":"new","color":"#ed7422","productId":"d699a6af-e150-4da3-ab30-25fd97934601","links":null,"id":"4d7b6a40-ab32-4c71-a381-58f3ffd2653e"}]}]
        
(Showing Draft Content)

Get Started with ActiveReportsJS Report Designer in a Svelte.js application

Create Svelte application

The easiest way to create a Svelte application is to use the SvelteKit tool. Run the following command from the command prompt or terminal:

npm create svelte@latest arjs-svelte-designer-app

Once these commands run successfully, you could open the newly created arjs-svelte-designer-app in your favorite IDE, such as Visual Studio Code.

Install ActivereportsJS npm package

The @grapecity/activereports npm package contains the pure ActiveReportsJS Report Designer component that could be integrated into a Svelte application.

To install the latest version of this package, run the following command from the application's root folder.

npm install @grapecity/activereports
# or `yarn add @grapecity/activereports` if you use yarn

Configure Vite.js

Svelte uses Vite.js under the hood to run applications in development mode and build them for production. To get ActiveReportsJS working with Vite.js, we need to adjust the Vite.js configuration. Create a new file called alias.js in the root of the application and add the following code:

import moment from "./node_modules/moment";

export const { fn, min, max, now, utc, unix, months,
  isDate, locale, invalid, duration, isMoment, weekdays,
  parseZone, localeData, isDuration, monthsShort, weekdaysMin,
  defineLocale, updateLocale, locales, weekdaysShort, normalizeUnits,
  relativeTimeRounding, relativeTimeThreshold, calendarFormat, ISO_8601
} = moment;

export default moment;

Then open the vite.config.js file in the root folder of the application and replace its content with the following:

import { sveltekit } from '@sveltejs/kit/vite';
import path from "path";

/** @type {import('vite').UserConfig} */
const config = {
  plugins: [sveltekit()],
  resolve: {
    alias: [
      {
        find: /^moment$/,
        replacement: path.resolve(__dirname, "./alias.js"),
      },
      {
        find: /^gc-dv$/,
        replacement: path.resolve(
          __dirname,
          "./node_modules/@grapecity/activereports/lib/node_modules/gc-dv.js"
        ),
      },
      {
        find: /^\@grapecity\/ar-js-pagereport$/,
        replacement: path.resolve(
          __dirname,
          "./node_modules/@grapecity/activereports/lib/node_modules/@grapecity/ar-js-pagereport.js"
        ),
      },
      {
        find: /^barcodejs$/,
        replacement: path.resolve(
          __dirname,
          "./node_modules/@grapecity/activereports/lib/node_modules/barcodejs.js"
        ),
      },
    ],
  },
};
export default config;

Add ActiveReportsJS report to the application

ActiveReportsJS uses the JSON format and the rdlx-json extension for report template files.

In the static folder of the application, create a new file called report.rdlx-json and insert the following content into it.

{
  "Name": "Report",
  "Body": {
    "ReportItems": [
      {
        "Type": "textbox",
        "Name": "TextBox1",
        "Value": "Hello, ActiveReportsJS Designer",
        "Style": {
          "FontSize": "18pt",
          "PaddingLeft": "5pt",
          "PaddingTop": "5pt"          
        },
        "Width": "8.5in",
        "Height": "0.5in"
      }
    ]
  }
}

Add Report Designer component to the application

Replace the default content of the src\routes\+page.svelte file with the following code

<script lang="ts">
    import "@grapecity/activereports/styles/ar-js-ui.css";
    import "@grapecity/activereports/styles/ar-js-designer.css";    
    import {Designer} from "@grapecity/activereports/reportdesigner";
    import { onMount } from 'svelte';
   
    onMount(() => {
        let designer = new Designer("#designer-host");
        designer.setReport({id: "report.rdlx-json"});
    });
</script>

<div id="designer-host"></div>

<style>
    #designer-host {
        width: 100%;
        height: 100vh;
    }
</style>

Disable server-side rendering

By default, SvelteKit will render any page first on the server and send it to the client as HTML. But ActiveReportsJS can only operate on the client-side. Hence, we need to disable the server-side rendering for the page that contains the Report Viewer. We can do that by adding the +page.js file with the following content alongside the +page.svelte

export const prerender = false;
export const ssr = false;

Run and test the application

You can run the application by using the yarn run dev or npm run dev commands. By default, the project runs at http://localhost:5173/. If you browse this URL, the ActiveReportsJS, the ActiveReportsJS Report Designer will appear on the start page of the application and display the report design. You could test the basic functionality by adding report items, setting their properties, creating the data source, et cetera. Visit the Report Designer Interface page for more information on how to use the Report Designer component. The Report Designer component exposes a rich API supplied with TypeScript declarations, so you can easily use it within a Svelte application.