Examples of Control Restyling

Examples of control restyling using JavaScript interview extensions are given below.

You could use the following interview extension to restyle text input controls:

OraclePolicyAutomation.AddExtension({
    style: {
        textInput: {
            className: "my-text-input"
        }
    }
});

with custom CSS:

.my-text-input {
     height: 30px;
     background-color: whitesmoke;
     border-style: solid;
     border-color: lightgray;
     border-width: 2px;
     border-radius: 4px;
     padding-left: 9px;
}

This would display text inputs in an interview like this:

A text input control in an Intelligent Advisor interview that has been restyled using an interview extension

You could use the following interview extension to restyle numeric text fields so the text is red if the current value is negative: 

OraclePolicyAutomation.AddExtension({
    style: {
        textInput: function(control) {
            if (control.getDataType() === "number") {
                var v = control.getValue();
                if (v != null && v < 0)
                    return {
                        style: {
                            color: "red"
                        }
                    }
            }
        }
    }
});

This would display a negative number in a numeric text field in an interview like this:

A number field in an Intelligent Advisor interview that has been restyled using an interview extension

You could use the following interview extension to restyle a text field to have a pale red background color if the field is currently in error: 

OraclePolicyAutomation.AddExtension({
    style: {
        textInput: {
            errorStyle: {
                backgroundColor: "#fcc"
            }
        }
    }
});

This would display an error in a text field (for example, text entered for a number input) in an interview like this:

A number field in an Intelligent Advisor interview that has been restyled using an interview extension when there is an error

You could use the following interview extension to restyle a text field error: 

OraclePolicyAutomation.AddExtension({
    style: {
        textInput: {
            className: "my-text-input",
            errorClassName: "my-text-input-error"
        }
    }
});

with custom CSS:

.my-text-input {
     height: 30px;
     background-color: whitesmoke;
     border-style: solid;
     border-color: lightgray;
     border-width: 2px;
     border-radius: 4px;
     padding-left: 9px;
}

.my-text-input-error {
    background-color: #fcc;
    border: solid 1px #c99;
    border-width: 2px;
    font-weight: bold;
}

This would display an error in a text field (for example, text entered for a number input) in an interview like this:

A number field in an Intelligent Advisor interview that has been restyled using an interview extension with CSS when there is an error

You could use the following interview extension to restyle the calendar input symbol, the checkbox input symbol and the radio input symbols: 

OraclePolicyAutomation.AddExtension({
    style: {
        calendarInput: {
            iconColor: "Green"
        },
        checkboxInput: {
            fillColor: "DarkOrange"
        },
        radioInput: {
            fillColor: "CornflowerBlue",
            borderColor: "LightSteelBlue"
        }
    }
});

This would display the calendar symbol, checkbox selector and radio button circle and selector in an interview like this:

Input symbols in an Intelligent Advisor interview that has been restyled using an interview extension

You could use the following interview extension to restyle control errors: 

OraclePolicyAutomation.AddExtension({
    style: {
        controlError: {
            className: "my-control-error"
        },
        controlErrorText: {
            className: "my-control-error-text"
        }
    }
});

with custom CSS:

.my-control-error {
    padding-top: 1em;
    padding-bottom: 1em;
    margin-left: -10px;
}

.my-control-error-text {
    border: solid 1px #c99;
    padding: 0.5em;
    background-color: #fee;
}

This would display control errors in an interview like this:

A control error in an Intelligent Advisor interview that has been restyled using an interview extension

You could use the following interview extension to restyle multi-input date and time text inputs: 

OraclePolicyAutomation.AddExtension({
    style: {
        textInput: function(control) {
            if (control.getControlType() === "datetime-text-group") {
                return {
                    style: {
                        color: "darkgreen",
                        backgroundColor: "lightgrey",
                        cursor: "crosshair",
                        fontSize: "14px",
                        fontWeight: "bolder",
                        textDecoration: "underline"
                    }
                }
            }
        }
    }
});

This would display multi-input date and time text inputs in an interview like this:

A datetime input control in an Intelligent Advisor interview that has been restyled using an interview extension

You could use the following interview extension to restyle tabular entity controls (both entity collects and entity containers): 

