# GC.Spread.Sheets.Designer.Designer

## Content

# Class: Designer

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

## Table of contents

### Constructors

- [constructor](GC.Spread.Sheets.Designer.Designer#constructor)

### Methods

- [activeRibbonTab](GC.Spread.Sheets.Designer.Designer#activeribbontab)
- [bind](GC.Spread.Sheets.Designer.Designer#bind)
- [destroy](GC.Spread.Sheets.Designer.Designer#destroy)
- [getData](GC.Spread.Sheets.Designer.Designer#getdata)
- [getWorkbook](GC.Spread.Sheets.Designer.Designer#getworkbook)
- [refresh](GC.Spread.Sheets.Designer.Designer#refresh)
- [setConfig](GC.Spread.Sheets.Designer.Designer#setconfig)
- [setData](GC.Spread.Sheets.Designer.Designer#setdata)
- [setWorkbook](GC.Spread.Sheets.Designer.Designer#setworkbook)
- [unbind](GC.Spread.Sheets.Designer.Designer#unbind)
- [unbindAll](GC.Spread.Sheets.Designer.Designer#unbindall)
- [RegisterComponent](GC.Spread.Sheets.Designer.Designer#registercomponent)

## Constructors

### <a id="constructor" name="constructor"></a> constructor

• **new Designer**(`host`, `config?`, `spread?`, `spreadOptions?`)

Represent a Designer with the specified hosted DOM element, custom config and an existing spread.

**`example`**
```
var designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("hostDiv"));
var customConfig = {
      ribbon: [
          {
              id: "home",
              text: "HOME",
              buttonGroups: [
                {
                  label: "Undo",
                  thumbnailClass: "ribbon-thumbnail-undoRedo",
                  commandGroup: {
                    children: [
                      {
                        direction: "vertical",
                        commands: [
                          "undo",
                          "redo"
                        ]
                      }
                    ]
                  }
                }
              ]
          }
      ],
      contextMenu: [
          "contextMenuCut",
          "contextMenuCopy",
      ],
      fileMenu: "fileMenuButton",
      sidePanels: [
          {
              position: "top",
              allowResize: true,
              command: "formulaBarPanel",
              uiTemplate: "formulaBarTemplate"
          },
      ]
 };
var customDesigner = new GC.Spread.Sheets.Designer.Designer(document.getElementById("hostDiv2"), customConfig);
```

#### Parameters

| Name | Type | Description |
| :------ | :------ | :------ |
| `host` | `string` \| `HTMLDivElement` | This is the HTML area that the Designer Component mounts. |
| `config?` | [`IDesignerConfig`](../interfaces/GC.Spread.Sheets.Designer.IDesignerConfig) | The designer config object. |
| `spread?` | `Object` | The workbook instance. |
| `spreadOptions?` | `Object` | The workbook initialization options. |

## Methods

### <a id="activeribbontab" name="activeribbontab"></a> activeRibbonTab

▸ **activeRibbonTab**(`ribbonTabId?`): `string`

Get or set the designer active ribbon tab Id, the ribbon tab id is in DefaultConfig.

**`example`**
```
// This example will set the designer active ribbon tab after designer initializing.
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
var designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("gc-designer-container"), undefined, spread);
let currentActiveRibbonTab = designer.activeRibbonTab(); // get the active ribbon tab id.
if (currentActiveRibbonTab !== "insert") {
    designer.activeRibbonTab("insert"); // will set the INSERT ribbon tab active.
}
```

#### Parameters

| Name | Type | Description |
| :------ | :------ | :------ |
| `ribbonTabId?` | `string` | The new active ribbon tab id. |

#### Returns

`string`

- The designer current active ribbon tab id.

___

### <a id="bind" name="bind"></a> bind

▸ **bind**(`type`, `fn?`): `void`

Binds an event to the designer.

**`example`**
```
//This example binds events.
designer.bind(GC.Spread.Sheets.Designer.Events.FileLoading, function(type, message){
    if (message.fileType = GC.Spread.Sheets.Designer.FileType.Excel){
        let spreadJsonData = message.data;
        if(spreadJsonData.sheetCount >= 3) {
             message.cancel = true;
        }
    };
});
```

#### Parameters

| Name | Type | Description |
| :------ | :------ | :------ |
| `type` | `string` | The event type. |
| `fn?` | `any` | Specifies the function to run when the event occurs. |

#### Returns

`void`

___

### <a id="destroy" name="destroy"></a> destroy

▸ **destroy**(): `void`

destroy the designer and unbind all events.

**`example`**
```
// This example will destroy the designer after creating a new designer
var designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("hostDiv"));
designer.destroy();
```

#### Returns

`void`

___

### <a id="getdata" name="getdata"></a> getData

▸ **getData**(`key`): `any`

Get the state or value, there are two types of data, one is local data using only in one component
and the other is global data using in the whole designer environment, designer.getData(key) can get the global data storing in the designer by key in where having designer instance.

**`example`**
```
// This example will set a global data in one place like ribbon->Home and get this global data in the other place like ribbon->setting, both places having the designer instance.
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
var config = GC.Spread.Sheets.Designer.DefaultConfig;
var logInCommand = {
	title: "Login",
	text: "Login",
	iconClass: "ribbon-button-login",
	bigButton: true,
	commandName: "login",
	execute: (context, propertyName) => {
		alert('Log in new designer.');
		context.setData("isLogIn", true); // setData()
	 }
};
var getGiftCommand = {
	 title: "Get gift",
	 text: "Get gift",
	 iconClass: "ribbon-button-get-gift",
	 bigButton: 'true',
	 commandName: "getGift",
	 execute: (context, propertyName) => {
		 let isLogIn = context.getData("isLogIn"); // getData()
		 if (isLogIn) {
			 alert("Get gift");
		 }
		 else {
			 alert("Please log in");
		 }
	 }
};
config.commandMap = {
	 login: logInCommand,
	 getGift: getGiftCommand,
};
var logInCommandGroup = {
	 label: "Login",
	 thumbnailClass: "Login",
	 commandGroup: {
		 children: [
			 {
				 direction: "vertical",
				 commands: [
					 "Login"
				 ]
			 }
		 ]
	 }
};
var getGiftCommandGroup = {
	 label: "Gift",
	 thumbnailClass: "Gift",
	 commandGroup: {
		 children: [
			 {
				 direction: "vertical",
				 commands: [
					 "getGift"
				 ]
			 }
		 ]
	  }
 };
 if (config && config.ribbon) {
 config.ribbon[0].buttonGroups.unshift(logInCommandGroup);
 config.ribbon[5].buttonGroups.unshift(getGiftCommandGroup);
 }
 var d = new GC.Spread.Sheets.Designer.Designer(document.getElementById("gc-designer-container"), config, spread);
```

#### Parameters

| Name | Type | Description |
| :------ | :------ | :------ |
| `key` | `string` | The data name, uniquely identifies one state data. |

#### Returns

`any`

- The value or state of this data name, could be Object, string or other type.

___

### <a id="getworkbook" name="getworkbook"></a> getWorkbook

▸ **getWorkbook**(): `Object`

Get the workbook of the existing designer.

**`example`**
```
// This example will get the workbook of an existing designer.
var designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("hostDiv"));
var workbook = designer.getWorkbook();
var sheet = workbook.getActiveSheet();
```

#### Returns

`Object`

The workbook of the existing designer.

___

### <a id="refresh" name="refresh"></a> refresh

▸ **refresh**(): `void`

Refresh the designer layout and ribbon area.

**`example`**
```
// This example will refresh the designer and ribbon after change size of designer content HTMLElement.
var designerContent = document.getElementById("gc-designer-container");
designerContent.style.width =width + "px";
designerContent.style.height = height + "px";
designer.refresh();
```

#### Returns

`void`

___

### <a id="setconfig" name="setconfig"></a> setConfig

▸ **setConfig**(`config`): `void`

Represents a new designer using the custom config.

**`example`**
```
// This example will set a custom config to an existing designer
var designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("hostDiv"));
var config = {
      ribbon: [
          {
              id: "home",
              text: "HOME",
              buttonGroups: [
                {
                  label: "Undo",
                  thumbnailClass: "ribbon-thumbnail-undoRedo",
                  commandGroup: {
                    children: [
                      {
                        direction: "vertical",
                        commands: [
                          "undo",
                          "redo"
                        ]
                      }
                    ]
                  }
                }
              ]
          }
      ],
      contextMenu: [
          "contextMenuCut",
          "contextMenuCopy",
      ],
      fileMenu: "fileMenuButton",
      sidePanels: [
          {
              position: "top",
              allowResize: true,
              command: "formulaBarPanel",
              uiTemplate: "formulaBarTemplate"
          },
      ]
 };
designer.setConfig(config);
```

#### Parameters

| Name | Type | Description |
| :------ | :------ | :------ |
| `config` | [`IDesignerConfig`](../interfaces/GC.Spread.Sheets.Designer.IDesignerConfig) | The designer config object. |

#### Returns

`void`

___

### <a id="setdata" name="setdata"></a> setData

▸ **setData**(`key`, `value`): `void`

Set the state or value, there are two types of data, one is local data using only in one component
and the other is global data using in the whole designer environment, designer.setData(key, value) can set the global data storing in the designer by key-value in where having designer instance.

**`example`**
```
// This example will set a global data in one place like ribbon->Home and get this global data in the other place like ribbon->setting, both places having the designer instance.
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
var config = GC.Spread.Sheets.Designer.DefaultConfig;
var logInCommand = {
	title: "Login",
	text: "Login",
	iconClass: "ribbon-button-login",
	bigButton: true,
	commandName: "login",
	execute: (context, propertyName) => {
		alert('Log in new designer.');
		context.setData("isLogIn", true); // setData()
	 }
};
var getGiftCommand = {
	 title: "Get gift",
	 text: "Get gift",
	 iconClass: "ribbon-button-get-gift",
	 bigButton: 'true',
	 commandName: "getGift",
	 execute: (context, propertyName) => {
		 let isLogIn = context.getData("isLogIn"); // getData()
		 if (isLogIn) {
			 alert("Get gift");
		 }
		 else {
			 alert("Please log in");
		 }
	 }
};
config.commandMap = {
	 login: logInCommand,
	 getGift: getGiftCommand,
};
var logInCommandGroup = {
	 label: "Login",
	 thumbnailClass: "Login",
	 commandGroup: {
		 children: [
			 {
				 direction: "vertical",
				 commands: [
					 "Login"
				 ]
			 }
		 ]
	 }
};
var getGiftCommandGroup = {
	 label: "Gift",
	 thumbnailClass: "Gift",
	 commandGroup: {
		 children: [
			 {
				 direction: "vertical",
				 commands: [
					 "getGift"
				 ]
			 }
		 ]
	  }
 };
 if (config && config.ribbon) {
 config.ribbon[0].buttonGroups.unshift(logInCommandGroup);
 config.ribbon[5].buttonGroups.unshift(getGiftCommandGroup);
 }
 var d = new GC.Spread.Sheets.Designer.Designer(document.getElementById("gc-designer-container"), config, spread);
```

#### Parameters

| Name | Type | Description |
| :------ | :------ | :------ |
| `key` | `string` | The data name, uniquely identifies one state data, if you set same key many times using different value, will only store the latest value. |
| `value` | `any` | The value or state of this data name, could be Object, string or other type. |

#### Returns

`void`

___

### <a id="setworkbook" name="setworkbook"></a> setWorkbook

▸ **setWorkbook**(`spread`): `void`

Set the spread of designer using an existing spread.

**`example`**
```
// This example will set an existing spread to designer.
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
var designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("hostDiv"));
designer.setWorkbook(spread);
```

#### Parameters

| Name | Type | Description |
| :------ | :------ | :------ |
| `spread` | `Object` | an existing spread using to replace the old spread of designer. |

#### Returns

`void`

___

### <a id="unbind" name="unbind"></a> unbind

▸ **unbind**(`type`, `fn?`): `void`

Removes the binding of an event to the designer.

**`example`**
```
designer.bind(GC.Spread.Sheets.Designer.Events.FileLoaded, function(event,data){
    console.log("file has loaded")
});
designer.unbind(GC.Spread.Sheets.Designer.Events.FileLoaded);
```

#### Parameters

| Name | Type | Description |
| :------ | :------ | :------ |
| `type` | `string` | The event type. |
| `fn?` | `any` | Specifies the function for which to remove the binding. |

#### Returns

`void`

___

### <a id="unbindall" name="unbindall"></a> unbindAll

▸ **unbindAll**(): `void`

Removes the binding of all events to the designer.

**`example`**
```
designer.bind(GC.Spread.Sheets.Designer.Events.FileLoaded, function(event,data){
    console.log("file has loaded")
});
designer.unbindAll();
```

#### Returns

`void`

___

### <a id="registercomponent" name="registercomponent"></a> RegisterComponent

▸ `Static` **RegisterComponent**(`name`, `constructor`): `boolean`

register custom component

#### Parameters

| Name | Type | Description |
| :------ | :------ | :------ |
| `name` | `string` | component name, you can use it with this name |
| `constructor` | `any` | component class |

#### Returns

`boolean`

whether register is successfully