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:

  1. Open the topic in the text editor and add id=”foo” to the <p> tag.
    Adding an ID to a paragraph
  2. Save all and close the topic in the Text Editor

Skin settings:

  1. In the Project Organizer, open the HTML5 Skin in the Skin Editor
  2. Go to the “Toolbar” Tab
  3. Click the “Add custom toolbar item” button and name the button “changeColor”
  4. Click the “Add item” button to move the ‘changeColor’ button to the ‘Selected’ column
    The First Few Steps
  5. Your ‘Selected’ column should now look like this:
    Adding a button
  6. Now click the “Edit” button and paste this code into it:
    function changeColor()
    {
    frames[‘topic’].document.getElementById(“foo”).style.color=”#FF0000″;
    }
  7. OK and Save all
  8. Go to the Styles tab and the styles dialog box
  9. Scroll down to the “Toolbar Button” node and expand it
  10. You should see the button that you created “changeColor”, click on it
  11. Click and expand the Event node and type in the “Click” area: “changeColor()
    Second Set of Steps
  12. 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.
End Result

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.

function changeColor()
{
 parent.frames['body'].document.getElementById("textColor").style.color="#FF0000";
}

 

About The Author

Jose Sermeno

About Jose Sermeno

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.

Last Modified: December 4, 2012

This entry was posted in HTML5, MadCap Flare, Tips & Tricks. Bookmark the permalink.

Comments

  • Thomas Tregner December 9, 2012 at 12:02 PM

    If you want to add a script to your tool chest, this post describes a JavaScript to alphabetically sort the top nodes in an HTML5 output TOC: http://tregner.com/flare-blog/sorting-tocs-in-and-output-with-javascript/

  • TJ February 6, 2013 at 9:59 AM

    Would the steps outlined here be the ones to follow for adding a custom button to the HTML5 skin that launches the PDF?

    • Jose Sermeno Jose Sermeno February 6, 2013 at 2:59 PM

      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.

      http://ts.madcapsoftware.com/Downloads/Linked%20PDF.flprjzip

  • TJ February 7, 2013 at 8:36 AM

    Thanks!

    Can I add a graphic with the text “PDF” to the new button?

  • TJ February 7, 2013 at 8:45 AM

    >Can I add a graphic with the text “PDF” to the new button?
    Background > BackgroundImage!

    • TJ February 7, 2013 at 9:06 AM

      Specifying the pdf.png graphic for the button background in BackgroundImage is not working. Does the file need to be in a specific directory?

      • Jose Sermeno Jose Sermeno February 7, 2013 at 11:16 AM

        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.

        Redownload and check it out!

        • TJ February 7, 2013 at 2:39 PM

          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!

          • Jose Sermeno Jose Sermeno October 8, 2013 at 3:53 PM

            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.

  • TJ February 7, 2013 at 1:06 PM

    That works!!! THANKS!

  • TJ April 5, 2013 at 9:46 AM

    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?

    Thanks!!!

  • Eric April 30, 2013 at 3:04 PM

    I am trying to get an email help button working with the HTML5 output. I am basing it on this article – http://kungfuwit.wordpress.com/2009/08/05/five-steps-to-share-a-topic-with-an-email-button-in-a-webhelp-toolbar-in/.

    My java looks like this:
    function EmailLink(){
    window.location = “mailto:”+”?subject=” + ‘ESC Help Link: ‘ + document.title + “&body=” + ‘Here is a link to the help topic you requested – ‘ + window.location.href + ‘%0D%0A’;
    }

    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?

    I’d really appreciate any help you can provide. Thanks!

    • Jose Sermeno Jose Sermeno May 6, 2013 at 2:49 PM

      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.

      function EmailTopicLink(){
      var location = window.location.protocol + ‘//’ + window.location.host + window.location.pathname;

      window.location = “mailto:?subject=ESC Help Link: ” + document.title +
      “&body=Here is a link to the help topic you requested – ” +
      location + “%0D%0A”;

      }

      I tested some other fixes to try and get he url to paste into Outlook with no success – even after trying to replace the text. Any ideas?

      // Doesn’t work…
      /*var location = window.location.protocol + ‘//’ + window.location.host + window.location.pathname;
      location = window.location.href.split(‘?’)[0];
      location = location.replace(” “, “%20”);
      var link = “” + document.title + ““;

      window.document.location=”mailto:” +
      “?subject=Here is a topic title ” + document.title +
      “&body=Here is the link: ” + location;*/

  • Jose Sermeno Jose Sermeno May 7, 2013 at 7:13 AM

    Here’s how to wrap the url for the function to work with Outlook: http://office.microsoft.com/en-us/outlook-help/add-links-containing-spaces-to-an-e-mail-message-HA001127242.aspx

    You need to include the “” tags that wrap the link so it is an actual link inserted in an Outlook email.

  • Jorunn June 5, 2013 at 4:18 AM

    “The button can now be styled to include an icon, text, different colors, etc.”

    I have not been able to find a way to add a label to my custom toolbar button i HTML5 help output, Flare 9.1. The only property showing up on the UI Text tab is “Tooltip”. Is there a secret trick? 🙂

    • Jose Sermeno Jose Sermeno June 12, 2013 at 1:45 PM

      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!

  • Ian James September 10, 2013 at 4:00 PM

    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.

    Thanks,

    Ian

  • Gary Thorn November 6, 2013 at 8:18 AM

    I would like to add a text link to the toolbar, rather than a button: “How to use the Help” that opens a text popup when clicked. How would I go about doing this?

  • Gerard Falla December 4, 2017 at 2:22 PM

    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?

    • Justin Bondoc Justin Bondoc December 11, 2017 at 2:47 PM

      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):

      ._Skins_TopicToolBar.mc-component .button.print-button
      {
      background: #ececec url(../Images/[your-image].svg) no-repeat center center;
      background: url(../Images/[your-image].svg) no-repeat center center, -moz-linear-gradient(top, #ffffff 0%, #ececec 100%);
      background: url(../Images/[your-image].svg) no-repeat center center, -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#ececec));
      background: url(../Images/[your-image].svg) no-repeat center center, -webkit-linear-gradient(top, #ffffff 0%, #ececec 10%);
      background-size: 70%;
      background: url(../Images/[your-image].svg) no-repeat center center, -o-linear-gradient(top, #ffffff 0%,#ececec 100%);
      background: url(../Images/[your-image].svg) no-repeat center center, -ms-linear-gradient(top, #ffffff 0%,#ececec 100%);
      background: url(../Images/[your-image].svg) no-repeat center center, linear-gradient(top, #ffffff 0%,#ececec 100%);
      }
      Hope this helps!

Have Something to Say?

Your email address will not be published. Required fields are marked *