Uniphore Customer Portal

The following sections provide various tips and recommendations for Extension programming.

Assigning Appropriate Reference Names

When a Flow is built in the X-Designer, a unique reference name is assigned to each Flow element. These reference names are carried to the generated pages and assigned to the respective DOM elements.

In the X-Designer, it is possible to assign reference names that are not compatible with the syntax and conventions of HTML identifiers (e.g., reference names may include spaces). To facilitate the use of Extensions, it is recommended to use reference names that comply with HTML conventions. This includes replacing spaces with hyphens, and making the entire reference name lower case.

For example, the reference name of Active Switch would be changed to active-switch. active-switch would then appear in the DOM as the data-refname attribute. When programming Extensions, you would then be able to select this specific element using jQuery with this selector statement:

$(“[data-refname=‘active-switch’]”)

If you want to access the property before the DOM element is created, the reference name can be found as part of the contentSections object. The property is contained in the response of the navigation request from the server for Question elements:

interaction.page.pagecontent.contentSections[i].referenceName

The following example shows how to check for the referenceName of the first (Question) element as part of your Extension:

app.registerExtension("contentSectionsRenderer", function(ctx, element) { 
var refName = ctx.contentSections[0].referenceName; 
});

Loading JS and CSS Files Dynamically

If you need JS or CSS files from a external source (e.g., a CDN), instead of copying the files locally, you can load them dynamically using the HeadJS library used in the code. To load one or more files dynamically, call them with the following code:

// Load up some JS
head.load([“jQuery.js”,”bootstrap.js”], function() {
 // Call a function when done
 console.log("Done loading jQuery and bootstrap");
});
// Load up some CSS
head.load("bootstrap.css");

Debugging Extensions

When developing Extensions, it is recommended to use browser tools for debugging both the code and the elements and styling of a page. These 'developer tools' are a standard feature of modern browsers.

In the following example, you can see the postal code field with the respective elements in the browser’s inspection view. Note that the reference name is translated to the data-refname attribute assigned to the text input element with the <input> field inside it. This view can help you form your jQuery selector expression.

Debugging an Extension's Code

To debug JavaScript, you need to locate the Extension’s code under the interact/resources/extensions URL. Below the ID and the timestamp of the code, you will find a JS file with the same name as the Extension name assigned in the X-Console. Caching is not an issue, since each time you change the Extension’s code, a new timestamp is generated. Therefore, caching is not used.