Controlling the Display of Hints, Title, and Messages

Use the displayOptions component option to control the placement and visibility of converter and validator hints, messages, and title.

The following image shows the default placement and visibility of help, converter and validator hints, messages, and title. This example uses the ojInputDate component, but the behavior is the same on all editable components where it makes sense:

  • help: Displays in a note window on hover

  • validator hint: Displays in a note window on focus

  • converter hint: Used as the input field's placeholder or displays in a note window if the placeholder option is defined.

  • messages: Displays inline on error

  • title: Displays in a note window on focus

The code sample below shows the markup for the ojInputDate component used in this example. The example includes definitions for title, help, validator hints, and custom messages on validation failure.

<div id="form-container" class="oj-form">
 
  <h3 class="oj-header-border">Default Display of Messages, Hints, Title</h3>
  <label for="date10">input date</label>
  <input id="date10" type="text" size="30" 
    required name="date10" 
    title="Enter a date in your preferred format and we will attempt to figure it out"
    data-bind="ojComponent:{
      component:'ojInputDate', 
      value: birthdate, 
      converter: longDateConverter, 
      help: {definition: 'custom help text'},
      validators: [{
        type: 'datetimeRange', 
        options: {
          min: oj.IntlConverterUtils.dateToLocalIso(new Date(1930, 00, 01)),
          max: oj.IntlConverterUtils.dateToLocalIso(new Date(1995, 11,30)),
        hint: {inRange: 'Validator hint: datetimeRange: January 1, 1930 - November 30, 1995 years'},
        messageSummary:{
          rangeOverflow: 'messageSummary: rangeOverflow: Date later than max.',
          rangeUnderflow: 'messageSummary: rangeUnderflow:Date earlier than min.'},
        messageDetail:{
          rangeOverflow: 'messageDetail: rangeOverflow: The value \'{value}\' is not in the expected range; it is too high.',
          rangeUnderflow: 'messageDetail: rangeUnderflow: The value \'{value}\' is not in the expected range; it is too low.'}}}],
        translations: {'required' : {
         hint: 'Validator hint: required: You must enter a valid date',
         messageSummary: 'messageSummary: custom summary: \'{label}\' Required',
         messageDetail: 'messageDetail: custom detail: A value is required for this field'}}}"/>
</div>

Using the displayOptions component option in your markup, you can change the default behavior of the title, hints, and messaging options of a single editable component on your page. To control the behavior of all editable components on the page, you can use the oj.Component.setDefaultOptions() method in your application script to set displayOptions.

displayOptions allows you to change the default behavior as follows:

  • title: Set to none to turn off the title display.

  • converterHint: Set to none to turn off the display or set to notewindow to change the default placement from placeholder text to a note window.

  • validatorHint: Set to none to turn off the display.

  • messages: Set to none to turn off the display or set to notewindow to change the default placement from inline to a note window.

To change the default display and location of title, hints, and messaging options:

  1. Add the editable component to your page.
  2. To change the default display and location for an individual editable component, add the displayOptions option to your component definition and set it as needed.

    For example, to turn off the display of hints and title and to display messages in a note window, add the highlighted markup to your component definition:

    data-bind="ojComponent:{
      component:'ojInputDate', 
        value: birthdate, 
        converter: longDateConverter,
        displayOptions:
            {converterHint: 'none', validatorHint: 'none', title: 'none', messages: 'notewindow'},
        ... contents omitted
    }"
    
  3. To change the default display and location for all editable components in your application, add the oj.Component.setDefaultOptions() method to your application's script and specify the desired displayOptions.

    For example, to turn off the display of hints and title and to display messages in a note window, add the ojComponent.setDefaultOptions() method with the arguments shown below.

    oj.Components.setDefaultOptions({
      'editableValue':
      {
        'displayOptions': 
        {
          'converterHint': ['none'],
          'validatorHint': ['none'],
          'messages': ['notewindow'],
          'title': ['none']
        }
      }});
    

The Oracle JET cookbook contains the complete code for this example at User Assistance. You can also find additional examples that illustrate help, hints, messaging, and title configuration.