Once again we are grateful to the community that reads this site because reader Annie Fisher from Australia has been kind enough to share with us an example of a Custom Input Extension. Hers is an interesting scenario. You probably already know that in Oracle Intelligent Advisor, we have two separate parts to every Interview control. We have the question text, and the control itself. Take for example this input control added to a standard Screen:
In the example “What is your favourite colour” is the question text and the radio buttons underneath represent the actual control – from the perspective of the user, the thing that they need to interact with. Depending on whether you need to style the question text, or the control, or both, you have plenty of options.
The question text can have formatting applied – either through the Styles dialog and setting the style for all question text:
Or by adding simple tags to the content to produce the desired effect:
Of course, further customization could be obtained by using a Styling Extension.
So far so good. But what about applying styling to the actual values displayed in the radio button options. For example if the radio buttons are drawing values from a Value List, what if you need the values to exhibit some formatting – for example you want to put the first word in BOLD?
So you try all you can think of :
Adding the HTML it to the Value List Display Value (that just displays the tags)
Using substitution (that just displays the tags)
So you think about a Custom Input Extension, or maybe a Full Custom Input Extension (the second being the extension which allows us to modify both the question text display and the control display). And you set to work. It all seems to go very well until you realise that the typical HTML tag that gets used for the display of the text items (the label element) isn’t styleable at all. So you need to break it into two potential parts – span for those bits that you want to style and label for the bits you don’t need to style.
Bingo! In Annies fantastic example, documented as you can see, she uses a marker “**” to indicate the elements that need styling. A good job and nicely commented.
/* Generated by the intelligent-advisor.com Website Code Generator 27/09/2022 07:36
Boilerplate Code of Custom Input Extension for Intelligent Advisor
I will remember this is for demonstration purposes only.
*/
OraclePolicyAutomation.AddExtension({
customInput: function (control, interview) {
if (control.getProperty("name") == "xStyleRadioAnswers") {
return {
mount: function (el) {
//Get the answers available for this radio button question
var availOptions = control.getOptions();
//For each of these, write out a radio button with specific styling elements
//Each answer has an input, label and span elements
for(var i = 0; i<availOptions.length; i++)
{
var answerElements = writeRadioButtonElementValue(availOptions[i]);
var radioAnswer = answerElements[0]; //The actual radio button will always be the first element
//Add an event listener to update the interview value
radioAnswer.addEventListener('change', function (e) {
if(this.checked) {
interview.setInputValue("selected_color", this.value);
}
});
//Append all the answer elements to the DOM
el.appendChild(radioAnswer);
el.appendChild(answerElements[1]);
el.appendChild(answerElements[2]);
el.appendChild(answerElements[3]);
}
//Finally, if the color was previously selected we need to check it if the user is coming back to this screen
if(interview.getValue("selected_color") != null) {
var previouslySelectedValue = interview.getValue("selected_color")
//Set the radio button checked value
var buttonList = document.getElementById("radio" + previouslySelectedValue);
if(buttonList != null) {
buttonList.checked = true;
}
}
},
validate: function (el) {
return true;
}
}
}
}
})
function writeRadioButtonElementValue(radioValue) {
//Provided to this function is the radioValue object which has both the value and text properties, defined in Policy Modeling Value List
//The value property is the actual value which will be submitted with the interview
//The text property is for display only. Further, the requirement is that the beginning of the sentence be bolded. To do this I have used a ** convention to denote everything before should be bolded
//The html label element does not allow inline styling, so for each input radio element there needs to be a label for it which will be the plain text portion, and a span element which will be the styled portion.
//Thus the text
// "Yellow**A wonderful bright cheerful color"
//Becomes
//<input type="radio" value="yellow" id="radioYellow" name="rbColors"/>
//<span><b>Yellow</b></span>
//<label labelFor="radioYellow">A wonderful bright cheerful color</label>
var rdoOptionValue = radioValue.value;
var rdoOptionText = radioValue.text;
//Create the radio button, it will have the same name for each answer value to ensure it operates as group
var radio1 = document.createElement("input");
radio1.type = "radio";
radio1.id = "radio" + rdoOptionValue;
radio1.value = rdoOptionValue;
radio1.name = "rbColors";
//Create the labelfor element for the unstyled part of the answer text
var labelforradio= document.createElement("label");
labelforradio.htmlFor = "radio" + rdoOptionValue;
//Create the span element for the styled part of the answer text (which may not be used if no styling is required for that answer)
var answerStyled = document.createElement("span");
//Look for the delimiter in the value list to figure out which parts are styled and unstyled. Styled will always be the first element in the array (anything to the left of the ** delimiter)
var textValues = rdoOptionText.split("**");
if(textValues.length >1) //Make sure the delimiter was used
{
//Create a span for the styled part of the answer text
answerStyled.innerHTML = "<b>" + textValues[0] + "</b>";
//Create the text element for the radio label
var answerUnStyled = document.createTextNode(textValues[1]);
} else
{
//Delimiter wasn't used, therefore styling is not required, so use the whole value as the answer text
var answerUnStyled = document.createTextNode(rdoOptionText);
}
labelforradio.appendChild(answerUnStyled);
radio1.appendChild(labelforradio);
//Line break between answers
var newline = document.createElement('br');
var allTheElements = [radio1, answerStyled, labelforradio, newline];
return allTheElements;
}
A great example from a true Oracle Intelligent Advisor supporter. The Zip Archive is available for free in the Onine Shop. Thanks Annie!