[]
デモ ヘルプ APIリファレンス デザイナ
ダウンロード
(Showing Draft Content)

GC.Spread.Sheets.Designer

名前空間: Designer

Spread.Sheets.Designer

Table of contents

列挙体

クラス

インターフェイス

型の別名

変数

関数

型の別名

CommandMap

Ƭ CommandMap: { [key in string]: ICommand }

CommandType

Ƭ CommandType: "button" | "dropdown" | "separator" | "checkbox" | "comboBox" | "text" | "spinner" | "list-preview" | "colorPicker" | "groupHeader" | "chartFormat" | "tableFooter" | "SparklineColorPicker" | "textBox" | "listContent" | string

IComponentRenderType

Ƭ IComponentRenderType: INumberEditorOption | IRadioOption | IFileSelectorOption | IResetTextEditorOption | ISliderOption | ITextBlockOption | ITextEditorOption | IColumnOption | IColumnSetOption | IFlexContainerOption | ILabelLineOption | IButtonOption | ILabelContainerOption | ICheckBoxOption | IContainerOption | IListOption | IMultiSelectListOption | ITabControlOption | IRangeSelectOption | IColorPickerOption | IListComboEditorOption | IListEditorOption | IFontPickerOption | IFontDialogEditorOption | IColorLineStyleComboEditorOption | IColorIconComboEditorOption | IColorComboEditorItemsOption | IColorPreviewOption | ICollapsePanelOption | ICheckBoxGroupOption | IColorComboEditorOption | IFillDialogOption | IFillEffectOption | IPatternTypeComboEditorOption | IPatternTypePickerOption | IPatternTypePreviewOption | ISheetListComboEditorOption | IMultiColumnPickerEditorOption | IFunctionLetEditorOption | IFunctionLambdaEditorOption | IFontEffectsAndUnderlineOption | IFontEffectOption | IFontPreviewOption | IGaugeColorComboEditorItemsOption | IBoxSizePickerOption | ITabSelectorOption | IGradientColorStopsEditorOption | IButtonComboEditorOption | IImageSparklineEditorOption | ICalcFieldDialogEditorOption | IFieldListTreeOption | ISpreadContainerOption | ISortColorComboEditorOption | ISortColorEditorOption | IMultiColumnListOption | IMarginEditorOption | ISpreadTemplateOption | IDataManagerController | IDataManagerTableListController | IDataManagerTableColumnController | IDataManagerTableList | IDataManagerColumnsList | ITableSheetPanelEditor | IEditableSelectOption | ITableOption | ITableSheetPanelTitle

IconType

Ƭ IconType: "foreColor" | "backColor" | "sparklineColor"

RuleType

Ƭ RuleType: "Defaults" | "Float" | "Currency" | "Percent"

TemplateMap

Ƭ TemplateMap: { [key in string]: IDialogTemplate }

変数

DefaultConfig

• DefaultConfig: IDesignerConfig

デザイナのデフォルト設定を表します。

LicenseKey

• LicenseKey: string

評価版および製品版のライセンスキーを表します。

ToolBarModeConfig

• ToolBarModeConfig: IDesignerConfig

デザイナのツールバーモード設定を表します。

関数

closeDialog

▸ closeDialog(templateName, submitValue): void

開くダイアログを閉じます。

実例

// ユーザーがUIを使用せずにダイアログを直接閉する場合は、closeDialogを使用して、ダイアログを閉じた後に値を送信するかどうかを決定できます。
  var inputCommand = {
      title: "Input",
      text: "Input",
      iconClass: "ribbon-button-input-text",
      bigButton: true,
      commandName: "inputText",
      execute: (context, propertyName) => {
          var dialogOption = {
              text: "",
          };
          GC.Spread.Sheets.Designer.showDialog("setText", dialogOption, (result) => {
              if (!result) {
                  return;
              }
              var text = result.text;
              var spread = context.getWorkbook();
              var sheet = spread.getActiveSheet();
              var column = sheet.getActiveColumnIndex();
              var row = sheet.getActiveRowIndex();
              sheet.setValue(row, column, text);
              clearInterval(showTipsInterval);
          }, (error) => {
              console.error(error);
          }, checkResult);
          var showTips = document.querySelector(".show-tips");
          var i = 4;
          var showTipsInterval = setInterval(() => {
              showTips.innerText = "You must input valid value within " + i + " seconds!";
              i--;
              if (i === -1) {
                  clearInterval(showTipsInterval);
                  GC.Spread.Sheets.Designer.closeDialog("setText", false);
              }
          }, 1000);
      }
  };
  var config = GC.Spread.Sheets.Designer.DefaultConfig;
  config.commandMap = {
      input: inputCommand,
  };
  var inputCommandGroup = {
      label: "input",
      thumbnailClass: "input",
      commandGroup: {
          children: [
              {
                  direction: "vertical",
                  commands: [
                      "input"
                  ]
              }
          ]
      }
  };
  if (config && config.ribbon) {
  config.ribbon[0].buttonGroups.push(inputCommandGroup);
  }
  var setTextTemplate = {
      title: "demo",
      content: [
          {
              type: "ColumnSet",
              children: [
                  {
                      type: "Column",
                      children: [
                          {
                              type: "TextBlock",
                              text: "Text:",
                          }
                      ]
                  },
                  {
                      type: "Column",
                      children: [
                          {
                              type: "TextEditor",
                              margin: "0 0 0 10px",
                              bindingPath: "text"
                          }
                      ]
                  }
              ]
          },
          {
              type: "TextBlock",
              text: "You must input valid value within 5 seconds!",
              className: "show-tips"
          },
      ]
  };
  GC.Spread.Sheets.Designer.registerTemplate("setText", setTextTemplate);
  function checkResult(value) {
      if (value.text === "") {
          GC.Spread.Sheets.Designer.showMessageBox("Please do not input a null value.", "Warning", GC.Spread.Sheets.Designer.MessageBoxIcon.warning);
          return false;
      } else {
          return true;
      }
  }
  var designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("gc-designer-container"), config);

