Environment:
Agent Browser UI(BUI)
Resolution:
The following best practices for Agent Browser UI (BUI) extension building can be a helpful addition in the information provided from the documentation.
Import script headers are not time resilient and may not load the requested libraries as expected. Thus, should your extension rely on correct timing for script loads, you will need to modify your approach.
< script src="javascript.js"></script>"
BUI extensions work best when built in the module functionality from es6; This import function can be used to import many different scripts in several ways.
<script type="module>
alert("In script 1");
function function_1 () {
"use strict";
alert("In function_1");
}
</script>"
The Mozilla documentation is helpful in further understanding the import syntax. [here]
The header approach shown below can also be used tin module functionality.
<script type="module">
alert("In script 1");
function function_1 () {
"use strict";
alert("In function_1");
}
</script>
Community: B2C Service Customisations CI/CD Process
Linting your JavaScript code saves time; this is a common coding practice that helps greatly in resolving many simple errors with your JavaScript implementation.
- Visual Studio linting how to = Linting JavaScript in Visual Studio
THE BUI approach to this issue would be to place any JavaScript that can be modularized into libraries. This is also an effective approach when these libraries need to be loaded before the main script can be run. Centralizing duplicated functions and methods will also cut down on load time; as well as minimize code maintenance.
Working with Library Extensions in BUI Extensibility Framework
OSvC BUI Extension - How to create a library extension
Analytics extensions can be built to run in reports; report extensions are only accessible in BUI. The external data from the analytics external can be imported and shown only in a BUI report.
How can I create an Analytics BUI Extension for External Data?
When creating this report information; the data itself can be manipulated with the function addTableDataRequestListener. This link here is excellent for setting up this request listener as well as some common issues with it.
Common issues with addTableDataRequestListener call back function
Use of fetch in a BUI extension is suggested over ajax as this fetch functionality is asynchronous, handling browser promises. This can be found here for fetch promise handling.
ROQL in Browser Agent UI extension workspace
Dom manipulation is only effective inside the extension itself, manipulation outside the extension will likely fail on BUI updates. This is from the weekly BUI update rebuilding the DOM; Since the DOM elements will not be retained; DOM manipulation on this level will likely fail.
Browser User Interface Updates
Invalid DOM handlers are listed here for BUI workspace manipulation; they can manipulate elements in the extension itself.
$document
$jQuery
$window.parent
Further information for DOM handling can be found in the answer here.
BUI extension is failing to work after update
BUI itself will not normally load in an IFrame; instead modify the Custom Configuration CUSTOM_CFG_BUI_IFRAME_DOMAIN_LIST to allow BUI to load itself into your website.
Agent Browser UI won't load when embedded in an iFrame
Building extensions that interact with rules have multiple steps that need to be adhered to. Make sure your extension first registers the action to the rules as shown here.
Agent Browser UI Extensibility Framework Developer Guide - registerAction
When working with global rules, the code snippet here is helpful.
<script>
ORACLE_SERVICE_CLOUD.extension_loader.load("Global Extension", "1")
.then(function(extensionProvider)
{
extensionProvider.getGlobalContext().then(function(globalContext) {
globalContext.registerAction('actionName', function(param) {
// Perform some logic on param.
});
});
});
</script>
Workspace rules use a similar construction and will need to have the addNamedEventListener from the workspace record used. The workspace rules can then be triggered on the workspace when attached to this event.
addNamedEventListener(eventName,callbackFunctionReference) returns IWorkspaceRecord;
like this:
workspaceRecord.addNamedEventListener('myTrigger', customImplementation);
Make sure you remember to trigger the named event listener.
triggerNamedEvent(eventName);
Rules are not loaded until the completion of the workspace itself, this happens after the BUI extensions have completely loaded into the workspace.
Named Event not working in Workspace Rules when using BUI
This works in accordance with the Documentation here.
Invoking Global Actions from Workspace Rules
To trigger events inside your extension; the standard JavaScript event handlers will work without issue.
$('#myTable').addEventListener("click", displayDate);
Since understanding the process an extension takes in its designated request. Debugging in the Extension is best done with console logs.
console.log(data)
To debug the extension objects given from BUI; table works best.
console.table(data [, columns]);
When a BUI extension does not match the expected size of the area given, you can use the xtensionResizeHandler to manage this issue.
ORACLE_SERVICE_CLOUD.extensionResizeHandler.resize not resizing
Make sure there is only one site version of the BUI extension loader in your AgentWeb in a single instance. This spans all BUI extensions and should only have a single active version combined. As such it should be a script placed in your INIT file like so. Make sure the Site name matches the site the BUI extension is running on.
<script src="https://{Your Site Name}/AgentWeb/module/extensibility/js/client/core/extension_loader.js??"></script>
Should you need further assistance with engineering BUI extensions; the following documentation is available.
BUI Extensions Best Practices and Troubleshooting
The community also has multiple answers that are very helpful, such as this one here.
Optimize your Agent Browser User Interface Add-Ins/Extensions
Along with an analytics extension community answer here.
External Data Reports with Browser UI - Analytics Cookbook Recipe
