In a recent article, we discussed using the REST API of an external application (in this case, Oracle B2C Service) to retrieve information to display in a Custom Options Extension. As regular readers will know, one of the weaknesses of the Custom Options Extension is the lack of support for some important object keys – specifically the update and validate come to mind.
So there is an alternative to the previous post which would be to create a dropdown list that looks and feels like a Custom Options but that is actually a Custom Input – which means we can use all the different keys like validate and so forth.
The Custom Input Extension would require you to do a bit more work on the visual styling, since the default THML <SELECT> looks nothing like the standard Oracle Intelligent Advisor one, but the result might be worth that effort. It is especially true if you are using an asynchronous call so you can set all that up nice and easily in the mount object key.
/* Generated by the intelligent-advisor.com Website Code Generator 30/09/2022 15:07
Boilerplate Code of Custom Input Extension for Intelligent Advisor fka Policy Automation
I will remember this is for demonstration purposes only.
*/
OraclePolicyAutomation.AddExtension({
customInput: function (control, interview) {
if (control.getProperty("name") == "xOptionsParent") {
return {
mount: function (el) {
console.log("Starting name:xInput customInput Mount");
var div = document.createElement("select");
div.id = "xInput";
div.style.width = "50px";
div.style = "outline: rgb(114, 119, 128) solid 1px; outline-offset: 0px;border: 0px;padding: 0.4em 2em 0.4em 0.8em;box-sizing: border-box;width: 100%;font-family: inherit;font-size: inherit;font-weight: inherit;font-style: inherit;color: rgb(114, 119, 128); display: block;"
div.value = control.getValue();
el.appendChild(div);
myProducts(interview, control, div.id)
console.log("Ending name:xInput customInput Mount");
},
update: function (el) {
console.log("Starting name:xInput customInput Update");
console.log("Ending name:xInput customInput Update");
},
validate: function (el) {
console.log("Starting name:xInput customInput Validate");
control.setValue(document.getElementById("xInput").value);
return true;
console.log("Ending name:xInput customInput Validate");
},
unmount: function (el) {
if (control.getProperty("name") == "xInput") {
console.log("Starting name:xInput customInput UnMount");
var xInput = document.getElementById("xInput");
xInput.parentNode.removeChild(xInput);
console.log("Ending name:xInput customInput UnMount");
}
}
}
}
}
})
function myProducts(interview, control, id) {
var myDOMElement = document.getElementById(id);
var headers = {
"OSvC-CREST-Application-Context": "GetProducts",
"Content-Type": "application/json"
}
var myProducts = [];
var opts = {
connectionName: "YOURCONNECTION",
relativeUri: "/serviceProducts/?q=parent%20is%20null",
method: "GET",
headers: headers
}
try {
interview.fetch(opts)
.then(function (response) {
let promise = response.json().then(function (json) {
for (i = 0; i < json.items.length; i++) {
myProductInstance = new Object();
productName = json.items[i].lookupName;
id = json.items[i].id;
textforOption = productName;
valueforOption = id;
var option = document.createElement("option");
option.value = valueforOption.toString();
option.text = textforOption.toString();
myDOMElement.appendChild(option);
}
return myProducts;
});
});
} catch (e) {
console.log(e.message);
}
finally {
return myProducts;
}
}
So in the above case, the Custom Input looks like this:
Note that I’m cheating a bit here because I’m not really managing the promise properly, and just sort of hoping that everything is ready by the time the screen displays. That’s not the subject of the demonstration however. It looks and feels like an Options but it is an Input. Cool.
We will return to a related subject in a few days to continue the discussion about loading options using REST API examples.
For the documentation about Control Extensions, it’s here.