OraclePolicyAutomation.AddExtension({
    style: {
        tabularContainer: {
            headerRow: {
                className: 'my-header'
            },
            headerCell: {
                className: 'my-header-cell'
            },
            cell: {
                className: 'my-cell'
            }
        }
    }
});

with custom CSS:

.my-header {
    border: solid 1px #6F757E;
}
 
 
.my-header-cell {
    padding: 0.2em 0.4em;
    background-color: #6F757E;
    color: white;
}
 
.my-cell {
    border: solid 1px #A36472;
    background-color: #A36472;
    padding: 0.2em 0.4em;
    color: white;
}

This would display tabular entity containers in an interview like this:

A tabular entity container in an Intelligent Advisor interview that has been restyled using an interview extension

You could use an interview extension to restyle tabular entity controls to use a CSS class on "important" rows. In this example, an important row in a tabular entity container changes color if the loan to value ratio attribute "LVR" is above a certain threshold (90).

Note that the tabular entity container would need to have two custom properties defined in Policy Modeling for this example interview extension to work (Key: type; Value: important-row, and Key: lvr-warn-threshold; Value: 90). This example uses the callback form of styling keys.

OraclePolicyAutomation.AddExtension({
    style: function(interview) {
        return {
            tabularContainer: function(control) {
                if (control.getProperty("type") == "important-row") {
                    const lvrWarnThreshold = parseFloat(control.getProperty("lvr-warn-threshold"));
                    return {
                        "row": {
                            className: function(context) {
                                return interview.getValue("LVR", context.entity, context.instance) > lvrWarnThreshold  ? "my-table-row-important" : "my-table-row"
                            }
                        }
                    }
                }
            }
        }
    }
});

with custom CSS:

.my-table-row {
    background-color: LightBlue;
}

.my-table-row-important {
    background-color: DarkOrange;
}

.my-table-row td , .my-table-row-important td {
    padding: 0.5em;
}

This would display tabular entity containers in an interview with a dark orange background when a row has an LVR that is greater than 90, and a light blue background when the LVR is 90 or less:

A tabular entity container in an Intelligent Advisor interview that has been restyled using an interview extension to change the row color when the LVR is greater than 90

You could use the following interview extension to restyle tabular entity collects to hide the remove button on rows where the "complete" attribute is true. Note that the tabular entity container would need to have a custom property defined in Policy Modeling (Key: type; Value: complete-row) for this interview extension to work.

OraclePolicyAutomation.AddExtension({
    style: function(interview) {
        return {
            tabularContainer: function(control) {
                if (control.getProperty("type") == "complete-row") {
                    return {
                        hideRemove: function(context) {
                            return interview.getValue("complete", context.entity, context.instance);
                        }
                    }
                }
            }
        }
    }
});

This would display tabular entity collects in an interview with the remove button hidden when the "complete" attribute is true (and shown when the "complete" attribute is false):

A tabular entity collect in an Intelligent Advisor interview that has been restyled using an interview extension to hide the remove button when the inspection is complete

You could use the following interview extension to restyle tabular entity controls so that the add button is hidden when the entity collect has at least four rows. Note that the entity collect would need to have a custom property defined in Policy Modeling (Key: type; Value: restrict-add) for this interview extension to work.

OraclePolicyAutomation.AddExtension({
    style: function(interview) {
        return {
            tabularContainer: function(control) {
                if (control.getProperty("type") == "restrict-add") {
                    return {
                        hideAdd: function(context) {
                            return control.getRows().length >= 4
                        }
                    }
                }
            }
        }
    }
});

This would display tabular entity collects in an interview like this (without an add button) when four (or more) instances have been added:

A tabular entity collect in an Intelligent Advisor interview that has been restyled using an interview extension to hide the add button when four instances have been added

You could use the following interview extension to restyle question text so the text is red if the field is in an error, and green if the field has been answered: 

OraclePolicyAutomation.AddExtension({
    style: {
        question: function(control, interview) {
            if (control.hasError())
                return {
                    style: {
                        color: "IndianRed"
                    }
                }
            if (!control.needsAnswer())
                return {
                    style: {
                        color: "SeaGreen"
                    }
                }
        }
    }
});

