[]
데모 도움말 API
Download
(Showing Draft Content)

보고서 구성요소 사용

소개

보고서 구성요소는 개발자와 보고서 작성자가 사전 정의된 재사용 가능한 보고서 항목을 보고서 구성요소 라이브러리에 설계하고 구성하는 데 도움이 되는 기능입니다. 보고서 구성요소 라이브러리 생성은 보고서 구성요소 페이지에 설명되어 있습니다.

보고서 디자이너 컴포넌트에 라이브러리 불러오기

라이브러리가 생성되면, 공개 API를 사용하여 보고서 디자이너 컴포넌트에 이를 불러올 수 있습니다. 다음 샘플들은 이를 달성하는 방법을 보여줍니다. 보고서 라이브러리 설명자는 세 가지 부분으로 구성됩니다:

  • id - 보고서 라이브러리 파일을 가리키고 애플리케이션 내에서 액세스할 수 있는 URL

  • name - 보고서 라이브러리의 내부 이름

  • displayName - 디자이너 UI에 표시될 선택적 이름

Pure JS 응용프로그램

var designer = new (namespace).ReportDesigner.Designer("#designer-host");
var libraries = [
    {
        id: 'ReportLib.rdlx-json',
        name: 'ReportsLib',
        displayName: "Report parts library"
    }
]
designer.setReportPartsLibraries(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} />
  );
}

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

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>