カスタマイズ

Webデザイナコンポーネントには、デフォルトで使用できる様々なUIが含まれています。特定の要素を非表示にしたり、データ連結の設定を変更するような特定のアクションを禁止したりするなどユーザーインターフェースのカスタマイズを行うため、カスタマイズAPIを使用できます。このトピックでは、これらのカスタム設定を使用する方法について説明します。

DesignerConfigオブジェクト

DesignerConfigオブジェクトを使用して、デザイナのUIをカスタマイズすることができます。

var designerConfig = {
  // 共通の設定
  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,
  themeConfig?: themeSettings,
};

以下のセクションでは、DesignerConfigオブジェクトの上記のプロパティを使用して、デザイナの共通の設定、エディタの設定、リボン、ツールバー、メニュー、データタブ、グリッド、およびステータスバーの設定をカスタマイズする方法について説明します。

共通の設定

DesignerConfigオブジェクトには、帳票デザイナの動作全体に影響を与えるいくつかのプロパティが含まれます。

language：デザイナコンポーネントの表示言語を設定します。
units ：コントロールのデフォルトの測定単位を設定します。
customInitTemplates：新しく追加されたレポートアイテムのデフォルトのプロパティをオーバーライドします。
disableOpenSaveHotkeys：trueに設定すると、デザイナによってショートカットキーが無効になります。
lockLayout：trueに設定すると、レポートレイアウトに新しいアイテムを追加したり、既存のアイテムを削除したりできません。レポートに既に存在するアイテムのプロパティのみを変更できます。
storeUserPreferences：trueに設定すると、デザイナがグリッドのサイズなどの構成設定をブラウザに保存します。これらの設定は、明示的に定義されない限り、自動的に復元されます。
disableSystemClipboard：trueに設定すると、レポートデザイナでコントロールをコピーとペーストするためにシステムクリップボードの使用を無効にします。

レポートエディタの設定

DesignerConfigオブジェクトのeditorプロパティには、レポートエディタの外観と動作を構成するためのオプションが用意されています。レポートエディタには、コントロールを配置するためのルーラー、グリッド、グリッドにスナップまたはガイドにスナップなどのオプションが含まれています。

const editorSettings = {
  rulers: {
    visible: true, // デフォルトでルーラーを表示します。
    snapStep: {
      in: 0.25, // 寸法の単位をin（インチ）に設定します。
      cm: 0.5, // 寸法の単位をcm（センチメートル）に設定します。
    },
  },
  gridSize: "0.5cm", // デフォルトのグリッド幅をcm（センチメートル）単位で設定します。
  showGrid: true, // デフォルトでグリッドを表示します。
  snapToGrid: true, // デフォルトで［グリッドにスナップ］をtrueにします。
  snapToGuides: false, // デフォルトで［ガイドにスナップ］をfalseにします。
};

var designerConfig = {
  editor: editorSettings,
};

リボンとツールバーの設定

DesignerConfigオブジェクトのappBarプロパティは、デザイナコンポーネントのリボンを構成するために使用されます。リボンには、元に戻す、やり直し、保存のアクションボタン、およびホーム、パラメータなどのさまざまなタブが含まれます。ツールバーはリボンの下部にあり、選択したタブに応じてアクションボタンを表示します。

次の例は、リボンとツールバーを構成する方法を示します。

const appBarSettings = {
  visible: true, // リボンを表示します。
  homeTab: {
    visible: true, // ［ホーム］タブを表示します。
  },
  contextActionsTab: {
    visible: false, // ［レポート］タブを非表示にします。
  },
  parametersTab: {
    visible: true, // ［パラメータ］タブを表示します。
   },
};

const toolBarSettings = {
  visible: false, // ツールバーを非表示にします。
};

var designerConfig = {
  appBar: appBarSettings,
  toolBar: toolBarSettings
};

メニューの設定

DesignerConfigオブジェクトのmenuプロパティは、メニューの要素の外観を構成します。メニューは、ツールバーの左側にあるアイコンを使用して展開したり折りたたんだりできます。次の例は、メニューの要素を構成する方法を示します。