パラメータ

名前 型 説明
templateName string 開いたときのテンプレート名。 テンプレートはデザイナに登録する必要があります。
submitValue boolean ダイアログを閉じた後に開いたときのテンプレート値を送信するかどうか。

戻り値

void

findControl

▸ findControl(host): Designer | undefined

既存のHTMLElementのデザイナインスタンスを取得します。

実例

// 次のサンプルコードは、既存のHTMLElementのデザイナインスタンスを取得します。
var designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("hostDiv"));
var designer = GC.Spread.Sheets.Designer.findControl(document.getElementById("hostDiv"));
var designer = GC.Spread.Sheets.Designer.findControl("hostDiv");

パラメータ

名前 型 説明
host string | HTMLElement 対象とするHTMLElement。

戻り値

Designer | undefined

既存のHTMLElementのデザイナインスタンス。

getCommand

▸ getCommand(commandName?): ICommand | undefined

この関数は、コマンド名を使用してcommandMap内のコマンド、またはcommandMapに登録されているすべてのコマンドのみを取得します。

実例

// ユーザーはカスタムフォントファミリーを望んでいます。
var config = GC.Spread.Sheets.Designer.DefaultConfig;
var customCommand = GC.Spread.Sheets.Designer.getCommand("fontFamily");
customCommand.dropdownList.push({
    text: "customFont",
    value: "customFont"
});
if (config && config.ribbon) {
config.ribbon[0].buttonGroups[2].commandGroup.children[0].commands[0] = 'customFont';
}
config.commandMap = {
     customFont: customCommand
}
designer.setConfig(config);

パラメータ

名前 型 説明
commandName? string コマンドの名前は、1つのコマンドを一意に識別します。 commandNameが空の場合、登録されているすべてのコマンドを返します。

戻り値

ICommand | undefined

  • コマンド名で見つかったコマンド。

getResources

▸ getResources(): Object

グローバルデザイナで作業するリソースオブジェクトを取得します。

実例

// ユーザーがリボンまたはテンプレートの一部のリソースを変更する場合は、元のデザイナのリソースを取得して変更し、デザイナを初期化する前に元に戻す必要があります。
var resources = GC.Spread.Sheets.Designer.getResources();
resources.ok = "OK!";
resources.formatDialog.title = "Format Dialog!"
resources.ribbon.home.home = "HOME!";
resources.ribbon.home.paste = "Paste!";
GC.Spread.Sheets.Designer.setResources(resources);
var designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("hostDiv"));

戻り値

Object

  • デザイナで作業するリソース。

getTemplate

▸ getTemplate(templateName): IDialogTemplate | null

登録されたテンプレートのコピーは、テンプレート名から見つけることができます。 テンプレートはtemplateMapに登録する必要があります。

実例

// ユーザーは、デザインの挿入フォーマットセルダイアログのタイトルを「Custom」に変更する場合。
var designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("hostDiv"));
var formatCellsTemplate = GC.Spread.Sheets.Designer.getTemplate("formatDialogTemplate").
formatCellsTemplate.title = "Custom";
// 同じTemplateNameが元のテンプレートをクリアします。
GC.Spread.Sheets.Designer.registerTemplate("formatDialogTemplate", formatCellsTemplate);

パラメータ

