HTML 5 Designer Customization

arvinr · Post by **arvinr** » Wed Oct 01, 2025 2:23 pm

Hi, I have a few questions regarding the HTML5 Designer. I'm using the npm package stimulsoft-reports-js-angular@^2025.3.5.

1. Is there documentation available for customizing the toolbar, work panel, buttons with dropdowns, etc.?
https://www.stimulsoft.com/en/documenta ... rts_js.htm

2. Is there support for adding custom components in the JS version, similar to the example below? If so, is there a sample implementation available?
https://www.stimulsoft.com/en/samples/r ... e-designer

Thank you

Post by **Lech Kulikowski** » Wed Oct 01, 2025 8:26 pm

Hello,

1. Only this
https://www.stimulsoft.com/en/documenta ... zation.htm

2. It is not possible in the JS version. Only with source code.

Thank you.

arvinr · Post by **arvinr** » Wed Oct 01, 2025 10:41 pm

But is there a way to make a toolbar with a custom work panel and dropdown button? Also, how do I add a custom button to the File menu? If that’s possible, could you show me an example?

Another thing, not sure if this is a bug, but whenever I toggle the theme using setTheme (from Light mode to Dark mode), the custom buttons I added just disappear.

Thank you

Post by **Lech Kulikowski** » Thu Oct 02, 2025 9:32 pm

Hello,

The following code you can use to add a custom element in the File menu:

Code: Select all

var designer = new Stimulsoft.Designer.StiDesigner(options, designerId, false);
designer.renderHtml("content");
var newReportPanel = designer.jsObject.options.newReportPanel || designer.jsObject.InitializeNewReportPanel();
var customBigButton = designer.jsObject.NewReportPanelButton("customReportButton", "My Report Button", "BlankReport.png");
//If you want change button image
//customBigButton.image.src = "https://www.google.by/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png";
newReportPanel.childNodes[1].addCell(customBigButton);
customBigButton.action = function () {
    var fileMenu = this.jsObject.options.menus.fileMenu || this.jsObject.InitializeFileMenu();
    fileMenu.changeVisibleState(false);
    setTimeout(function () {
        //Write your code here
        alert("customReportButton was clicked!");
    }, 200);
}

> Another thing, not sure if this is a bug, but whenever I toggle the theme using setTheme (from Light mode to Dark mode), the custom buttons I added just disappear.

Please send us a sample project that reproduces the issue for analysis on support@stimulsoft.com

Thank you.

arvinr · Post by **arvinr** » Mon Oct 06, 2025 5:31 pm

Hi,

I'm referring to this file menu, how can I add a custom button to it?

: Screenshot 2025-10-06 120947.png (7.36 KiB) Viewed 456 times

Also, I have a few additional questions:
1. How can I create a custom panel similar to the screenshots below:

: Screenshot 2025-10-06 121740.png (9.76 KiB) Viewed 456 times

: Screenshot 2025-10-06 122037.png (6.83 KiB) Viewed 456 times

2. How can I enable or disable custom small/big buttons based on selected object type? Is there a selection event that I can use to determine selected object type?

: Screenshot 2025-10-06 121921.png (9.4 KiB) Viewed 456 times

Thank you

Post by **Lech Kulikowski** » Wed Oct 08, 2025 8:57 pm

Hello,

We need some time to check this possibility and prepare the sample code.

Thank you.
#18537

arvinr · Post by **arvinr** » Thu Oct 09, 2025 5:22 pm

Hello, no worries. Just let me know once the sample code is ready. Thank you

Post by **Lech Kulikowski** » Thu Oct 09, 2025 9:31 pm

Hello,

1. You can use the following code:

Code: Select all

<body>
    <form id="form1" runat="server">
    <div>
        <cc1:StiWebDesigner ID="StiWebDesigner1" OnGetReport="StiWebDesigner1_GetReport" RequestTimeout="1500" runat="server" />
    </div>
    </form>
    <script>
        jsStiWebDesigner1.onready = function () {
            var jsObject = this;

            // Get reference to FileMenu
            var fileMenu = jsObject.options.menus.fileMenu || jsObject.InitializeFileMenu();

            if (fileMenu) {
                // Add separator before custom buttons
                var separator = jsObject.FileMenuSeparator();
                fileMenu.appendChild(separator);

                // Create and add Button 1
                var button1 = jsObject.FileMenuItem("customButton1", "Button 1");
                button1.action = function () {                                        
                    jsObject.options.menus.fileMenu.closeAllPanels(this.name);
                    // Your custom logic for Button 1
                    alert("Button 1 action executed!");
                };
                fileMenu.appendChild(button1);

                // Create and add Button 2
                var button2 = jsObject.FileMenuItem("customButton2", "Button 2");
                button2.action = function () {
                    jsObject.options.menus.fileMenu.closeAllPanels(this.name);
                    // Your custom logic for Button 2
                    alert("Button 2 action executed!");
                };
                fileMenu.appendChild(button2);

                // Create and add Button 3
                var button3 = jsObject.FileMenuItem("customButton3", "Button 3");
                button3.action = function () {
                    this.setSelected(true);
                    jsObject.options.menus.fileMenu.closeAllPanels(this.name);
                    // Your custom logic for Button 3
                    alert("Button 3 action executed!");
                };
                fileMenu.appendChild(button3);
            }
        }
    </script>
</body>

2

Code: Select all

