Virtual Agent Topic Block: Date Picker

Hi there,

With the Orlando release, ServiceNow introduced reusable Topic Blocks for Virtual Agent. Reusable components, which you could compare with Subflows or Actions. A really nice feature that helps build Topics smarter, faster, more consistent, and manageable. Also less scripting knowledge is needed when working in Topics, because this logic has been set up in the Topic Block.

In a few short articles, I'll share some of the reusable Topic Blocks I've set up. These Topic Blocks can also be downloaded from Share.

Topic Blocks

A short recap:

Pre-Orlando
Basically pre-Orlando if we would have a repetitive group of steps for multiple Topics or even within a Topic, we simply had to duplicate them/build them over and over. There was no possibility to set up something like a Subflow. Well, maybe a small workaround would be doable for some situations, using vaSystem.switchTopic() or vaSystem.topicDiscovery().

Orlando
With the Orlando reusable a repetitive group of steps for multiple Topics or even within a Topic, can be placed within a "topic blocks". The short explanation of Topic Blocks according to the Docs site:

"A Topic block is basically a Subflow that performs certain actions or conversational tasks in a Topic."

Date Picker

When creating Virtual Agent Topics, at some point I noticed that I was creating Date Picker functionality again. Well that doesn't sound that strange, right? Well actually it's not just about the User Input Date Time, it's also about comparing two User Inputs Date Time, and it also involved validating if the Date Time is in the past. That all together is a subflow on its own, about 10 steps. So… let's turn this into a Topic block, to be able to re-use this, shorten development time, and increase maintainability!

In short what my design contains:
- User Input Date Picker "Select Date"
- Validation "Select Date" needs to today or in the future (or some other operator)
- "Retry" Bot Response Text in case of an invalid "Select Date"
- User Input Date Picker "Compare Date"
- Validation "Compare Date" needs to be the same as "Select Date" or in the future (or some other operator)
- "Retry" Bot Response Text in case of an invalid "Compare Date"

+

Adding parameters for more dynamic, useable situations:
- An input for "Select Date" operator and optionally "Compare Date" operator, to be able to choose greater than, less than, etc.
- An input for a message for the "Select Date" and optionally "Compare Date"
- An input for the field name prompted when comparing "Select Date" and "Compare Date"

Design

This would lead to the following design:

Inputs

A few basic inputs as mentioned above. Unfortunately these are just string type inputs, Flow Designer does not (yet) have an option to create inputs as choices for example.

Outputs

The "Select Date" User Input and "Compare Date" User Input would be set as output, so these are available for the parent Topic. Both simply containing the validated value for the User Inputs.

Script Action "Validate * Date"

Both Script Actions for Validating the Date User Inputs contain a bit of scripting. It's not rocket science as you can see below (in this case the script for "Validate Select Date"). The script uses the Topic Block input for the operation. Like I mentioned, unfortunately, this is a string type input. In theory, a wrong value could be entered as Topic Block input. Hopefully in a future release User Inputs will be improved on this point. I'm assuming one would enter ">", ">=", "<", or "<=".

(function execute() {

    var error_message = '';
    var answer = false;

    if(vaInputs.select_operation != '') {
        var gdt = new GlideDateTime();

        switch(vaInputs.select_operation.getValue()) {
            case '>':
                error_message = gs.getMessage('Please select a future date.');
                if(vaInputs.select_date > gdt) {
                    answer = true;
                }
                break;
            case '>=':
                error_message = gs.getMessage('Please select today\'s date or a future date.');
                if(vaInputs.select_date >= gdt) {
                    answer = true;
                }
                break;
            case '<':
                error_message = gs.getMessage('Please select a past date.');
                if(vaInputs.select_date < gdt) {
                    answer = true;
                }
                break;
            case '<=':
                error_message = gs.getMessage('Please select today\'s date or a past date.');
                if(vaInputs.select_date <= gdt) {
                    answer = true;
                }
                break;
        }
    } else {
        answer = true;
    }

    vaVars.error_message = error_message;
    vaVars.select_valid = answer;

})()

Transitions "Valid" / "Invalid"

The transitions for "Valid" / "Invalid" simply are checking "vaVars.select_valid" which is set by the Script Action "Validate * Date". For "Valid" the script would be:

(function execute() {

    var answer = false;
    if(vaVars.select_valid == true) {
        answer = true;
    }

    return answer;

})()

Or:

(function execute() {

    return vaVars.select_valid;

})()

Result

This Topic Block leads to what we are really after… a drag and drop component which can easily be added to a Topic, which helps building Topic faster, smarter, more consistent, and manageable!

Share

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

---

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
2020-2021 ServiceNow Community MVP
2020-2021 ServiceNow Developer MVP

---

LinkedIn