名前 型 説明
templateName string テンプレートはtemplateMapに登録する必要があります。 登録されたテンプレートのコピーは、テンプレート名から見つけることができます。

戻り値

IDialogTemplate | null

  • テンプレート名で見つかったテンプレート。

registerTemplate

▸ registerTemplate(templateName, template): void

テンプレートをtemplateMapに登録して、デザイナーがテンプレートを見つけられるようにします。

実例

// たとえば、次のサンプルコードはtemplateExampleを開き、オプションはテンプレートで使用されます。[OK]をクリックすると、テキストが設定され、水平方向の配置が設定されます。
var inputCommand = {
    title: "Input",
    text: "Input",
    iconClass: "ribbon-button-input-text",
    bigButton: true,
    commandName: "inputText",
    execute: (context, propertyName) => {
        var dialogOption = {
            text: "",
            isCenter: false,
        };
        GC.Spread.Sheets.Designer.showDialog("setText", dialogOption, (result) => {
            if (!result) {
                 return;
             }
            var text = result.text;
            var isCenter = result.isCenter;
            var spread = context.getWorkbook();
            var sheet = spread.getActiveSheet();
            var column = sheet.getActiveColumnIndex();
            var row = sheet.getActiveRowIndex();
            sheet.setValue(row, column, text);
            if (isCenter) {
                var style = new GC.Spread.Sheets.Style();
                style.hAlign = GC.Spread.Sheets.HorizontalAlign.center;
                sheet.setStyle(row, column, style);
            }
        }, (error) => {
            console.error(error);
        }, checkResult);
    }
};
var config = GC.Spread.Sheets.Designer.DefaultConfig;
config.commandMap = {
    input: inputCommand,
};
var inputCommandGroup = {
    label: "input",
    thumbnailClass: "input",
    commandGroup: {
        children: [
            {
                direction: "vertical",
                commands: [
                    "input"
                ]
            }
        ]
    }
};
if (config && config.ribbon) {
config.ribbon[0].buttonGroups.push(inputCommandGroup);
}
var setTextTemplate = {
    title: "demo",
    content: [
        {
            type: "ColumnSet",
            children: [
                {
                    type: "Column",
                    children: [
                        {
                            type: "TextBlock",
                            text: "Text:",
                        }
                    ]
                },
                {
                    type: "Column",
                    children: [
                        {
                            type: "TextEditor",
                            margin: "0 0 0 10px",
                            bindingPath: "text"
                        }
                     ]
                }
            ]
        },
        {
            type: "CheckBox",
            bindingPath: "isCenter",
            text: "Center",
         },
    ]
};
GC.Spread.Sheets.Designer.registerTemplate("setText", setTextTemplate);
function checkResult(value) {
    if (value.text === "") {
        GC.Spread.Sheets.Designer.showMessageBox("Please do not input a null value.", "Warning", GC.Spread.Sheets.Designer.MessageBoxIcon.warning);
        return false;
    } else {
        return true;
    }
}
var designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("gc-designer-container"), config);

パラメータ

名前 型 説明
templateName string テンプレートの名前は、1つのテンプレートを一意に識別します。
template IDialogTemplate テンプレートのインスタンス。

戻り値

void

setResources

▸ setResources(resources): void

グローバルデザイナで作業するリソースオブジェクトを設定します。

実例

// ユーザーがリボンまたはテンプレートの一部のリソースを変更する場合は、元のデザイナのリソースを取得して変更し、デザイナを初期化する前に元に戻す必要があります。
var resources = GC.Spread.Sheets.Designer.getResources();
resources.ok = "OK!";
resources.formatDialog.title = "Format Dialog!"
resources.ribbon.home.home = "HOME!";
resources.ribbon.home.paste = "Paste!";
GC.Spread.Sheets.Designer.setResources(resources);
var designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("hostDiv"));

パラメータ

名前 型
resources Object

戻り値

void

showDialog

▸ showDialog(templateName, bindingData, successCallback, errCallback?, validCallback?, popupElement?): void

この関数は、オプション付きのダイアログを表示します。オプションは、テンプレート名で取得されたダイアログテンプレートで使用されます。

実例

