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

From AgileApps Support Wiki
imported>Aeric
imported>Aeric
 
(41 intermediate revisions by the same user not shown)
Line 1: Line 1:
The pages you are currently reading comprise the ''support wiki''. 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.
{{InProgress|This page is due to be completed shortly.}}
__TOC__
__TOC__
{{TBD|_}}
==About Application-Specific Help==
:* Make a multi-page help system
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.
:* make two  JSP pages ()<br>[[JSP_Pages#About_Header_Files]]
:* make the main page into the help tab
:* How to open a different window from a help button, rather than a link


==About Application-Specific Help==
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.
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.)


''Learn more:''
''Learn more:''
Line 19: Line 12:
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.)


Of course, to open a help page in a different window, you can always use the standard HTML idiom, where "_blank" tells the browser to open a new window:
{{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.
:<tt><nowiki><a href="page-URL" target="_blank">...link-text to click...</a></nowiki></tt>
:''Learn more:'' [[Static Resources#Accessing a JavaScript Resource from an Object Form]]}}
 
===Add a Button to Your Form===
Given that you have a Help tab or a Help page somewhere, ready to display , the next step is to add a button to a form the user sees. This example puts the button in the record's details area. (That is the simplest form of the code.) It is also possible to display the button above the details area (just below the record banner).
:''Learn more:'' [[Form Scripts#Add a Help Button to an Arbitrary Form]]


That's the easiest thing to do, if you happen to have a server handy that will host the pages for you. But if you don't have a server you can use for that purpose, you'll want to display your information page in the Help tab you created for your application.
:<syntaxhighlight lang="javascript" enclose="div">
var targetURL = "http://google.com";  // Put your page here
var button =
  '<div style="float:right;padding-right:20px"> \
    <input type="button" value=" Help "  onclick="...."> \
  </div>';
  // Get the onclick code from the sections that follow


===To Go to the Help Tab===
var action = _sdForm.get(0).a.value; // Determine the form type
:*--get the ID of the Web Tab, or inspect the tab element to get iFrame ID
if (action == "add") {
:*--Find the Help tab and use {element}.click to click the tab!
  // POPUP DIALOG. PUT HELP BUTTON IN THE NEW-RECORD FORM.
::<syntaxhighlight lang="javascript" enclose="div">
  _sdForm.parent('div').parent('div').parent('div')
<script>
          .find('.assigned_title .row-fluid').append(button);
function goToHelpTab() {
} else {
  document.getElementById("...HELP TAB ID...").click();
  // RECORD VIEW. PUT HELP BUTTON IN DETAILS AREA
  _sdForm.parent('div').parent('div').prepend(button);
}
}
</script>
</syntaxhighlight>
</syntaxhighlight>


===To Load a Specific Page Into the Help Tab===
===Open a JSP Page in a Separate Window===
From a button:
Opening a help page in a separate window is the simplest way to do the job. That technique also has the advantage that the user can see the help page side-by-side with the application.
::<syntaxhighlight lang="javascript" enclose="div">
:<syntaxhighlight lang="javascript" enclose="div">
<script>
onclick="window.open(\'/networking/page/PAGENAME.jsp\')"
function go(loc) {
</syntaxhighlight>
  var helpTab = document.getElementById('...HELP TAB ID...')
 
   helpTab.src = loc; // Where the loc is any URL on the web
(Note that path to JSP page begins with a forward slash in the JavaScript code. Were the same path written as a static <tt>href</tt> link in a JSP page, it would be coded ''without'' the initial forward slash: <tt>networking/page/...</tt>.)
   helpTab.click;
 
===Go 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();
}
}
</script>
</syntaxhighlight>
</syntaxhighlight>
::--{{TBD|Show relative URL to get to a JSP page}}


From a link in a displayed page:<br>{{TBD|does a relative link "just work"?}}
Then configure the form button to invoke the <tt>goToHelpTab()</tt> method:
:<syntaxhighlight lang="javascript" enclose="div">
onclick="goToHelpTab()"
</syntaxhighlight>


:* --To display link-target in the Help tab:
{{Note|When the Help tab is clicked (whether by the user or by code), an iFrame is ''then'' created to display the page content. It is theoretically possible to get the iFrame ID after that happens, and then chance the <tt>src</tt> attribute to display different content. But in practice it turns out to be difficult to do so reliably. In addition, the user would see a huge blink as page content changes. So this technique is limited to displaying a single, fixed page.}}
:: function to search for the iFrame and change the src attribute:
:: onclick() in the anchor to invoke the function and pass target
:::--loc.href="pages/PAGE_NAME"
:::--works for pages hosted in the platform
:::--does not work for external pages (use the external site option, for that)

Latest revision as of 17:46, 14 August 2015

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

Add a Button to Your Form

Given that you have a Help tab or a Help page somewhere, ready to display , the next step is to add a button to a form the user sees. This example puts the button in the record's details area. (That is the simplest form of the code.) It is also possible to display the button above the details area (just below the record banner).

Learn more: Form Scripts#Add a Help Button to an Arbitrary Form
var targetURL = "http://google.com";  // Put your page here
var button = 
  '<div style="float:right;padding-right:20px"> \
     <input type="button" value=" Help "  onclick="...."> \
   </div>';
   // Get the onclick code from the sections that follow

var action = _sdForm.get(0).a.value; // Determine the form type
if (action == "add") {
   // POPUP DIALOG. PUT HELP BUTTON IN THE NEW-RECORD FORM.
   _sdForm.parent('div').parent('div').parent('div')
          .find('.assigned_title .row-fluid').append(button);
} else {
   // RECORD VIEW. PUT HELP BUTTON IN DETAILS AREA
   _sdForm.parent('div').parent('div').prepend(button);
}

Open a JSP Page in a Separate Window

Opening a help page in a separate window is the simplest way to do the job. That technique also has the advantage that the user can see the help page side-by-side with the application.

onclick="window.open(\'/networking/page/PAGENAME.jsp\')"

(Note that path to JSP page begins with a forward slash in the JavaScript code. Were the same path written as a static href link in a JSP page, it would be coded without the initial forward slash: networking/page/....)

Go 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!

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();
}

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

onclick="goToHelpTab()"

Notepad.png

Note: When the Help tab is clicked (whether by the user or by code), an iFrame is then created to display the page content. It is theoretically possible to get the iFrame ID after that happens, and then chance the src attribute to display different content. But in practice it turns out to be difficult to do so reliably. In addition, the user would see a huge blink as page content changes. So this technique is limited to displaying a single, fixed page.