Adding Custom Buttons to HTML5 (and WebHelp) Outputs

Depending on the desired functionality, adding a button to Flare’s Web outputs can be fairly easy and requires some basic JavaScript knowledge.

This blog post will outline the steps required to create a button in HTML5 output that changes text color based off of an “ID”. The JavaScript function for HTML5 and WebHelp will be provided. To create the same effect in WebHelp, use the same steps, but use the default skin and the correct script for WebHelp (below). Note, this script will not work in Chrome unless viewed from a WebServer. If you are going to test/run this script locally, run the resulting output in Internet Explorer.

Things you will need:

A new Flare Project with an HTML5 Target and Skin

Set an ID in a topic

Some JavaScript (See Below) for the skin file

Topic and ID:

Open the topic in the text editor and add id=”foo” to the <p> tag.

Save all and close the topic in the Text Editor

Skin settings:

In the Project Organizer, open the HTML5 Skin in the Skin Editor

Go to the “Toolbar” Tab

Click the “Add custom toolbar item” button and name the button “changeColor”

Click the “Add item” button to move the ‘changeColor’ button to the ‘Selected’ column

Your ‘Selected’ column should now look like this:

Now click the “Edit” button and paste this code into it:
function changeColor()
{
frames[‘topic’].document.getElementById(“foo”).style.color=”#FF0000″;
}

OK and Save all

Go to the Styles tab and the styles dialog box

Scroll down to the “Toolbar Button” node and expand it

You should see the button that you created “changeColor”, click on it

Click and expand the Event node and type in the “Click” area: “changeColor()”

Save all and close the Skin

Generate HTML Help and view the results using Internet Explorer. You will see a blank button that if you click, it will change the text of the paragraph to red.

The button can now be styled to include an icon, text, different colors, etc. Just go back to the Styles Tab in the skin and edit the properties for the button as you want.

Notes:

Make sure that the button name is all one word (no spaces) and that the casing in the script is all the same.

Since browser security is different, be sure to test any custom script locally and on a WebServer in all browsers. As in this example, some scripts will not work locally but will function fine served up or altered security settings.

To do this for WebHelp, use the steps above, but you will be editing the Default Skin and adding the this JavaScript instead of the code given above.

With over 10 years of experience in the software industry, Mr. Sermeno brings a wealth of knowledge and expertise to the product evangelist team, helping introduce new users to everything MadCap Software. In his spare time, Jose is the Project Director for San Diego City Robotics, the San Diego community college systems robotics program, and enjoys working in software design and open source hardware development. Prior to joining MadCap in late 2010, Jose ran a Drupal development shop, and was an application manager for Temple University Health System.

Its the same concept, but a bit different steps are required to open a file from a toolbar button.

You still add the button in the skin, but don’t need to include the javascript in the toolbar button tab. Instead, in the styles tab, you only need to configure the “window.open” event for the button you’ve added. Also, you’ll need to include the .pdf you’re linking to with the project.

You could also link to the PDF from a TOC entry in the navigation pane of the output. I’ve put together a project that demonstrates both examples of this implemented (opening a .pdf from the toolbar button, and a toc entry).

Download the .flprjzip, and then build the HTML5 target to view the results. You can review the project to see how it was implemented.

That was due to an error on my part. You can’t have spaces in your toolbar button names, which my sample project did have – so the image didn’t load. I’ve updated the linked project to reflect the proper naming convention on the button, and now you should be able to set a .png as be the button graphic.

Now I want to do the same for my CHMs. If you have a moment, can you update the sample to include a skin with a custom button on the Toolbar, after Print? I’ve created my three images and updated the event to point to my PDF. I can’t get the button to appear in the Html Help Buttons list in HTML Help Setup. I even tried different ControlTypes. Thanks!

Are you packaging your .pdf up in the .chm, or linking from a server? I believe in the HTML Help Toolbar buttons, you’ll only be able to link to the .pdf on a server using the Jump buttons. Customize the Jump Button URL to point to the .pdf on the server, and it should open in the default window of the .chm.

Me again. Is there a custom button that can be added to the HTML5 skin that expands the Table of Contents to the current topic? When I send the URL of our internal HTML5, the Contents are collapsed. Users must drill down to find the current location or expand all and scroll. Perhaps I am missing a configuration setting. Can a button be added that opens the TOC to the current location?

And while it works the window.location.href is insisting on putting in the highlighted search terms at the end, so I end up with an invalid link. Is there a way to prevent the ?Highlight=xxxx from being added to the end of the link when a search is performed? Or is there something I can substitute for the window.location.href that does not include that? Or perhaps even a way to turn off the highlighting feature so that the link is pure?

Hi Eric, thanks for the comment. Here is what we came up with. This only functions with MS Outlook if there are no spaces in the url path, as it fixes the “%20” and replaces them with actual spaces in the email – effectively breaking the link functionality.

Unfortunately, right now you can’t enter text as a “label” for your custom button using the UI text fields tab of the Skin Editor. You’ll need to use an image for the button face graphic. I’ve passed on your request of “Entering text labels on custom toolbar buttons” as a feature suggestion to our product team here at MadCap. You’ll be sent an email when this is addressed in the future!

What javascript would I use to create a button that expands and collapses the navigation panel? We’ve encouraged our users to search for content by hiding the navigation pane on startup. Unfortunately, the expand icon is very small and easily overlooked so we thought we’d add a button to open and close the navigation panel.

Jose, our client wants to use .svg for all icons and logos throughout a help system – makes for easy consistency of experience online to print, and cuts down on asset management – how can we get the toolbar in the Flare 2017 R2 or R3 to allow .svg as the icon format? We’ve read the forum posts about using CSS to trick the skin to use an .svg as the main header logo, but how about the toobar button icons? When I look at the code of the Toolbar Skin in the text editor, there’s a huge long hashed name/location for the called image – any thoughts on this?

Hi Gerard,
One thing that worked for me was finding the selector being used in the compiled output and writing that selector to my own stylesheet. In the case of HTML5 – Top Navigation’s print button, I added the following selector/properties (note that the .svg is in my Resources > Images Folder while the CSS referencing this image is in Resources > Stylesheets):