(Showing Draft Content)

Follow the below steps to add a new item to the Designer Component File Menu.

1. Get the File Menu panel template using the getTemplate method.

   var fileMenuTemplate = GC.Spread.Sheets.Designer.getTemplate(GC.Spread.Sheets.Designer.TemplateNames.FileMenuPanelTemplate);

2. Modify the File Menu panel template to add a custom item and related options.

   var listContainer = fileMenuTemplate["content"][0]["children"][0]["children"][0]["children"][0]["children"][1];
   listContainer.items.push({ text: "Custom Info", value: "CustomItem" });
   var listDisplayContainer = fileMenuTemplate["content"][0]["children"][0]["children"][1];
   listDisplayContainer.children.push({
    type: "Container",
    visibleWhen: "activeCategory_main=CustomItem",
    children: [
    {
    type: "TextBlock",
    margin: "50px 0 15px 50px",
    text: "Infos",
    style: "font-size:36px;line-heigth:80px"
    },
    {
    type: "ColumnSet",
    margin: "0 0 0 50px",
    children: [
    {
    type: "Column",
    children: [
    {
    type: "List",
    className: "file-menu-list",
    items: [
    {
    text: "SpreadJS Version xx.x",
    value: "item1"
    },
    { text: "Release Date: September 22", value: "Item2" },
    { text: "Author: SpreadJS Designer", value: "Item3" }
    ],
    bindingPath: ""
    }
    ],
    width: "350px"
    }
    ]
    }
    ]
   });

3. Register the modified template using the registerTemplate method.

   GC.Spread.Sheets.Designer.registerTemplate(GC.Spread.Sheets.Designer.TemplateNames.FileMenuPanelTemplate, fileMenuTemplate);

4. Initialize the designer instance by passing the relevant config parameter for customizable configuration.

   // Initialize the designer instance
   var designer = new GC.Spread.Sheets.Designer.Designer("designerHost");

The below output will be generated:

image