# GC.Spread.Sheets.Designer

## Content

# Namespace: Designer

[Spread](GC.Spread).[Sheets](GC.Spread.Sheets).Designer

## Table of contents

### Enumerations

- [FileType](../enums/GC.Spread.Sheets.Designer.FileType)
- [MessageBoxButtons](../enums/GC.Spread.Sheets.Designer.MessageBoxButtons)
- [MessageBoxIcon](../enums/GC.Spread.Sheets.Designer.MessageBoxIcon)
- [MessageBoxResult](../enums/GC.Spread.Sheets.Designer.MessageBoxResult)

### Classes

- [AtomicComponentBase](../classes/GC.Spread.Sheets.Designer.AtomicComponentBase)
- [CommandNames](../classes/GC.Spread.Sheets.Designer.CommandNames)
- [Designer](../classes/GC.Spread.Sheets.Designer.Designer)
- [Events](../classes/GC.Spread.Sheets.Designer.Events)
- [TemplateNames](../classes/GC.Spread.Sheets.Designer.TemplateNames)

### Interfaces

- [IBindingComponentBaseOption](../interfaces/GC.Spread.Sheets.Designer.IBindingComponentBaseOption)
- [IBoxSizePickerOption](../interfaces/GC.Spread.Sheets.Designer.IBoxSizePickerOption)
- [IButtonComboEditorOption](../interfaces/GC.Spread.Sheets.Designer.IButtonComboEditorOption)
- [IButtonGroup](../interfaces/GC.Spread.Sheets.Designer.IButtonGroup)
- [IButtonOption](../interfaces/GC.Spread.Sheets.Designer.IButtonOption)
- [ICalcFieldDialogEditorOption](../interfaces/GC.Spread.Sheets.Designer.ICalcFieldDialogEditorOption)
- [ICalcItemDialogEditorOption](../interfaces/GC.Spread.Sheets.Designer.ICalcItemDialogEditorOption)
- [ICalcItemSolveOrderDialogEditorOption](../interfaces/GC.Spread.Sheets.Designer.ICalcItemSolveOrderDialogEditorOption)
- [ICheckBoxGroupItem](../interfaces/GC.Spread.Sheets.Designer.ICheckBoxGroupItem)
- [ICheckBoxGroupOption](../interfaces/GC.Spread.Sheets.Designer.ICheckBoxGroupOption)
- [ICheckBoxOption](../interfaces/GC.Spread.Sheets.Designer.ICheckBoxOption)
- [IChildrenItemBaseOption](../interfaces/GC.Spread.Sheets.Designer.IChildrenItemBaseOption)
- [ICollapsePanelItemOption](../interfaces/GC.Spread.Sheets.Designer.ICollapsePanelItemOption)
- [ICollapsePanelOption](../interfaces/GC.Spread.Sheets.Designer.ICollapsePanelOption)
- [IColorComboEditorItemsOption](../interfaces/GC.Spread.Sheets.Designer.IColorComboEditorItemsOption)
- [IColorComboEditorOption](../interfaces/GC.Spread.Sheets.Designer.IColorComboEditorOption)
- [IColorGroup](../interfaces/GC.Spread.Sheets.Designer.IColorGroup)
- [IColorIconComboEditorOption](../interfaces/GC.Spread.Sheets.Designer.IColorIconComboEditorOption)
- [IColorLineStyleComboEditorOption](../interfaces/GC.Spread.Sheets.Designer.IColorLineStyleComboEditorOption)
- [IColorPickerOption](../interfaces/GC.Spread.Sheets.Designer.IColorPickerOption)
- [IColorPreviewOption](../interfaces/GC.Spread.Sheets.Designer.IColorPreviewOption)
- [IColumnOption](../interfaces/GC.Spread.Sheets.Designer.IColumnOption)
- [IColumnSetOption](../interfaces/GC.Spread.Sheets.Designer.IColumnSetOption)
- [ICommand](../interfaces/GC.Spread.Sheets.Designer.ICommand)
- [ICommandGroup](../interfaces/GC.Spread.Sheets.Designer.ICommandGroup)
- [IComponentBaseOption](../interfaces/GC.Spread.Sheets.Designer.IComponentBaseOption)
- [IComponentDialogButtonOption](../interfaces/GC.Spread.Sheets.Designer.IComponentDialogButtonOption)
- [IContainerBaseOption](../interfaces/GC.Spread.Sheets.Designer.IContainerBaseOption)
- [IContainerOption](../interfaces/GC.Spread.Sheets.Designer.IContainerOption)
- [IDataManagerColumnsList](../interfaces/GC.Spread.Sheets.Designer.IDataManagerColumnsList)
- [IDataManagerController](../interfaces/GC.Spread.Sheets.Designer.IDataManagerController)
- [IDataManagerTableColumnController](../interfaces/GC.Spread.Sheets.Designer.IDataManagerTableColumnController)
- [IDataManagerTableList](../interfaces/GC.Spread.Sheets.Designer.IDataManagerTableList)
- [IDataManagerTableListController](../interfaces/GC.Spread.Sheets.Designer.IDataManagerTableListController)
- [IDesignerConfig](../interfaces/GC.Spread.Sheets.Designer.IDesignerConfig)
- [IDialogTemplate](../interfaces/GC.Spread.Sheets.Designer.IDialogTemplate)
- [IEditableSelectOption](../interfaces/GC.Spread.Sheets.Designer.IEditableSelectOption)
- [IFieldListTreeOption](../interfaces/GC.Spread.Sheets.Designer.IFieldListTreeOption)
- [IFileSelectorOption](../interfaces/GC.Spread.Sheets.Designer.IFileSelectorOption)
- [IFillDialogOption](../interfaces/GC.Spread.Sheets.Designer.IFillDialogOption)
- [IFillEffectOption](../interfaces/GC.Spread.Sheets.Designer.IFillEffectOption)
- [IFlexContainerOption](../interfaces/GC.Spread.Sheets.Designer.IFlexContainerOption)
- [IFocusableComponentOption](../interfaces/GC.Spread.Sheets.Designer.IFocusableComponentOption)
- [IFontDialogEditorOption](../interfaces/GC.Spread.Sheets.Designer.IFontDialogEditorOption)
- [IFontEffectOption](../interfaces/GC.Spread.Sheets.Designer.IFontEffectOption)
- [IFontEffectsAndUnderlineOption](../interfaces/GC.Spread.Sheets.Designer.IFontEffectsAndUnderlineOption)
- [IFontPickerOption](../interfaces/GC.Spread.Sheets.Designer.IFontPickerOption)
- [IFontPreviewOption](../interfaces/GC.Spread.Sheets.Designer.IFontPreviewOption)
- [IFunctionLambdaEditorOption](../interfaces/GC.Spread.Sheets.Designer.IFunctionLambdaEditorOption)
- [IFunctionLetEditorOption](../interfaces/GC.Spread.Sheets.Designer.IFunctionLetEditorOption)
- [IGaugeColorComboEditorItemsOption](../interfaces/GC.Spread.Sheets.Designer.IGaugeColorComboEditorItemsOption)
- [IGradientColorStopsEditorOption](../interfaces/GC.Spread.Sheets.Designer.IGradientColorStopsEditorOption)
- [IHtmlTagAttribute](../interfaces/GC.Spread.Sheets.Designer.IHtmlTagAttribute)
- [IImageSparklineEditorOption](../interfaces/GC.Spread.Sheets.Designer.IImageSparklineEditorOption)
- [ILabelContainerOption](../interfaces/GC.Spread.Sheets.Designer.ILabelContainerOption)
- [ILabelLineOption](../interfaces/GC.Spread.Sheets.Designer.ILabelLineOption)
- [IListComboEditorOption](../interfaces/GC.Spread.Sheets.Designer.IListComboEditorOption)
- [IListEditorOption](../interfaces/GC.Spread.Sheets.Designer.IListEditorOption)
- [IListGroupItemData](../interfaces/GC.Spread.Sheets.Designer.IListGroupItemData)
- [IListItemData](../interfaces/GC.Spread.Sheets.Designer.IListItemData)
- [IListOption](../interfaces/GC.Spread.Sheets.Designer.IListOption)
- [IListSubItemData](../interfaces/GC.Spread.Sheets.Designer.IListSubItemData)
- [IMarginEditorOption](../interfaces/GC.Spread.Sheets.Designer.IMarginEditorOption)
- [IMarkItem](../interfaces/GC.Spread.Sheets.Designer.IMarkItem)
- [IMultiColumnListOption](../interfaces/GC.Spread.Sheets.Designer.IMultiColumnListOption)
- [IMultiColumnPickerEditorOption](../interfaces/GC.Spread.Sheets.Designer.IMultiColumnPickerEditorOption)
- [IMultiListColumn](../interfaces/GC.Spread.Sheets.Designer.IMultiListColumn)
- [IMultiSelectListOption](../interfaces/GC.Spread.Sheets.Designer.IMultiSelectListOption)
- [INumberEditorOption](../interfaces/GC.Spread.Sheets.Designer.INumberEditorOption)
- [IPatternTypeComboEditorOption](../interfaces/GC.Spread.Sheets.Designer.IPatternTypeComboEditorOption)
- [IPatternTypePickItemOption](../interfaces/GC.Spread.Sheets.Designer.IPatternTypePickItemOption)
- [IPatternTypePickerOption](../interfaces/GC.Spread.Sheets.Designer.IPatternTypePickerOption)
- [IPatternTypePreviewOption](../interfaces/GC.Spread.Sheets.Designer.IPatternTypePreviewOption)
- [IRadioItemData](../interfaces/GC.Spread.Sheets.Designer.IRadioItemData)
- [IRadioOption](../interfaces/GC.Spread.Sheets.Designer.IRadioOption)
- [IRangeSelectOption](../interfaces/GC.Spread.Sheets.Designer.IRangeSelectOption)
- [IRangeTemplateEditorOption](../interfaces/GC.Spread.Sheets.Designer.IRangeTemplateEditorOption)
- [IResetTextEditorOption](../interfaces/GC.Spread.Sheets.Designer.IResetTextEditorOption)
- [IRibbonPanel](../interfaces/GC.Spread.Sheets.Designer.IRibbonPanel)
- [IRibbonPanelConfig](../interfaces/GC.Spread.Sheets.Designer.IRibbonPanelConfig)
- [ISheetListComboEditorOption](../interfaces/GC.Spread.Sheets.Designer.ISheetListComboEditorOption)
- [ISidePanel](../interfaces/GC.Spread.Sheets.Designer.ISidePanel)
- [ISize](../interfaces/GC.Spread.Sheets.Designer.ISize)
- [ISliderOption](../interfaces/GC.Spread.Sheets.Designer.ISliderOption)
- [ISortColorComboEditorOption](../interfaces/GC.Spread.Sheets.Designer.ISortColorComboEditorOption)
- [ISortColorEditorOption](../interfaces/GC.Spread.Sheets.Designer.ISortColorEditorOption)
- [ISpreadContainerOption](../interfaces/GC.Spread.Sheets.Designer.ISpreadContainerOption)
- [ISpreadTemplateOption](../interfaces/GC.Spread.Sheets.Designer.ISpreadTemplateOption)
- [ITabControlItemOption](../interfaces/GC.Spread.Sheets.Designer.ITabControlItemOption)
- [ITabControlOption](../interfaces/GC.Spread.Sheets.Designer.ITabControlOption)
- [ITabSelectorOption](../interfaces/GC.Spread.Sheets.Designer.ITabSelectorOption)
- [ITableOption](../interfaces/GC.Spread.Sheets.Designer.ITableOption)
- [ITableSheetPanelEditor](../interfaces/GC.Spread.Sheets.Designer.ITableSheetPanelEditor)
- [ITableSheetPanelTitle](../interfaces/GC.Spread.Sheets.Designer.ITableSheetPanelTitle)
- [ITextBlockOption](../interfaces/GC.Spread.Sheets.Designer.ITextBlockOption)
- [ITextEditorOption](../interfaces/GC.Spread.Sheets.Designer.ITextEditorOption)

