Configuring an Editable Component's Help Option

You can configure an editable component's help option to display descriptive text, display a help icon that includes a link to a URL for additional information, or display both the help text and help icon.

The help option includes two sub-options that control the help definition text and help icon:

• definition: Contains the help definition text that displays when the user does one of the following:

  • hovers over the label or help icon

  • tabs into the help icon with the keyboard

  • presses and holds the help icon on a mobile device

• source: Contains the URL to be used in the help icon's link

The following image shows three ojInputText components configured to use the help option. The top component is configured with both a definition and source help sub-option, and the image shows the text and clickable pointer that displays when the user hovers over the label and help icon. In the middle image, the ojInputText component includes a help icon that links to a URL when the user selects it. In the bottom image, the ojInputText displays the custom help text when the user hovers over the label or help icon. In this example, the icon is not clickable but just displays custom text.

To configure an editable component's help option:

1. Add the editable component to your page.

   If you need help, see Adding an Oracle JET Component to Your Page.

2. In the markup, add the help option and definition or source sub-option.

   The markup for the ojInputText components is shown below. Each ojInputText component uses the ojComponent binding to define the component and set the help sub-options. In this example, the user will be directed to http://www.oracle.com after clicking Help.

   <div id="form-container" class="oj-form">
     <h3 class="oj-header-border">Help Definition and Source</h3>
     <label id="ltext10" for="text10">'help' option with 'source' and 'definition'</label>
     <input id="text10" type="text" name="text10" 
       data-bind="ojComponent:{
         component: 'ojInputText', 
         value: text,
         help: {
           definition: 'custom help text',
           source: 'http://www.oracle.com'}}"/>
    
     <label id="ltext11" for="text11">'help' option with 'source'</label>
     <input id="text11" type="text" name="text11" 
       data-bind="ojComponent:{
         component:'ojInputText', 
         value: text,
         help: {
           source: 'http://www.oracle.com'}}"/>
    
     <label id="ltext12" for="text12">'help' option with 'definition'</label>
     <input id="text12" type="text" name="text12" 
       data-bind="ojComponent:{
         component:'ojInputText', 
         value: text,
         help: {
           definition: 'custom help text'}}"/>
   </div>
   

3. In your application's script, set the component's value option to a Knockout observable, and apply the bindings.

   In this example, each ojInputText component's value option is defined as text which is set to a Knockout observable in the following script.

   require(['ojs/ojcore', 'knockout', 'jquery', 'ojs/ojknockout', 'ojs/ojinputtext'],
     function(oj, ko, $)
     {
       function MemberViewModel() 
       {
         var self = this;
         self.text = ko.observable();
       };
    
       $(document).ready(
         function()
         {
           ko.applyBindings(new MemberViewModel(), document.getElementById('form-container')); 
         }
       );
     });   
   

See the Oracle JET Cookbook at Help and Title for the complete example to configure the help option on the ojInputText component.