// たとえば、次のサンプルコードはtemplateExampleを開き、オプションはテンプレートで使用されます。[OK]をクリックすると、テキストが設定され、水平方向の配置が設定されます。
var inputCommand = {
    title: "Input",
    text: "Input",
    iconClass: "ribbon-button-input-text",
    bigButton: true,
    commandName: "inputText",
    execute: (context, propertyName) => {
        var dialogOption = {
            text: "",
            isCenter: false,
        };
        GC.Spread.Sheets.Designer.showDialog("setText", dialogOption, (result) => {
            if (!result) {
                 return;
             }
            var text = result.text;
            var isCenter = result.isCenter;
            var spread = context.getWorkbook();
            var sheet = spread.getActiveSheet();
            var column = sheet.getActiveColumnIndex();
            var row = sheet.getActiveRowIndex();
            sheet.setValue(row, column, text);
            if (isCenter) {
                var style = new GC.Spread.Sheets.Style();
                style.hAlign = GC.Spread.Sheets.HorizontalAlign.center;
                sheet.setStyle(row, column, style);
            }
        }, (error) => {
            console.error(error);
        }, checkResult);
    }
};
var config = GC.Spread.Sheets.Designer.DefaultConfig;
config.commandMap = {
    input: inputCommand,
};
var inputCommandGroup = {
    label: "input",
    thumbnailClass: "input",
    commandGroup: {
        children: [
            {
                direction: "vertical",
                commands: [
                    "input"
                ]
            }
        ]
    }
};
if (config && config.ribbon) {
config.ribbon[0].buttonGroups.push(inputCommandGroup);
}
var setTextTemplate = {
    title: "demo",
    content: [
        {
            type: "ColumnSet",
            children: [
                {
                    type: "Column",
                    children: [
                        {
                            type: "TextBlock",
                            text: "Text:",
                        }
                    ]
                },
                {
                    type: "Column",
                    children: [
                        {
                            type: "TextEditor",
                            margin: "0 0 0 10px",
                            bindingPath: "text"
                        }
                     ]
                }
            ]
        },
        {
            type: "CheckBox",
            bindingPath: "isCenter",
            text: "Center",
         },
    ]
};
GC.Spread.Sheets.Designer.registerTemplate("setText", setTextTemplate);
function checkResult(value) {
    if (value.text === "") {
        GC.Spread.Sheets.Designer.showMessageBox("Please do not input a null value.", "Warning", GC.Spread.Sheets.Designer.MessageBoxIcon.warning);
        return false;
    } else {
        return true;
    }
}
var designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("gc-designer-container"), config);

パラメータ

名前 型 説明
templateName string テンプレートの名前。
bindingData Object ダイアログbindingData。
successCallback Function このメソッドは、ダイアログを閉じた後に実行されます。 [OK]ボタンをクリックするとダイアログデータが返され、キャンセルまたは「X」をクリックするとnullが返されます。
errCallback? Function ダイアログは、例外が発生したときにこのメソッドを実行します。
validCallback? Function ダイアログコールバック関数は、[OK]をクリックしてダイアログを閉じた後、結果を変更するかアクションを実行しますが、その前に結果を返し、操作された結果を返します。
popupElement? HTMLElement テンプレートが依存するダイアログターゲットHTMLElement。

戻り値

void

showMessageBox

▸ showMessageBox(text, title, icon, successCallback?, errCallback?, buttons?): void

この関数は、入力オプション付きのメッセージボックスを表示します。

実例

// たとえば、次のサンプルコードは、タイトル「タイトルです」、テキスト「エラーのテキストです」、およびアイコンの黄色の三角形の感嘆符が付いたメッセージボックスを表示します。
var showCommand = {
    title: "show",
    text: "show",
    iconClass: "ribbon-button-show",
    bigButton: true,
    commandName: "show",
    execute: (context, propertyName) => {
        GC.Spread.Sheets.Designer.showMessageBox("this is title", "this is error text", GC.Spread.Sheets.Designer.MessageBoxIcon.warning);  // メッセージボックスを表示します。
    }
};
var config = GC.Spread.Sheets.Designer.DefaultConfig;
config.commandMap = {
    showMessage: showCommand
};
var showCommandGroup = {
    label: "Show",
    thumbnailClass: "Show",
    commandGroup: {
        children: [
            {
                direction: "vertical",
                commands: [
                    "showMessage"
                ]
            }
        ]
    }
};
if (config && config.ribbon) {
config.ribbon[0].buttonGroups.push(showCommandGroup);
}
var d = new GC.Spread.Sheets.Designer.Designer(document.getElementById("gc-designer-container"), config);

パラメータ

名前 型 説明
text string メッセージボックスのエラーテキスト。
title string メッセージボックスのタイトル。
icon MessageBoxIcon メッセージボックスのアイコン。
successCallback? Function このメソッドは、ダイアログを閉じた後に実行されます。パラメータ「data」は、クリックされたボタンを示します。そのタイプはGC.Spread.Sheets.Designer.MessageBoxResultで、1は「OK」、2は「はい」、3は「いいえ」、4は「キャンセル」を返します。
errCallback? Function ダイアログは、例外が発生したときにこのメソッドを実行します。
buttons? MessageBoxButtons メッセージボックスのボタン。

戻り値

void