Display Dynamic Hints for Input Components in Visual Builder

In an input text component, we may come across a requirement where user would like to know the number of characters they have entered or if there is length validation in place, user would like to see how many more characters are left for them to key in or based on certain use cases, we may have to display the hints dynamically. As we can see, there could be number of scenarios where we would like to have more control on how or when the hints should be displayed.

In this blog, let's consider a use case as per the below screenshot where we need to display number of characters entered in an input text component as user types in.

We can implement the same by following below steps:

Step 1: Create a variable and bind it to the raw-value attribute

Create a variable and bind it to the raw-value attribute of the input text. For example, I have a created a page scoped variable 'hint' and binded it to the raw-value attribute.

<oj-input-text label-hint="Input Text" class="oj-flex-item oj-sm-12 oj-md-6" raw-value="{{ $variables.hint }}"></oj-input-text>

Step 2: Create a custom JavaScript function

Create a custom JavaScript function which accepts a parameter. Function caluclates the length of the parameter and returns it in a formatted text.

For example, I have created a custom JavaScript function 'dynamicHint' at the page scoped.

/**
     * Function to calculate the length of the paramter
     * @param {String} value
     * @return {String}
     */
    dynamicHint(value){
      if (!value) return '';
      return `${value.length} characters entered`;
    }

Step 3: Set the help.instruction attribute on the component to the custom JavaScript function

Set the help.instruction attribute of the input text component to the custom JavaScript function. Pass the variable created in Step 1 as an argument to the function.

<oj-input-text label-hint="Input Text" class="oj-flex-item oj-sm-12 oj-md-6" raw-value="{{ $variables.hint }}" help.instruction="[[ $page.functions.dynamicHint($page.variables.hint) ]]"></oj-input-text>

Conclusion:

In this blog we have seen, how we can display hints dynamically for an input text component. We can extend/modify the custom JavaScript function further to have more control on how or when to display the hints based on the requirement.