Page Comparison

The Wiki Help API allows developers to create context driven help pages for each screen. The API exports screen and field information, which can be used to determine which help page to load. Wiki sites are often used for help, because they're designed for easy contribution. A Wiki is also useful with Profound UI driven screens, because you can load different help pages by passing different text to the URL to load different pages. However, not just Wikis, but any sites that accept URL parameter strings can be setup to host the help documentation.

...

Note: pui.onload is called after the record format is rendered on the page.

The next example toggles the help overlay when the F1 key is pressed.

var helpOverlayOn = false;
function toggleHelp() {
  if( helpOverlayOn )
    pui.wikihelp.overlayOff();
  else
    pui.wikihelp.overlayOn();
  helpOverlayOn = !helpOverlayOn;
}
// Internet Explorer
if("onhelp" in window) {
  window.onhelp = function(){
    toggleHelp();
    return false;
  }
}
// Other browsers.
else {
  addEvent(window, "keyup", function(){
    if( e.keyCode === 112 ) { // F1.
      toggleHelp();
    }
  });    
}

...

Skip Item

By default, help overlays are drawn for every visible widget. However, not every widget needs an explanation–some may exist for style. Thus, overlaying those widgets can clutter the help system and confuse the user.

...

(skipItem is available with Profound UI Version 5, Fix Pack 7.0 and later.) 

Click Event Handler

To handle click events, create a function named, pui.wikihelp.onclick, and add it to the custom js folder in your Profound installation's IFS directory. For example, create a file named, /profoundui/userdata/custom/js/wikiHelp.js.

...

pui.wikihelp.onclick = function( params ) {
  // Construct the URL for a wiki where each display file name has its own page.
  // The sections of the page are named after the record format, "_", and
  // the field name or fieldId.
  var url = encodeURI("http://localhost/dokuwiki/doku.php?id=" + params.dspf + "#"
    + params.recfmt + "_" 
    + ( params.fieldName.length > 0 ? params.fieldName : params.fieldId )
    );

  // The wiki loads into another tab/window.
  window.open(url, "WikiHelp");
};

Overlay Style

By default the overlays have no style, so they are transparent. To style the overlays, add a stylesheet to the custom css folder in your Profound installation's IFS directory. For example, create /profoundui/userdata/custom/css/wikiHelp.css. Each overlay has the html class name, "pui-wikih-overlay", so create a CSS rule for that class. Some example CSS is included below:

...

Blue Transparent overlay on a subfile grid:

.pui-wikih-overlay {
  cursor: help;
  padding: 0;
  text-align: center;
  color: white;
  border: dashed blue 2px;
  box-sizing: border-box; /* Note:unsupported for IE<8.*/
  opacity: 0;
  filter: alpha(opacity=0);

  /* You must have a background-color for IE; without background IE doesn't capture mouse events. */
  background-color: #000000;
}

Note: for Internet Explorer (IE) browsers, the overlay must have a background-color style. Otherwise, IE cannot capture mouse clicks on the overlay, and the feature doesn't work.

...

pui.wikihelp.overlayText = "?";

pui.wikihelp.fontScale

By default, the string's font size changes proportionally to the overlay box size. You can disable automatic font re-sizing by setting pui.wikihelp.fontScale to false.

...

Font size is proportional to widget size:

Default font scale is too large for wide characters:

Font scale of 1.0 fixes this particular string:

...