<body>
    <form id="form1" runat="server">
    <div>
        <cc1:StiWebDesigner ID="StiWebDesigner1" OnGetReport="StiWebDesigner1_GetReport" RequestTimeout="1500" runat="server" />
    </div>
    </form>
    <script>
        //where jsStiWebDesigner1 - "js" + designer ID
        jsStiWebDesigner1.onready = function () {
            var jsObject = this;            

            //Classic Ribbon
            jsObject.CustomBlock = function () {
                var block = jsObject.GroupBlock("groupBlock1", "Block1", false, null);
                var innerTable = jsObject.GroupBlockInnerTable();
                block.container.appendChild(innerTable);
                innerTable.style.height = "100%";

                //Button1 
                jsStiWebDesigner1.options.images["ImageForButton1"] = "https://www.stimulsoft.com/favicon.ico"; //For example

                var button1 = jsObject.StandartBigButton("button1", null, "Button1", "ImageForButton1", null, 60);
                innerTable.addCell(button1).style.padding = "2px";

                button1.action = function () {
                    alert("button1");
                }

                //Separator
                var sep1 = jsObject.HomePanelSeparator();
                sep1.style.height = jsObject.options.isTouchDevice ? "90px" : "70px";
                innerTable.addCell(sep1);

                //Button2
                jsStiWebDesigner1.options.images["ImageForButton2"] = "https://www.stimulsoft.com/favicon.ico"; //For example

                var button2 = jsObject.StandartBigButton("button2", null, "button2", "ImageForButton2", null, 60);
                innerTable.addCell(button2).style.padding = "2px";

                button2.action = function () {
                    alert("button2");
                }

                return block;
            }

            jsObject.InitializeCustomPanel = function () {
                var jsObject = this;
                var customPanel = jsObject.ChildWorkPanel("customPanel");
                customPanel.style.display = "none";

                var mainTable = customPanel.mainTableClassic = jsObject.CreateHTMLTable();
                mainTable.style.display = jsObject.options.ribbonType == "Classic" ? "" : "none";
                mainTable.addCell(jsObject.CustomBlock());
                mainTable.addCell(jsObject.GroupBlockSeparator());
                customPanel.appendChild(mainTable);

                jsObject.InitializeCustomPanelSingleLine(customPanel);

                customPanel.changeByRibbonType = function () {
                    this.mainTableSingleLine.style.display = jsObject.options.ribbonType != "Classic" ? "" : "none";
                    this.mainTableClassic.style.display = jsObject.options.ribbonType == "Classic" ? "" : "none";
                    this.setHeightByRibbonType();
                }
            }

            //Single Line Ribbon
            jsObject.InitializeCustomPanelSingleLineBlock = function () {
                var table = jsObject.CreateHTMLTable();

                jsStiWebDesigner1.options.images["ImageForButton1Single"] = "https://www.stimulsoft.com/favicon.ico"; //For example
                jsStiWebDesigner1.options.images["ImageForButton2Single"] = "https://www.stimulsoft.com/favicon.ico"; //For example

                var buttons = [
                    [jsObject.SingleLineRibbonButton("button1Single", null, "Button1", "ImageForButton1Single", null), "button1"],
                    [jsObject.SingleLineRibbonButton("button2Single", null, "Button2", "ImageForButton2Single", null), "button2"],
                ]

                for (var i = 0; i < buttons.length; i++) {
                    var button = buttons[i][0];
                    button.cloneName = buttons[i][1];
                    button.style.margin = "0 2px 0 2px";
                    table.addCell(button);

                    if (button.cloneName == "button1") {
                        table.addCell(jsObject.RibbonPanelSingleLineSeparator());
                    }

                    button.action = function () {
                        alert(this.cloneName);
                    }
                }

                return table;
            }

            jsObject.InitializeCustomPanelSingleLine = function (customPanel) {
                var mainTable = customPanel.mainTableSingleLine = this.CreateHTMLTable();
                mainTable.style.display = jsObject.options.ribbonType == "SingleLine" ? "" : "none";
                mainTable.style.height = (jsObject.options.ribbonSingleLineHeight - 2) + "px";
                mainTable.addCell(jsObject.InitializeCustomPanelSingleLineBlock());
                mainTable.addCell(jsObject.RibbonPanelSingleLineSeparator());
                customPanel.appendChild(mainTable);
            }

            //Toolbar
            var toolBarRow = jsObject.options.toolBar.firstChild.tr[0];

            //Create and add customButton to toolbar
            var toolButton = this.ToolButton("customToolButton", "Custom");
            toolButton.style.marginLeft = "3px";

            var buttonCell = document.createElement("td");
            buttonCell.className = "stiDesignerToolButtonCell";
            buttonCell.appendChild(toolButton);

            //For example insert to 3 position
            toolBarRow.insertBefore(buttonCell, toolBarRow.childNodes[3]);

            toolButton.action = function () {
                this.setSelected(true);
                if (!jsObject.options.customPanel) jsObject.InitializeCustomPanel();
                jsObject.options.workPanel.showPanel(jsObject.options.customPanel);
                jsObject.options.workPanel.changeVisibleState(true);
            }

            //Override changeByRibbonType function
            var workPanel = jsObject.options.workPanel;
            workPanel.changeByRibbonType_ = workPanel.changeByRibbonType;

            workPanel.changeByRibbonType = function () {
                if (jsObject.options.customPanel) jsObject.options.customPanel.changeByRibbonType();
                workPanel.changeByRibbonType_();
            }
        }
    </script>
</body>

Thank you.

HTML 5 Designer Customization

HTML 5 Designer Customization

Re: HTML 5 Designer Customization

Re: HTML 5 Designer Customization

Re: HTML 5 Designer Customization

Re: HTML 5 Designer Customization

Re: HTML 5 Designer Customization

Re: HTML 5 Designer Customization

Re: HTML 5 Designer Customization