Page 1 of 2
How to add custom button to viewer toolbar?
Posted: Fri Jan 27, 2017 4:50 am
by 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?
Re: How to add custom button to viewer toolbar?
Posted: Fri Jan 27, 2017 11:03 am
by 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.
Re: How to add custom button to viewer toolbar?
Posted: Wed May 30, 2018 8:18 am
by 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
Re: How to add custom button to viewer toolbar?
Posted: Wed May 30, 2018 1:02 pm
by Lech Kulikowski
Hello,
Sorry, maybe we did not exactly understand your question. Could you explain your issue in more details?
Thank you.
Re: How to add custom button to viewer toolbar?
Posted: Wed May 30, 2018 1:54 pm
by 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
Re: How to add custom button to viewer toolbar?
Posted: Thu May 31, 2018 6:50 pm
by Lech Kulikowski
Hello,
Please check the provided code, there is the following string:
userButton.image.src = "
https://www.stimulsoft.com/favicon.png";
Thank you.
Re: How to add custom button to viewer toolbar?
Posted: Thu Feb 14, 2019 10:04 am
by 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
Re: How to add custom button to viewer toolbar?
Posted: Fri Feb 15, 2019 10:04 am
by 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.
Re: How to add custom button to viewer toolbar?
Posted: Fri Feb 15, 2019 12:21 pm
by 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
Re: How to add custom button to viewer toolbar?
Posted: Fri Feb 15, 2019 3:33 pm
by 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.
