Example: Customize a Button Control

The following JavaScript interview extension provides custom rendering of the next and back buttons with an arrow image included on the buttons. A CSS file is used to provide the styling of the button.

OraclePolicyAutomation.AddExtension({
    customNextButton: function(interview) {
        let button, caption;

        return {
            mount: function(el) {
                const screen = interview.currentScreen();

                button = document.createElement("button");
                button.setAttribute("title", "Move to next screen");
                button.setAttribute("class", "my-next-button");

                caption = document.createTextNode(screen.getNextCaption());
                button.appendChild(caption);

                img = document.createElement("img");
                img.setAttribute("src", interview.resourcePath + "/white-arrow-right.png");
                button.appendChild(img);

                button.onclick = function(evt) {
                    evt.preventDefault();
                    interview.submit();
                }

                el.appendChild(button);
            },
            update: function(el) {
                const screen = interview.currentScreen();

                caption.textContent = screen.getNextCaption();

                if (screen.hasNextButton())
                    button.removeAttribute("disabled");
                else
                    button.setAttribute("disabled", "disabled");
            }
        }
    },
    customBackButton: function(interview) {
        let button, caption;
        return {
            mount: function(el) {
                const screen = interview.currentScreen();

                button = document.createElement("button");
                button.setAttribute("title", "Move to previous screen");
                button.setAttribute("class", "my-back-button");

                img = document.createElement("img");
                img.setAttribute("src", interview.resourcePath + "/white-arrow-left.png");
                button.appendChild(img);

                caption = document.createTextNode(screen.getBackCaption());
                button.appendChild(caption);

                button.onclick = function(evt) {
                    evt.preventDefault();
                    interview.back();
                }

                el.appendChild(button);
            },
            update: function(el) {
                const screen = interview.currentScreen();

                caption.textContent = screen.getBackCaption();

                if (screen.hasBackButton())
                    button.removeAttribute("disabled");
                else
                    button.setAttribute("disabled", "disabled");
            }
        }
    }
});

To use an interview extension to custom render a button in your policy model:

1. Open 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.)
2. In this folder put:
   • The JavaScript file containing the interview extension for the button (for example, customNextButton extension and customBackButton extension). For more information on these extensions, see Custom Control Rendering Extensions.
   • The CSS file that defines the styles of the button (for example, the styles for .my-next-button and .my-back-button).
   • The image file for the next button (for example, white-arrow-right.png).
   • The image file for the back button (for example, white-arrow-left.png).