レポートパーツの使用

レポートパーツは開発者が事前に定義した再利用可能なレポート項目を、他のレポートにライブラリとして取り込み、再利用する機能です。レポートパーツライブラリの作成についてはレポートパーツを参照してください。

Webデザイナコンポーネントへのレポートパーツライブラリの読込

レポートパーツライブラリを作成していた場合、APIを使用してWebデザイナコンポーネントに読み込むことが可能です。レポートパーツライブラリを読み込む場合のオプションは以下の通りです。

id：レポートパーツを事前定義したレポートファイルを設定します。
name：レポートパーツライブラリの名前を設定します。
displayName：Webデザイナコンポーネントに表示されるライブラリの名前を設定します。

以下、レポートパーツライブラリをWebデザイナコンポーネントを読み込むためのサンプルです。

JavaScriptアプリケーション

var designer = new MESCIUS.ActiveReportsJS.ReportDesigner.Designer("#designer-host");
var libraries = [
    {
        id: 'ReportLib.rdlx-json',
        name: 'ReportsLib',
        displayName: "Report parts library"
    }
]
designer.setReportPartsLibraries(libraries);

Angular

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,
      };
  }  
}

React

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} />
  );
}

Vue

<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

<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>