Difference between revisions of "HowTo:Create Application-Specific Help"

From AgileApps Support Wiki
imported>Aeric
imported>Aeric
Line 13: Line 13:
Here, we assume that you want to display different pages, depending on the user's current location--so you'll be wiring help buttons that appear on different forms so they display different pages in the help tab. (You may even use JavaScript to go to different help pages, under different conditions.)
Here, we assume that you want to display different pages, depending on the user's current location--so you'll be wiring help buttons that appear on different forms so they display different pages in the help tab. (You may even use JavaScript to go to different help pages, under different conditions.)


{{TIP|JavaScript functions are most easily tested by adding them to the OnLoad script in a [[Form]]. But hey are most easily reused by uploading them in a static resource file.
{{TIP|JavaScript functions are most easily tested by adding them to the OnLoad script in a [[Form]]. But they are most easily reused by uploading them in a static resource file.
:''Learn more:'' [[Static Resources#Accessing a JavaScript Resource from an Object Form]]
:''Learn more:'' [[Static Resources#Accessing a JavaScript Resource from an Object Form]]
}}
}}
Line 32: Line 32:
</syntaxhighlight>
</syntaxhighlight>


To use that code, configure the button to invoke the goToHelpTab method:
Then configure the form button to invoke the <tt>goToHelpTab()</tt> method:
:<syntaxhighlight lang="javascript" enclose="div">
:<syntaxhighlight lang="javascript" enclose="div">
var button = '<input type="button" value=" Help "  onclick="goToHelpTab()">';
var button = '<input type="button" value=" Help "  onclick="goToHelpTab()">';
Line 38: Line 38:


===Open a JSP Page in a Separate Window===
===Open a JSP Page in a Separate Window===
 
Opening a help page in a separate window has the advantage that the user can see the help page side-by-side with the application.
To do do that, add these functions to the form's OnLoad script:
:<syntaxhighlight lang="javascript" enclose="div">
:<syntaxhighlight lang="javascript" enclose="div">
function findByAttributeValue(attribute, value)    {
var button =
  var All = document.getElementsByTagName('*');
  '<input type="button" value=" Help " \
  for (var i = 0; i < All.length; i++)      {
          onclick="window.open(\'/networking/page/PAGENAME.jsp\')">';
    if (All[i].getAttribute(attribute) == value) { return All[i]; }
</syntaxhighlight>
  }
}


function go(loc) {
  var helpTabLinks = findByAttributeValue("display_title","HELP"); 
  // The iFrame that displays the content is created after the link is clicked.
  // The value we need to find it is stored in the link's "id" attribute.
  // Look for the iFrame until it is created. (Give up after 1,000 tries.)
  var iFrameID = "iFrameWebTab_" + helpTabLinks[1].id;
alert("Looking for: "+iFrameID);
  var iFrame = document.getElementByID(iFrameID);
  iFrame.src = loc;
}
</syntaxhighlight>


Then add the following code to the Help button:
Then add the following code to the Help button:

Revision as of 22:37, 13 August 2015

WorkInProgress.gif

Work In Progress:
This page is under development.

About Application-Specific Help

The information here in the support wiki is intended primarily for application builders, admins, and installers. But end-users need information that is specific to the application they are using--and that is where application-specific help comes in.

In this article, we assume that you know how to add a button to a form, and that you know how to create an interface tab that displays a single HTML page of information. (The important point is to make sure that your help pages have no headers, so that links work.) With those basics in hand, you can go on to create context-sensitive help pages for your application.

Learn more:

Working with Application-Specific Help

Here, we assume that you want to display different pages, depending on the user's current location--so you'll be wiring help buttons that appear on different forms so they display different pages in the help tab. (You may even use JavaScript to go to different help pages, under different conditions.)

Thumbsup.gif

Tip: JavaScript functions are most easily tested by adding them to the OnLoad script in a Form. But they are most easily reused by uploading them in a static resource file.

Learn more: Static Resources#Accessing a JavaScript Resource from an Object Form

Going to the Help Tab

When the Help button is clicked, this code (in effect) reaches out an arm from behind the screen, grabs the mouse, and clicks on that tab!

<syntaxhighlight lang="javascript" enclose="div">

function findByAttributeValue(attribute, value) {

 var All = document.getElementsByTagName('*');
 for (var i = 0; i < All.length; i++)       {
   if (All[i].getAttribute(attribute) == value) { return All[i]; }
 }

}

function goToHelpTab() {

  var helpTabLink = findByAttributeValue("display_title","HELP");
  helpTabLink.click();

} </syntaxhighlight>

Then configure the form button to invoke the goToHelpTab() method:

<syntaxhighlight lang="javascript" enclose="div">

var button = '<input type="button" value=" Help " onclick="goToHelpTab()">'; </syntaxhighlight>

Open a JSP Page in a Separate Window

Opening a help page in a separate window has the advantage that the user can see the help page side-by-side with the application.

<syntaxhighlight lang="javascript" enclose="div">

var button =

 '<input type="button" value=" Help " \
         onclick="window.open(\'/networking/page/PAGENAME.jsp\')">';

</syntaxhighlight>


Then add the following code to the Help button:

<syntaxhighlight lang="javascript" enclose="div">

onclick="go(\+targetURL+'\')" // For example: networking/pages/MoreInfo.jsp </syntaxhighlight> where the target URL has the form, "networking/pages/PAGE_NAME.jsp", for a page hosted in the platform.