[]
Ƭ CommandMap: { [key in string]: ICommand }
Ƭ CommandType: "button"
| "dropdown"
| "separator"
| "checkbox"
| "comboBox"
| "text"
| "spinner"
| "list-preview"
| "colorPicker"
| "groupHeader"
| "chartFormat"
| "tableFooter"
| "SparklineColorPicker"
| "textBox"
| "listContent"
| string
Ƭ 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: "foreColor"
| "backColor"
| "sparklineColor"
Ƭ RuleType: "Defaults"
| "Float"
| "Currency"
| "Percent"
Ƭ TemplateMap: { [key in string]: IDialogTemplate }
• DefaultConfig: IDesignerConfig
Represents the default config of designer
• LicenseKey: string
Represents the license key for evaluation version and production version.
• ToolBarModeConfig: IDesignerConfig
Represents the toolbar mode config of designer
▸ 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);
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. |
void
▸ findControl(host
): 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");
Name | Type | Description |
---|---|---|
host |
string | HTMLElement |
The target HTMLElement |
Designer
| undefined
The designer instance of an existing HTMLElement
▸ getCommand(commandName?
): 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);
Name | Type | Description |
---|---|---|
commandName? |
string |
Name of command, uniquely identifies one command, if commandName is empty, will return all registered commands. |
ICommand
| undefined
▸ 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"));
Object
▸ getTemplate(templateName
): 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);
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. |
IDialogTemplate
| null
▸ 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);
Name | Type | Description |
---|---|---|
templateName |
string |
Name of template, uniquely identifies one template. |
template |
IDialogTemplate |
The template instance. |
void
▸ 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"));
Name | Type |
---|---|
resources |
Object |
void
▸ 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);
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. |
void
▸ 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);
Name | Type | Description |
---|---|---|
text |
string |
The error text of the messageBox |
title |
string |
The title of the messageBox |
icon |
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 |
The buttons of the messageBox |
void