[]
DEMO DOCS API
DOWNLOAD
(Showing Draft Content)

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>