Virtual Agent Topic Block: Carousel Pagination

Articles, Blogs, Videos, Podcasts, Share projects - Experiences from the field

Hi there,

The Virtual Agent User Input "Carousel" offers you to display one or multiple images. Unfortunately, if the maximum is touched (defined in System Property "glide.sc.conversational.request.question.limit"): the logged-in user will not be presented with a "More" option on the Carousel, an option that has been added to the Reference Choice. Therefore I tend to set the System Property to a high value that won't be reached. Though, presenting users with for example 20 or 30 options on the Carousel is far too much from a user experience point of view...

So let's set up our own Pagination! Pagination offers the users (if applicable) a "More" and/or "Previous" option.

This will help to have a more consistent feel on your topics, save building time, increases maintainability!

Carousel pagination

The diagram which jumps in mind for having a "More" and "Previous" option would look like this:

Obviously the "Next" and "Previous" transitions, though also one for if the logged-in user made a choice, or used the "Skip" option (introduced with Paris). Let's immediately make the "Skip" option, optional. Adding an Input Parameter and using the below script on the Node Condition "Allow user to skip this node if:"

(function execute() {

    var answer = false;
    if(vaInputs.skippable.getValue() == 'True' || vaInputs.skippable.getValue() == 'true') {
        answer = true;
    }

    return answer;

})()

Next would be adding two custom images, for the "Next" and "Previous" options. These can simply be added to the Image table:

These images would be added to the User Input Carousel, if the number of items is higher than the limit defined, or if the logged-in user selected the more option. I won't go into the full details on the scripting (just download the Share item for that), though concerning adding the "More" or "Previous" option:

options.push(
    {
        'Name' : gs.getMessage('Show previous'),
        'Value' : 'previous',
        'Body' : baseURL + 'va-carousel-previous.jpg'
    }
);

So how is the limit set, for how many Carousel items are shown? My idea is to make such as maintainable as possible, using a System Property for this. You could also add that System Property to a System Property Page so it would be easier to find. For the limit (used by this Topic Block, though also the "Reference Choice Topic Block"), I've set up below System Property:

The most tricky part which we can't easily make more low-code / no-code: providing the actual inputs for the Carousel. Which items should be shown. The basic code would look like this:

(function execute() {

    var options = [];
    options.push({'sys_id' : '039c516237b1300054b6a3549dbe5dfc', 'title' : 'Access', 'image' : '52db92bfcb311200f2de77a4634c9cd6.iix' });
    options.push({'sys_id' : '0c61f0c510247200964f77ffeec6c499', 'title' : 'Samsung Galaxy S7 Edge', 'image' : 'b66238c510247200964f77ffeec6c407.iix' });

    return JSON.stringify(options);

})()

sys_id being the item you want to be opened. You can use this in your follow-up steps in your workflow. Could be a sys_id of Catalog Item, Knowledge Article, whatever you are using this Carousel for. title the text shown below the Carousel image. image is a bit more tricky, an example:

"https://your-instance.service-now.com/5fdd0796db672b04ceed9ce8db9619c9.iix". The example shown, is an image that is stored in the Attachment table,

This might still look a bit cryptic. Though it would be nice if you could query such input. For example if you are searching for Catalog Items, using the contextual search. The contextual search can then provide you with the sys_id, title, and image link, so you can actually make the script above dynamic! Having a for loop for example which actually generates the options, and pushes the sys_id, title, and image.

Result

The ultimate result would be a Carousel displayed, including the "More" and "Previous" options. Also having the "Skip" option optional.

Share

An Update Set with this Topic Block can be downloaded from Share:
- Virtual Agent Topic Block: Carousel Pagination

---

And that's it actually. Hope you like it. If any questions, remarks, or other ideas for Topic Blocks, let me know!

Kind regards,

Mark Roethof

ServiceNow Technical Platform Architect @ Quint Technology

2x ServiceNow Developer MVP

2x ServiceNow Community MVP

---

LinkedIn