定制设计器

ActiveReportsJS Report 设计器默认包含用户可用的各种 UI 元素。要自定义用户界面，例如隐藏某些元素或禁止修改数据绑定配置等特定操作，您可以使用自定义 API，本页描述如何应用这些API自定义报表设计器。

DesignerConfig 对象

A报表设计器 UI 在 API 中使用具有以下形状的DesignerConfig对象进行配置：

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

以下各节中介绍了General settings、editorSettings、appBarSettings、toolBarSettings、menuSettings、dataTabSettings、propertyGridSettings和对象。statusBarSettings

常规设置

该DesignerConfig对象包括几个影响报表设计器整体行为的属性：

language：设置UI语言，您可以在本地化页面找到更多详细信息
units：设置报告项目的默认测量单位
customInitTemplates：覆盖新添加的报表项的默认属性
disableOpenSaveHotkeys：设置为 true 时，此设置将禁用设计器组件处理键盘快捷键
lockLayout：启用 ( true) 后，此设置将阻止用户添加新项目或从报告布局中删除现有项目。用户只能修改报告中已存在的项目的属性
storeUserPreferences：如果启用 ( true)，设计器会将其配置设置（例如网格大小）保存到浏览器存储中。然后，这些设置将自动恢复，除非在后续会话中明确定义它们
disableSystemClipboard：设置为 true 时，此设置将禁用使用系统剪贴板在设计器的不同实例之间复制和粘贴报表项的功能

编辑器设置

editor对象中的属性提供DesignerConfig了用于配置报表编辑器的外观和行为的选项，包括标尺、网格和用于对齐报表项的视觉指南：

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

应用程序栏和工具栏设置

appBar对象内的属性用于DesignerConfig配置Application Bar设计器组件。这个最上面的栏包括操作按钮，如Undo、Redo和Save，并提供对各种选项卡的访问，如Home或Parameters。工具栏位于应用程序栏下方，并包含取决于当前所选选项卡的操作按钮。

以下示例演示了如何设置应用程序栏和工具栏：

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

侧边栏设置

menu对象内的属性旨在DesignerConfig配置设计器侧栏中元素的外观。Hamburger此侧边栏通过位于设计器界面右上角的菜单图标展开和折叠。以下示例演示了如何配置这些菜单元素：

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

数据选项卡设置

data对象内的属性定义DesignerConfig“数据”选项卡的外观和行为：

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

属性网格设置

propertyGrid对象内的属性配置DesignerConfig属性网格的外观和行为：

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

状态栏设置

statusBar对象内的属性旨在DesignerConfig配置设计器状态栏中元素的外观。该状态栏位于设计器界面的右下角：

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上述对象可以在初始化期间传递到报表设计器组件中。

纯 JS 应用

PureJS 应用程序的报表设计器组件的构造函数接受一个DesignerConfig对象作为参数。

var designer = new GC.ActiveReports.ReportDesigner.Designer(
  "#designer-host",
  designerConfig
);

React 应用

React Report Designer组件公开了应解析onInit为检索对象的函数的可选属性DesignerConfig，例如：

import React from "react";
import { Designer } from "@grapecity/activereports-react";

function onInit() {
  return {
      appBar: {visible: false},
  };
}

function App() {
  return (
      <Designer onInit={onInit} />
  );
}

Angular 应用

Angular Report Designer组件公开了可选的onInit输入属性，该属性应解析为检索对象的函数DesignerConfig，例如：

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 "@grapecity/activereports-vue";

export default {
  name: "App",
  components: {
    ReportDesigner: Designer,
  },
  methods: {
    onInit() {
      return {
        appBar: { visible: false },
      };
    },
  },
};
</script>

Svelte 应用

Svelte 报表设计器公开了onInit应解析为返回对象的函数的属性DesignerConfig：

<script lang="ts">
    import {Designer} from "@grapecity/activereports-svelte";
    function onInit() {
        return {
            appBar: { visible: false }
        }
    }    
</script>

<div id="designer-host">
    <Designer bind:this={designerInst} onInit={onInit}></Designer>
</div>