        [{"id":"bf522b5c-b992-4910-b9a3-7d4c6a711342","tags":[{"product":null,"links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3","name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"fd92c740-60f2-42bc-b108-133c0baaec15","tags":[{"product":null,"links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3","name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"1809c8ed-488b-4fb9-b402-aabe76f0c6d2","tags":[{"product":null,"links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3","name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"8aa13734-ff9b-43f5-b44f-de331adbb3d7","tags":[{"product":null,"links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3","name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"8faaa45c-575e-4bf0-9034-634fac906bb8","tags":[{"product":null,"links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3","name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"56faca6f-14d3-42b0-9706-7df8e339ef70","tags":[{"product":null,"links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3","name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"eb780c12-7575-42ef-916d-9d1d66cd0152","tags":[{"product":null,"links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3","name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"3918314b-5267-494d-b520-203125daf2a2","tags":[{"product":null,"links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3","name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"97d3eeb1-76c4-4c11-bc62-db5413d6819f","tags":[{"product":null,"links":null,"id":"4d7b6a40-ab32-4c71-a381-58f3ffd2653e","name":"new","color":"#ed7422","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"e93f9124-e327-4056-9264-f62378c3ebb5","tags":[{"product":null,"links":null,"id":"4d7b6a40-ab32-4c71-a381-58f3ffd2653e","name":"new","color":"#ed7422","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"90683712-67eb-49c8-96cb-96a228a99d11","tags":[{"product":null,"links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3","name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"cf1d42c1-fe4a-4f31-83f7-97c9c7ea9b76","tags":[{"product":null,"links":null,"id":"4d7b6a40-ab32-4c71-a381-58f3ffd2653e","name":"new","color":"#ed7422","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"e6222e08-3705-44f2-9027-b80b72dd3a85","tags":[{"product":null,"links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3","name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"5f8d0a4e-e3c5-4f38-91ee-c0d4aa8f116d","tags":[{"product":null,"links":null,"id":"4d7b6a40-ab32-4c71-a381-58f3ffd2653e","name":"new","color":"#ed7422","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"1ab019cd-705f-4371-a3f3-f2925cf92826","tags":[{"product":null,"links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3","name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"2ebee074-0c53-44bf-89c4-c0deb0d210f7","tags":[{"product":null,"links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3","name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"488a368a-fad1-4022-8e64-03442a912d2c","tags":[{"product":null,"links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3","name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"9aa35d28-77db-4dbd-ade0-17163a1782be","tags":[{"product":null,"links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3","name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"5a8c2832-0b00-47dc-aa9c-2579f4d9e04c","tags":[{"product":null,"links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3","name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"c19b5fcc-8f2a-4f44-9eeb-345cbb4815a6","tags":[{"product":null,"links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3","name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"92556861-b9b0-454e-a493-4750e9d90d2c","tags":[{"product":null,"links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3","name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"5ca1a599-fa29-4d8a-8cb4-80352932149f","tags":[{"product":null,"links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3","name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"7a947fc6-0187-4b9d-b9cc-800def67c597","tags":[{"product":null,"links":null,"id":"4d7b6a40-ab32-4c71-a381-58f3ffd2653e","name":"new","color":"#ed7422","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"b74ce673-ba64-42ea-b124-fc006b6b727e","tags":[{"product":null,"links":null,"id":"4d7b6a40-ab32-4c71-a381-58f3ffd2653e","name":"new","color":"#ed7422","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"a201d71e-7541-4e64-ac8b-3ed714e41a81","tags":[{"product":null,"links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3","name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"9efb31b1-f5f2-4214-a36d-c3415649a7a0","tags":[{"product":null,"links":null,"id":"4d7b6a40-ab32-4c71-a381-58f3ffd2653e","name":"new","color":"#ed7422","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]}]

Svelte Component

This page provides a detailed overview of the ActiveReportsJS Svelte Report Designer. You can check the corresponding Getting Started tutorial for a concise guide for integrating the designer component into a Svelte application.

ActiveReportsJS Svelte NPM package

We provide the library that contains the ActiveReportsJS Svelte Report Designer component via the @mescius/activereportsjs-react npm package, which depends on the main @mescius/activereportsjs package that contains the core functionality.

ActiveReportsJS Svelte Designer component

You can import the ActiveReportsJS Svelte Designer component into a Svelte component in your application and include it in the markdown, for example:

<script lang="ts">
    import {Designer} from "@mescius/activereportsjs-svelte";
</script>

<div id="designer-host">
    <Designer report={{ id: "report.rdlx-json", displayName: "my report" }}></Designer>
</div>

The designer component accepts the following properties.

Property	Type	Description
onInit	()=>DesignerConfig	returns the DesignerConfig that contains the designer's initialization options
dataSources	array of Data Source Templates	sets the Pre-defined data sources and data sets.
reportList	array of Report Resource Info items	sets the Pre-defined report names for a subreport
imageList	array of Image Resource Info items	sets the Pre-defined images for an Image report item
onCreate	onCreate function	adds the New Report button in the designer toolbar and sets the corresponding click handler
onOpen	onOpen function	adds the Open Report button in the designer toolbar and sets the corresponding click handler
onRender	onRender function	adds the Preview Report button in the designer toolbar and sets the corresponding click handler
onSave	onSave function	adds the Save Report button in the designer toolbar and sets the corresponding click handler
onSaveAs	onSaveAs function	adds the Save As.. button in the designer toolbar and sets the corresponding click handler
onOpenFileMenu	onOpenFileMenu function	adds the "File" menu in the designer toolbar and sets the corresponding click handler
report	report object	loads the specified report in the designer
documentChanged	(args: DocumentChangedEventArgs)=>void	sets the handler for the event that occurs when a report loaded into the designer changes

Also, you can access the createReport, getReport, setReport, and processCommand methods of the Designer class instance by binding a variable to the Designer node, for example:

<script lang="ts">
    import {Designer} from "@mescius/activereportsjs-svelte";
    import {onMount} from 'svelte';
    let designerInst: Designer;
    onMount(()=>{
        designerInst.setReport({ id: "report.rdlx-json", displayName: "my report" });
    })
</script>

<div id="designer-host">
    <Designer bind:this={designerInst}></Designer>
</div>