Using Report Parts
Introduction
Report Parts is a feature that helps developers and report authors design and organize pre-defined and re-usable Report Items into Report Part Libraries. The creation of Report Parts Libraries is described at the Report Parts page.
Loading a library into the Report Designer component
Once a library is created, you can load it into the Report Designer component by using the public API. The following samples show how to achieve that. The report library descriptor includes three parts:
id- the URL that points to the report library file and that is accessible within the applicationname- the internal name of the report librarydisplayName- optional name that will be displayed in the designer UI
Pure JS Applications
var designer = new MESCIUS.ActiveReportsJS.ReportDesigner.Designer("#designer-host");
var libraries = [
{
id: 'ReportLib.rdlx-json',
name: 'ReportsLib',
displayName: "Report parts library"
}
]
designer.setReportPartsLibraries(libraries);React Applications
import React from "react";
import { Designer } from "@mescius/activereportsjs-react";
function onInit() {
var libraries = [
{
id: 'ReportLib.rdlx-json',
name: 'ReportsLib',
displayName: "Report parts library"
}
];
return {
reportPartsLibraries: libraries,
};
}
function App() {
return (
<Designer onInit={onInit} />
);
}Angular Applications
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template:
'<div id="designer-host"><gc-activereports-designer [onInit]="onInit"> </gc-activereports-designer></div>'
})
export class AppComponent {
onInit = function onInit() {
var libraries = [
{
id: 'ReportLib.rdlx-json',
name: 'ReportsLib',
displayName: "Report parts library"
}
];
return {
reportPartsLibraries: libraries,
};
}
}Vue Applications
<template>
<div id="designer-host">
<ReportDesigner
:onInit="onInit"
></ReportDesigner>
</div>
</template>
<script lang="ts">
import { Designer } from @mescius/activereportsjs-vue";
export default {
name: "App",
components: {
ReportDesigner: Designer,
},
methods: {
onInit() {
var libraries = [
{
id: 'ReportLib.rdlx-json',
name: 'ReportsLib',
displayName: "Report parts library"
}
];
return {
reportPartsLibraries: libraries,
};
},
},
};
</script>Svelte Applications
<script lang="ts">
import {Designer} from "@mescius/activereportsjs-svelte";
function onInit() {
var libraries = [
{
id: 'ReportLib.rdlx-json',
name: 'ReportsLib',
displayName: "Report parts library"
}
];
return {
reportPartsLibraries: libraries,
};
}
</script>
<div id="designer-host">
<Designer onInit={onInit}></Designer>
</div>