The Help Button on the Ribbon

To open the help in the web application, it is recommended to place a button that opens the user documentation.

See below an example of this button implementation.

To execute the example, the HTML page must contain the ExpressBox component named expressBox (see Example of Creating the ExpressBox Component).

Add a button to the toolbar into settings on creating the expressBox component:

expressBox = new PP.Exp.Ui.ExpressBox({      
    ParentNode: document.body,
    Source: eaxAnalyzer,
    Service: eaxMdService, // Set service
    ImagePath: IMAGE_PATH, // Specify path to icons folder
    RibbonView: {
      HelpButton = getHelpButtonSettings()
    };
});

Add a function for creating a button and opening the help:

getHelpButtonSettings = function ()
{
     return {
          PPType: "PP.Ui.RibbonButton",
          ResourceKey: "hlpBtnContent",
          Id: "HelpButton",
          Menu: getHelpMenuSettings(),
          MenuArrowPosition: PP.LTRB.Right,
          MenuDropPosition: PP.LTRB.Bottom
     };
};
getHelpMenuSettings = function ()
{
     return {
          Items: [{
              PPType: "PP.Ui.MenuItem",
              ResourceKey: "hlpBtnHelp",
              Data: "help",
              Click: PP.Delegate(showHelp, this)
               }]
     };
};
showHelp = function (helpUrl)
{
     var helpUrlToOpen = null;
     if (!helpUrl)
     {
          helpUrl = PP.AppConfig.HelpUrl;
          var locale = PP.App.getLocale();
          if (locale != "ru")
              locale = "en";
          helpUrlToOpen = PP.String.format(helpUrl, locale);
     }
     else
          helpUrlToOpen = helpUrl;
     window.open(helpUrlToOpen);
};

Add online help URL to the PP.xml file to the AppConfig tag in the format:

<AppConfig HelpUrl="http://ppinfo.fsight.ru/current/{0}/">
</AppConfig>

where {0} - a place for locale placement.

By default, the help opens at: http://help.fsight.ru/{0}/

After executing the example the button that opens the help is displayed at the upper right part of the ribbon.

See also:

Web Applications Developers Knowledge Base