|
| 1 | +# ❔ Contextual help for the web |
| 2 | + |
| 3 | +The HelpViewer solution includes a [plugin][PluginR] for browsers based on the Chromium engine (Chrome, Edge). |
| 4 | + |
| 5 | +## Features |
| 6 | + |
| 7 | +The plugin adds the ❔ **What's here?** action to the right-click menu, which then opens a specific chapter in a specific help file in the same way that was common in operating systems in the past. |
| 8 | + |
| 9 | +## Installation |
| 10 | + |
| 11 | +**The system administrator** must install the plugin on user workstations in **developer mode** (chrome://extensions/). The plugin is not available in the Chrome Web Store. |
| 12 | + |
| 13 | +## Integrating the application and help |
| 14 | + |
| 15 | +**The programmer is responsible for integrating the help into the application**. |
| 16 | +Simply define the **hvHelpFile object** in the web application: |
| 17 | + |
| 18 | +```javascript |
| 19 | +var hvHelpFile = { |
| 20 | + file: 'hlp-user/Help-__.zip', |
| 21 | + viewer: 'https://helpviewer.github.io/index.html', |
| 22 | + //viewer: '$/index.html', // relative path to the viewer derived from the application location |
| 23 | + routing: false |
| 24 | + //, extension: '.md' |
| 25 | + //, offset: 0 |
| 26 | +} |
| 27 | +``` |
| 28 | + |
| 29 | +The definition can be changed dynamically based on context (e.g., by page). More details in the [plugin documentation][PluginR]. |
| 30 | + |
| 31 | +## Retrieving the list of chapters |
| 32 | + |
| 33 | +For help authors, chapter names—derived from the **id** attribute of controls in the application—are key. |
| 34 | +**The programmer must provide them**—they are responsible for configuring the plugin. |
| 35 | + |
| 36 | +### Steps for the programmer |
| 37 | + |
| 38 | +1. Open the developer console (F12) on the application page. |
| 39 | +2. Retrieve all element IDs: |
| 40 | + |
| 41 | +```javascript |
| 42 | +allElements = Array.from(document.body.querySelectorAll('*')).map(x => x.id).filter(x => x); |
| 43 | +``` |
| 44 | + |
| 45 | +3. For combined IDs (e.g., trees, lists—only prefixes before **|** are combined): |
| 46 | + |
| 47 | +```javascript |
| 48 | +allElements = [...new Set(Array.from(document.body.querySelectorAll('*')).map(x => x.id).filter(x => x).map(x => x.split('|')[0]))]; |
| 49 | +``` |
| 50 | + |
| 51 | +1. **Verify behavior** in the target environment—the **routing, extension, and offset** parameters affect the final chapter name. |
| 52 | + |
| 53 | +## Special cases |
| 54 | + |
| 55 | +- For **elements without an ID**, the **noid.md** chapter opens (or noid.(extension) from the configuration) |
| 56 | +- Test on different pages/forms according to the application architecture |
| 57 | + |
| 58 | +## Debugging and tips |
| 59 | + |
| 60 | +1. If the ❔ item is missing, check **hvHelpFile** in the console: console.log(hvHelpFile). |
| 61 | +2. Is the name of the opened chapter incorrect, or is no chapter text displayed? Verify the element ID under the cursor and the offset/routing/extension configuration. Also verify that you have created the chapter file in the help. |
| 62 | +3. Use **\$/index.html** for standalone deployment with the application—**\$** here denotes a relative path relative to the current application URI (the tab from which the ❔ command was launched). |
| 63 | +4. Security: The plugin runs in an isolated context and does not affect the application. |
| 64 | + |
| 65 | +[PluginR]: ?d=https://raw.githubusercontent.com/HelpViewer/PluginChromeHelpViewer/master/ "PluginChromeHelpViewer" |
0 commit comments