[]
ActiveReportsJS 보고서 디자이너
컴포넌트는 기본적으로 사용자가 사용할 수 있는 다양한 UI 요소를 포함합니다. 특정 요소를 숨기거나 데이터 바인딩 구성 수정과 같은 특정 작업을 금지하는 등 사용자 인터페이스를 사용자 정의하기 위하여, 사용자 정의 API를 사용할 수 있습니다. 이 페이지에서는 이런 사용자 정의를 적용하는 방법을 설명합니다.
보고서 디자이너 UI는 다음과 같은 모양의 DesignerConfig 객체로 API에서 구성됩니다.
var designerConfig = {
// General Settings
language?: string,
units?: "in" | "cm",
customInitTemplates?: CustomInitTemplates,
disableOpenSaveHotkeys?: boolean,
lockLayout?: boolean,
storeUserPreferences?: boolean,
disableSystemClipboard?: boolean,
editor?: editorSettings,
appBar?: appBarSettings,
toolBar?: toolBarSettings,
menu?: menuSettings,
data?: dataTabSettings,
propertyGrid?: propertyGridSettings,
statusBar?: statusBarSettings,
};
다음 섹션에서는 일반 설정
, editorSettings
, appBarSettings
, toolBarSettings
, menuSettings
, dataTabSettings
, propertyGridSettings
, 그리고 statusBarSettings
객체에 대해 설명합니다.
DesignerConfig
객체에는 보고서 디자이너의 전반적인 동작에 영향을 미치는 여러 속성이 포함되어 있습니다.
language
: UI 언어를 설정합니다. 자세한 내용은 현지화 페이지에서 확인할 수 있습니다.
units
: 보고서 항목에 대한 기본 측정 단위를 설정합니다.
customInitTemplates
: 새로 추가된 보고서 항목의 기본 속성을 재정의합니다.
disableOpenSaveHotkeys
: 이 설정을 true로 설정하면, 디자이너 컴포넌트에 의한 키보드 단축키 처리가 비활성화됩니다.
lockLayout
: 활성화된 경우(true
), 이 설정은 사용자가 보고서 레이아웃에 새 항목을 추가하거나 보고서 레이아웃에서 기존 항목을 제거하는 것을 방지합니다. 사용자는 이미 보고서에 존재하는 항목의 속성만 수정할 수 있습니다.
storeUserPreferences
: 활성화된 경우(true
), 디자이너는 그리드 크기와 같은 구성 설정을 브라우저 저장소에 저장합니다. 이러한 설정은 이후 세션에서 명시적으로 정의되지 않는 한 자동으로 복원됩니다.
disableSystemClipboard
: true로 설정된 경우, 이 설정은 디자이너의 서로 다른 인스턴스 간에 보고서 항목을 복사하고 붙여넣기 위해 시스템 클립보드를 사용하는 기능을 비활성화합니다.
DesignerConfig
객체 내의 editor
속성은 보고서 편집기의 모양과 동작을 구성할 수 있는 옵션을 제공합니다. 여기에는 자, 그리드, 보고서 항목 정렬을 위한 시각적 가이드가 포함됩니다.
const editorSettings = {
rulers: {
visible: true, // Show rulers by default
snapStep: {
in: 0.25, // Set snapping step for inches
cm: 0.5, // Set snapping step for centimeters
},
},
gridSize: "0.5cm", // Set default grid size in centimeters
showGrid: true, // Show grid by default
snapToGrid: true, // Enable snap to grid by default
snapToGuides: false, // Disable snap to guides by default
};
var designerConfig = {
editor: editorSettings,
};
DesignerConfig
내의 appBar
속성은 디자이너 컴포넌트의 애플리케이션 바
를 구성하는 데 사용됩니다. 이 최상단 바에는 실행 취소
, 다시 실행
, 저장
과 같은 작업 버튼이 포함되어 있으며, 홈
또는 매개변수
와 같은 다양한 탭에 대한 접근을 제공합니다. 도구 모음은 애플리케이션 바 아래에 위치하며, 현재 선택된 탭에 따른 작업 버튼이 포함되어 있습니다. 다음 예시는 애플리케이션 바와 도구 모음을 설정하는 방법을 설명합니다.
const appBarSettings = {
visible: true, // Show the app bar
homeTab: {
visible: true, // Show the home tab
},
contextActionsTab: {
visible: false, // Hide the context actions tab
},
parametersTab: {
visible: true, // Show the parameters tab
},
};
const toolBarSettings = {
visible: false, // Hide the toolbar
};
var designerConfig = {
appBar: appBarSettings,
toolBar: toolBarSettings
};
DesignerConfig
객체 내의 menu
속성은 디자이너 사이드바의 요소 모양을 구성하는 데 사용됩니다. 이 사이드바는 디자이너 인터페이스의 좌상단에 위치한 햄버거
메뉴 아이콘에 의해 축소 및 확장됩니다. 다음 예제는 이러한 메뉴 요소를 구성하는 방법을 설명합니다.
const menuSettings = {
visible: true, // Show the main menu
toolBox: {
visible: true, // Show the Tool Box
},
documentExplorer: {
visible: false, // Hide the Document Explorer
},
groupEditor: {
visible: true, // Show the Group Editor
},
layerEditor: {
visible: true, // Show the Layer Editor
},
logo: {
visible: true, // Show the logo
custom: {
type: "css",
class: "fa-solid fa-user",
},
},
};
var designerConfig = {
menu: menuSettings ,
};
DesignerConfig
객체 내에 있는 data
속성은 데이터 탭의 모양과 동작을 정의합니다.
const dataTabSettings = {
dataTab: {
visible: true, // Show the Data tab
},
dataSources: {
visible: true, // Show the Data Sources section
canModify: false, // Do not allow modification of data sources
},
dataSets: {
visible: true, // Show the Data Sets section
canModify: true, // Allow modification of data sets
},
parameters: {
visible: true, // Show the Parameters section
canModify: true, // Allow modification of parameters
},
commonValues: {
visible: true, // Show the Common Values section
},
};
var designerConfig = {
data: dataTabSettings,
};
DesignerConfig
객체 내에 있는 propertyGrid
속성은 속성 그리드의 모양과 동작을 구성합니다.
const propertyGridSettings = {
propertiesTab: {
visible: true, // Show the Properties tab
},
mode: "Advanced", // Set the Property Grid mode to "Advanced" or "Basic"
collapsibleCategories: {
enabled: true, // Enable collapsible categories
},
saveExpandEditorsState: {
enabled: true, // Remember the expanded/collapsed states of editors
},
};
var designerConfig = {
propertyGrid: propertyGridSettings ,
};
DesignerCongif
객체 내에 있는 statusBar
속성은 디자이너 상태 표시줄 내 요소의 모양을 구성하는 데 사용됩니다. 이 상태 표시줄은 디자이너 인터페이스의 오른쪽 하단에 위치해 있습니다.
const statusBarSettings = {
visible: true, // Show the status bar
toggleUnitsButton: {
visible: true, // Show the units toggle button
},
toggleGridButton: {
visible: false, // Hide the grid toggle button
},
gridSizeEditor: {
visible: true, // Show the grid size editor
},
rulersButton: {
visible: true, // Show the rulers toggle
},
propertiesModeButton: {
visible: false, // Hide the properties mode button
},
};
var designerConfig = {
statusBar: statusBarSettings ,
};
위에 설명된 DesignerConfig
객체는 초기화 중에 보고서 디자이너 컴포넌트로 전달될 수 있습니다.
순수 자바스크립트용 보고서 디자이너 컴포넌트 응용 프로그램의 생성자는 DesignerConfig
객체를 인수로 허용합니다.
var designer = new ㅡMESCIUS.ActiveReportsJS.ReportDesigner.Designer(
"#designer-host",
designerConfig
);
React 보고서 디자이너 컴포넌트는 DesignerConfig
객체를 가져오는 함수를 반환하는 선택적 onInit 속성을 제공합니다. 예를 들어:
import React from "react";
import { Designer } from "@mescius/activereportsjs-react";
function onInit() {
return {
appBar: {visible: false},
};
}
function App() {
return (
<Designer onInit={onInit} />
);
}
Angular 보고서 디자이너 컴포넌트는 DesignerConfig
객체를 가져오는 함수를 반환해야 하는 선택적 onInit
입력 속성을 제공합니다. 예를 들어:
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() {
const editorSettings = {
rulers: {
visible: false,
},
};
return {
editor: editorSettings,
};
}
}
비슷하게,Vue 보고서 디자이너는 onInit
함수에 대한 참조를 받습니다:
<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() {
return {
appBar: { visible: false },
};
},
},
};
</script>
Svelte 보고서 디자이너는 DesignerConfig
객체를 반환하는 함수로 확인되어야 하는 onInit
속성을 제공합니다:
<script lang="ts">
import {Designer} from "@mescius/activereportsjs-svelte";
function onInit() {
return {
appBar: { visible: false }
}
}
</script>
<div id="designer-host">
<Designer bind:this={designerInst} onInit={onInit}></Designer>
</div>