Example: Display a Numeric Keypad for Number Inputs In Mobile Browsers

You can use a JavaScript interview extension to display a numeric keypad for number inputs in interviews on mobile browsers to make numeric input easier.

The interview extension is bound to individual input controls with a custom property inputType = number.

The JavaScript for this interview extension is provided below:

OraclePolicyAutomation.AddExtension({
    customInput: function (control, interview) {
        if (control.getProperty('inputType') === 'number') {
            let input;
            return {

                mount: function (el) {
                    input = document.createElement("input");
                    input.className = "custom-input";

                    input.type = "number";
                    input.pattern="[0-9]*";

                    input.style.maxWidth = "256px";
                    input.style.width = "100%"
                    input.style.outlineColor = "rgb(114, 119, 128) solid 1px";
                    input.style.padding = "0.4em 0.8em"

                    input.onchange = function (evt) {
                        if (input.value != "") {
                            var num = parseFloat(input.value);
                            control.setValue(num);
                        }
                    }

                    input.value = control.getValue();
                    el.appendChild(input)
                },

                update: function (el) {

                },
                unmount: function (el) {
                }
            }
        }

    }
})

Note that:

• You need to specify an input pattern that restricts input to positive integer numbers only (as shown in the code above) in order to make the number pad display.
• You can specify the styles for the input control as required in the JavaScript.
• On non-mobile browsers, an input that has this custom property will display like a normal input control.

To use this interview extension in your policy model:

1. Create a JavaScript file containing the code above.
2. Put the JavaScript file in the /interview-theme/resources folder for your project. (This folder is created when you click the Custom Files button in the Styles dialog box on the Interview tab in Policy Modeling.)
3. Open your project in Policy Modeling.
4. On the Interview tab, select the number input control in the screen list or the screen layout view.
5. Click the Properties button.
   
6. In the Custom Properties section, define the following key-value pair:
   • Key: inputType; Value: number