This would display questions in an interview like this:

Question text in an Intelligent Advisor interview that has been restyled using an interview extension

You could use the following interview extension to restyle containers so that:

  • the container is bordered in green and shows a green tick when all the fields have been answered, and

  • the container is bordered in red and shows a red cross when a field in the container is in error.

Note that the container would need to have a custom property defined in Policy Modeling (Key: type; Value: complete) for this interview extension to work.

OraclePolicyAutomation.AddExtension({
    style: {
        container: function(control, interview) {
            if (control.getProperty("type") != "complete")
                return;
            let complete = " my-container-complete";
            let controls = control.getControls();
            for (let idx = 0; idx < controls.length; idx++) {
                let sub = controls[idx];
                if (sub.hasError()) {
                    complete = " my-container-error";
                    break;
                }
                if (sub.needsAnswer())
                    complete = "";
            }

            return {
                className:  "my-container" + complete
            }
        }
    }
});

with custom CSS:

.my-container {
    border: solid 4px transparent;
    padding: 1em;
    position: relative;
    margin: 0.5em 0;
}

.my-container-complete {
    border: solid 4px green;
}

.my-container-complete::before {
    content: "\002713";
    display: block;
    position: absolute;
    right: 4px;
    top: 0;
    color: green;
    font-weight: bold; 
    font-size: 32px;
}

.my-container-error {
    border: solid 4px red;
}

.my-container-error::before {
    content: "\002715";
    display: block;
    position: absolute;
    right: 4px;
    top: 0;
    color: red;
    font-weight: bold; 
    font-size: 32px;
}

This would display in an interview like this:

Containers in an Intelligent Advisor interview that have been restyled using an interview extension

You could use the following interview extension to restyle a container so that a container control with a custom property of "type" == "composite" would get the aria role of group, as well as the aria-labelledby attribute that would reference the id of the label control inside the container that had been marked with "type" == "legend".

OraclePolicyAutomation.AddExtension({
    style: {
        container: function(control, interview) {
            const legend = control.getControls().find(function(ctl) { return ctl.getProperty("type") == "legend"});
 
            if (control.getProperty("type") == "composite") {
                return {
                    "role": "group",
                    "aria-labelledby": legend.id
                }
            }
        },
        label: function(control, interview) {
            if (control.getProperty("type") == "legend") {
                return {
                    id: control.id
                }
            }
        }
    }
});

You could use the following interview extension to restyle text input controls so that they are not auto filled with stored browser data.

OraclePolicyAutomation.AddExtension({
    style: {
        textInput: function(control) {
            return {
                autocomplete: "off"
            }
        }
    }
});

Note: It is up to the browser as to whether it honors the autocomplete attribute.

Tip: If you want specific text inputs to still autocomplete, this extension could be extended to use a custom property on those particular text inputs.

You could use an interview extension to restyle label controls to use a CSS class. This allows you to apply different CSS classes to different controls of the same type, in this case labels. In this example, two custom labels are defined, one for headings (displayed in dark green bold font) and one for alert text (displayed with a grey background).

Note that each label that you want to restyle would need to have a custom property defined in Policy Modeling for this example interview extension to work. For instance, to restyle a label to use the my-heading-label-style defined in your CSS, you would have a custom property on the label with Key: customLabelStyle and Value: my-heading-label-style. Similarly, to restyle a label to use the my-alert-label-style defined in your CSS, you would have a custom property on the label with Key: customLabelStyle and Value: my-alert-label-style.

OraclePolicyAutomation.AddExtension({
    style: {
        label: function(control) {
            if(typeof control.getProperty("customLabelStyle") === "string"){
                return {
                    className:  control.getProperty("customLabelStyle")
                }
            }
        }
    }
});

with custom CSS:

.my-heading-label-style {
    font-size: 20px;
    font-weight: bold;
    margin-top: 10px;
    color: darkolivegreen;
}

.my-alert-label-style {
    background: #f3f3f3;
    margin-top: 16px;
    margin-bottom: 16px;
    padding-top: 10px;
    padding-bottom: 10px;
}

This would display labels in an interview like this:

Labels in an Intelligent Advisor interview that have been restyled using an interview extension

Related Topics