사용자 정의

ActiveReportsJS 보고서 디자이너 컴포넌트는 기본적으로 사용자가 사용할 수 있는 다양한 UI 요소를 포함합니다. 특정 요소를 숨기거나 데이터 바인딩 구성 수정과 같은 특정 작업을 금지하는 등 사용자 인터페이스를 사용자 정의하기 위하여, 사용자 정의 API를 사용할 수 있습니다. 이 페이지에서는 이런 사용자 정의를 적용하는 방법을 설명합니다.

DesignerConfig 객체

보고서 디자이너 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 ,
};

Designer Config 사용

위에 설명된 DesignerConfig 객체는 초기화 중에 보고서 디자이너 컴포넌트로 전달될 수 있습니다.

순수 자바스크립트 응용 프로그램

순수 자바스크립트용 보고서 디자이너 컴포넌트 응용 프로그램의 생성자는 DesignerConfig 객체를 인수로 허용합니다.

var designer = new ㅡMESCIUS.ActiveReportsJS.ReportDesigner.Designer(
  "#designer-host",
  designerConfig
);

React 응용 프로그램

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 응용 프로그램

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 응용 프로그램

비슷하게,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 응용 프로그램

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>