[]
DEMOS DOC DESIGNER API
DOWNLOAD
(Showing Draft Content)

GC.Spread.Sheets.Designer

Namespace: Designer

Spread.Sheets.Designer

Table of contents

Enumerations

Classes

Interfaces

Type aliases

Variables

Functions

Type aliases

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 }

Variables

DefaultConfig

• DefaultConfig: IDesignerConfig

Represents the default config of designer

LicenseKey

• LicenseKey: string

Represents the license key for evaluation version and production version.

ToolBarModeConfig

• ToolBarModeConfig: IDesignerConfig

Represents the toolbar mode config of designer

Functions

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

findControl

▸ 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");

Parameters

Name Type Description
host string | HTMLElement The target HTMLElement

Returns

Designer | undefined

The designer instance of an existing HTMLElement

getCommand

▸ 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);

Parameters

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

Returns

ICommand | undefined

  • Command found by command name.

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.

getTemplate

▸ 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);

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

  • Template found by template name

getTheme

▸ getTheme(): ITheme

This function returns the designer's current theme.

example

// Get the background color of the current theme.
let currentTheme = GC.Spread.Sheets.Designer.getTheme();
console.log(currentTheme.colorBackground);

Returns

ITheme

  • Current theme

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 The template instance.

Returns

void

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

setTheme

▸ setTheme(Theme): void

This method can set the designer's theme, pass in null to reset the custom theme.

example

// Set the background color of the theme to blue.
GC.Spread.Sheets.Designer.setTheme({
    colorBackground: 'blue'
});

// Reset the custom theme.
GC.Spread.Sheets.Designer.setTheme(null);

Parameters

Name Type
Theme null | Partial<ITheme>

Returns

void

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

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

Returns

void