const menuSettings = {
  visible: true, // メインメニューを表示します。
  toolBox: {
    visible: true, // ツールボックスを表示します。
  },
  documentExplorer: {
    visible: false, // エクスプローラを非表示にします。
  },
  groupEditor: {
    visible: true, // グループエディタを表示します。
  },
  layerEditor: {
     visible: true, // レイヤーを表示します。
  },
  logo: {
    visible: true, // ロゴを表示します。
    custom: {
      type: "css",
      class: "fa-solid fa-user",
    },    
  },
};
var designerConfig = {
  menu: menuSettings ,
};

データタブの設定

DesignerConfigオブジェクト内のdataプロパティは、［データ］タブの外観と動作を定義します。

const dataTabSettings = {
  dataTab: {
    visible: true, // ［データ］タブを表示します。
  },
  dataSources: {
    visible: true, // ［データソース］セクションを表示します。
    canModify: false, // データソースを変更できないようにします。
  },
  dataSets: {
    visible: true, // ［データセット］セクションを表示します。
    canModify: true, // データセットを変更できるようにします。
  },
  parameters: {
    visible: true, // ［パラメータ］セクションを表示します。
    canModify: true, // パラメータを変更できるようにします。
  },
  commonValues: {
    visible: true, // ［共通の値］セクションを表示します。
  },
};
var designerConfig = {
  data: dataTabSettings,
};

プロパティモードの設定

DesignerConfigオブジェクトのpropertyGridプロパティは、プロパティモードの外観と動作を構成します。

const propertyGridSettings = {
  propertiesTab: {
    visible: true, // ［プロパティ］タブを表示します。
  },
  mode: "Advanced", // プロパティモードを「詳細プロパティを表示」または「基本プロパティを表示」に設定します。
  collapsibleCategories: {
    enabled: true, // 折りたたみ可能なカテゴリをtrueにします。
  },
  saveExpandEditorsState: {
    enabled: true, // 展開または折りたたみ状態を保存します。
  },
};
var designerConfig = {
  propertyGrid: propertyGridSettings ,
};

ステータスバーの設定

DesignerConfigオブジェクトのstatusBarプロパティは、デザイナのステータスバー内の要素の外観を構成します。ステータスバーは、デザイナのインターフェイスの右下に配置されます。

const statusBarSettings = {
  visible: true, // ステータスバーを表示します。
  toggleUnitsButton: {
    visible: true, // 寸法の単位ボタンを表示します。
  },
  toggleGridButton: {
    visible: false, // グリッドのトグルボタンを非表示にします。
  },
  gridSizeEditor: {
    visible: true, // ［グリッドの幅］を表示します。
  },
  rulersButton: {
    visible: true, // ルーラーのトグルボタンを表示します。
  },
  propertiesModeButton: {
    visible: false, // ［プロパティモード］ボタンを非表示にします。
  },
};
var designerConfig = {
  statusBar: statusBarSettings ,
};

テーマピッカーの設定

DesignerConfigオブジェクトのthemeConfigプロパティは、デザイナに設定するテーマを構成します。テーマピッカーは、デザイナのインターフェイスの右下に配置されます。

const themeSettings= {
  initialTheme: 'ActiveReports', // 初期選択テーマ(初期値:"Default")
  themeSelector: {
    isEnabled: true, // テーマピッカーの有効化(初期値:true)
    availableThemes: ['ActiveReports', 'System', 'Default']  // 使用可能なテーマのリスト(初期値:["System", "Default", "DefaultDark", "DarkOled", "HighContrast", "HighContrastDark", "ActiveReports", "ActiveReportsDark"])
  }
};
var designerConfig = {
  themeConfig: themeSettings,
};

DesignerConfigの使用

DesignerConfigオブジェクトは、初期化中にデザイナコンポーネントに渡すことができます。

JavaScriptアプリケーション

JavaScriptアプリケーションのデザイナコンポーネントのコンストラクタは、引数としてDesignerConfigオブジェクトを受け取ります。

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

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

React

Reactアプリケーションのデザイナコンポーネントのコンストラクタは、DesignerConfigオブジェクトを取得する関数に解決されるオプションのonInitプロパティを公開します。以下に、例を示します。

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

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

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

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アプリケーションのデザイナコンポーネントのコンストラクタは、DesignerConfigオブジェクトを返す関数に解決されるonInitプロパティを公開します。以下に、例を示します。

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