How to add custom button to viewer toolbar?

[alireza_s_84]

Hi,
I add custom button in MVC by following code:

Code: Select all

var userButton = jsMvcViewer1.SmallButton("userButton", "My Button", "emptyImage"); // (name, captionText, imageName, toolTip, arrow, styleName);
    userButton.image.src = "http://files.stimulsoft.com/images/about.png";
    userButton.action = function () { alert("My Button Event"); }

    var toolbarTable = jsMvcViewer1.controls.toolbar.firstChild.firstChild;
    var buttonsTable = toolbarTable.rows[0].firstChild.firstChild;
    var userButtonCell = buttonsTable.rows[0].insertCell(0);
    userButtonCell.className = "stiMvcViewerClearAllStyles";
    userButtonCell.appendChild(userButton);

but can find any "controls" in JS. how i can do it?

[Alex K.]

Hello,

Please try to use the following code:

Code: Select all

var viewer = new Stimulsoft.Viewer.StiViewer(options, "StiWebViewer1", false);
viewer.renderHtml("viewerCont");

var userButton = viewer.jsObject.SmallButton("userButton", "My Button", "emptyImage"); 
userButton.image.src = "https://www.stimulsoft.com/favicon.png";
userButton.action = function () { alert("My Button Event"); }

var toolbarTable = viewer.jsObject.controls.toolbar.firstChild.firstChild;
var buttonsTable = toolbarTable.rows[0].firstChild.firstChild;
var userButtonCell = buttonsTable.rows[0].insertCell(0);
userButtonCell.className = "stiJsViewerClearAllStyles";
userButtonCell.appendChild(userButton);

Thank you.

[mrapi]

thanks,it works,I used this to place it to the right:

Code: Select all

const buttonsTable = toolbarTable.rows[0].lastChild.lastChild;

and this to close the tab

Code: Select all

 userButton.action = function () {
      window.close();
    };

just one question,can I change the icon with font awesome ? I want to put a closing cross or something similar
thanks

[Lech Kulikowski]

Hello,

Sorry, maybe we did not exactly understand your question. Could you explain your issue in more details?

Thank you.

[mrapi]

Hi.for the new added button it is possible to put a custom icon like icons listed here: https://fontawesome.com/v4.7.0/icons/

thanks

[Lech Kulikowski]

Hello,

Please check the provided code, there is the following string:
userButton.image.src = "https://www.stimulsoft.com/favicon.png";

Thank you.

[mrapi]

Hi.I have 2 more questions:
1.it is possible to add a class/id to style new added button?
2.it is possible to remove selected buttons from viewer? :
thanks

[Lech Kulikowski]

Hello,

1. Sorry, maybe we did not exactly understand your question. Could you explain your issue in more details?

2. toolbar.showAboutButton
https://www.stimulsoft.com/en/documenta ... ttings.htm

Thank you.

[mrapi]

Hi
1.for the new added button using above code from answer #2 I want to change text color to red for example

2.using documentation I've hide but just one button left and I ca't hide it:


thanks

[HighAley]

Hello,

You could change style of this button as you need.
Do you have any issue with it?

You could hide the button with next option:

Code: Select all

options.toolbar.showResourcesButton = false;

Thank you.