### Type aliases

- [CommandMap](GC.Spread.Sheets.Designer#commandmap)
- [CommandType](GC.Spread.Sheets.Designer#commandtype)
- [IComponentRenderType](GC.Spread.Sheets.Designer#icomponentrendertype)
- [IconType](GC.Spread.Sheets.Designer#icontype)
- [RuleType](GC.Spread.Sheets.Designer#ruletype)
- [TemplateMap](GC.Spread.Sheets.Designer#templatemap)

### Variables

- [DefaultConfig](GC.Spread.Sheets.Designer#defaultconfig)
- [LicenseKey](GC.Spread.Sheets.Designer#licensekey)
- [ToolBarModeConfig](GC.Spread.Sheets.Designer#toolbarmodeconfig)

### Functions

- [closeDialog](GC.Spread.Sheets.Designer#closedialog)
- [findControl](GC.Spread.Sheets.Designer#findcontrol)
- [getCommand](GC.Spread.Sheets.Designer#getcommand)
- [getResources](GC.Spread.Sheets.Designer#getresources)
- [getTemplate](GC.Spread.Sheets.Designer#gettemplate)
- [registerTemplate](GC.Spread.Sheets.Designer#registertemplate)
- [setResources](GC.Spread.Sheets.Designer#setresources)
- [showDialog](GC.Spread.Sheets.Designer#showdialog)
- [showMessageBox](GC.Spread.Sheets.Designer#showmessagebox)

## Type aliases

### <a id="commandmap" name="commandmap"></a> CommandMap

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

___

### <a id="commandtype" name="commandtype"></a> CommandType

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

___

### <a id="icomponentrendertype" name="icomponentrendertype"></a> IComponentRenderType

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

___

### <a id="icontype" name="icontype"></a> IconType

Ƭ **IconType**: ``"foreColor"`` \| ``"backColor"`` \| ``"sparklineColor"``

___

### <a id="ruletype" name="ruletype"></a> RuleType

Ƭ **RuleType**: ``"Defaults"`` \| ``"Float"`` \| ``"Currency"`` \| ``"Percent"``

___

### <a id="templatemap" name="templatemap"></a> TemplateMap

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

## Variables

### <a id="defaultconfig" name="defaultconfig"></a> DefaultConfig

• **DefaultConfig**: [`IDesignerConfig`](../interfaces/GC.Spread.Sheets.Designer.IDesignerConfig)

Represents the default config of designer

___

### <a id="licensekey" name="licensekey"></a> LicenseKey

• **LicenseKey**: `string`

Represents the license key for evaluation version and production version.

___

### <a id="toolbarmodeconfig" name="toolbarmodeconfig"></a> ToolBarModeConfig

• **ToolBarModeConfig**: [`IDesignerConfig`](../interfaces/GC.Spread.Sheets.Designer.IDesignerConfig)

Represents the toolbar mode config of designer

## Functions

### <a id="closedialog" name="closedialog"></a> closeDialog

▸ **closeDialog**(`templateName`, `submitValue`): `void`

Close an opening dialog.

**`example`**
```
// Sometimes users want to close the dialog directly without UI, they can use closeDialog and decide whether submit the values after closing the dialog.
  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);
```

#### Parameters

| Name | Type | Description |
| :------ | :------ | :------ |
| `templateName` | `string` | The opening template name, the template must be registered in designer. |
| `submitValue` | `boolean` | Whether submit the opening template value after closing the dialog or not. |

#### Returns

`void`

___

### <a id="findcontrol" name="findcontrol"></a> findControl

▸ **findControl**(`host`): [`Designer`](../classes/GC.Spread.Sheets.Designer.Designer) \| `undefined`

Get the designer instance of an existing HTMLElement

**`example`**
```
// This example will get the designer instance of an existing 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");
```

#### Parameters

| Name | Type | Description |
| :------ | :------ | :------ |
| `host` | `string` \| `HTMLElement` | The target HTMLElement |

#### Returns

[`Designer`](../classes/GC.Spread.Sheets.Designer.Designer) \| `undefined`

The designer instance of an existing HTMLElement

___

### <a id="getcommand" name="getcommand"></a> getCommand

▸ **getCommand**(`commandName?`): [`ICommand`](../interfaces/GC.Spread.Sheets.Designer.ICommand) \| `undefined`

This function will only get the command in the commandMap using the command name, or the all commands registered in commandMap.

**`example`**
```
// The user wants to custom font family.
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);
```

#### Parameters

| Name | Type | Description |
| :------ | :------ | :------ |
| `commandName?` | `string` | Name of command, uniquely identifies one command, if commandName is empty, will return all registered commands. |

#### Returns

[`ICommand`](../interfaces/GC.Spread.Sheets.Designer.ICommand) \| `undefined`

- Command found by command name.

___

### <a id="getresources" name="getresources"></a> getResources

▸ **getResources**(): `Object`

Get the global designer working resources object.

**`example`**
```
// The user wants to change some resources in ribbon or template, they need get the origin designer res and modify it, then set it back before initializing designer.
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"));
```

#### Returns

`Object`

- The designer working resources.

___

### <a id="gettemplate" name="gettemplate"></a> getTemplate

▸ **getTemplate**(`templateName`): [`IDialogTemplate`](../interfaces/GC.Spread.Sheets.Designer.IDialogTemplate) \| ``null``

A copy of a registered template can be found through the Template name. The template should be registered to the templateMap.

**`example`**
```
// The user wants to change the title of insert formate cells Dialog in designer to 'Custom'.
var designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("hostDiv"));
var formatCellsTemplate = GC.Spread.Sheets.Designer.getTemplate("formatDialogTemplate").
formatCellsTemplate.title = "Custom";
//The same TemplateName washes out the original template.
GC.Spread.Sheets.Designer.registerTemplate("formatDialogTemplate", formatCellsTemplate);
```

#### Parameters

| Name | Type | Description |
| :------ | :------ | :------ |
| `templateName` | `string` | The template should be registered to the templateMap. a copy of a registered template can be found through the Template name. |

#### Returns

[`IDialogTemplate`](../interfaces/GC.Spread.Sheets.Designer.IDialogTemplate) \| ``null``

- Template found by template name

___

### <a id="registertemplate" name="registertemplate"></a> registerTemplate

▸ **registerTemplate**(`templateName`, `template`): `void`

Register a template to templateMap so that designer can find the template.

**`example`**
```
//For example, the following code will open templateExample and the option will be used in the template, after click ok, will set text and set horizontal alignment.
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);
```

#### Parameters

| Name | Type | Description |
| :------ | :------ | :------ |
| `templateName` | `string` | Name of template, uniquely identifies one template. |
| `template` | [`IDialogTemplate`](../interfaces/GC.Spread.Sheets.Designer.IDialogTemplate) | The template instance. |

#### Returns

`void`

___

### <a id="setresources" name="setresources"></a> setResources

▸ **setResources**(`resources`): `void`

Set the global designer working resources object.

**`example`**
```
// The user wants to change some resources in ribbon or template, they need get the origin designer res and modify it, then set it back before initializing designer.
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"));
```

#### Parameters

| Name | Type |
| :------ | :------ |
| `resources` | `Object` |

#### Returns

`void`

___

### <a id="showdialog" name="showdialog"></a> showDialog

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

This function will show a dialog with the option, the option will be used in the dialog template got by template name.

**`example`**
```
//For example, the following code will open templateExample and the option will be used in the template, after click ok, will set text and set horizontal alignment.
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);
```

#### Parameters

| Name | Type | Description |
| :------ | :------ | :------ |
| `templateName` | `string` | The template name. |
| `bindingData` | `Object` | The dialog bindingData. |
| `successCallback` | `Function` | After the dialog is closed, this method executes. If the OK button is selected, the dialog data is returned, and if cancel or 'X' is selected, null is returned. |
| `errCallback?` | `Function` | Dialog executes this method when an exception occurs. |
| `validCallback?` | `Function` | The dialog callback function, will change the result or do something after click ok and closing the dialog but before return the result, then return the operated result. |
| `popupElement?` | `HTMLElement` | The dialog target HTMLElement which the template depends on. |

#### Returns

`void`

___

### <a id="showmessagebox" name="showmessagebox"></a> showMessageBox

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

This function will show a messageBox with input option.

**`example`**
```
//For example, the following code will show a messageBox with title "this is title", text "this is error text" and icon yellow triangle exclamation mark.
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);  // Show Message Box
    }
};
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);
```

#### Parameters

| Name | Type | Description |
| :------ | :------ | :------ |
| `text` | `string` | The error text of the messageBox |
| `title` | `string` | The title of the messageBox |
| `icon` | [`MessageBoxIcon`](../enums/GC.Spread.Sheets.Designer.MessageBoxIcon) | The icon of the messageBox |
| `successCallback?` | `Function` | After dialog is closed, this method executes. The parameter "data" indicates which button is clicked, its type is GC.Spread.Sheets.Designer.MessageBoxResult, 1 is "ok", 2 is "yes", 3 is "no" and 4 is "cancel". |
| `errCallback?` | `Function` | Dialog executes this method when an exception occurs. |
| `buttons?` | [`MessageBoxButtons`](../enums/GC.Spread.Sheets.Designer.MessageBoxButtons) | The buttons of the messageBox |

#### Returns

`void`