Code Extension

Sometimes the conversational flow steps behavior needs to align to more complex business rules that cannot be implemented at design time using the graphical Flow Designer. For example, a hero step should present different buttons with options for each specific user role and conditions. It is very difficult to address dozens of combinations by using the Flow Designer.

Code Extension is a powerful feature that enables you to make hard-coded adjustments to flow steps definition.

IMPORTANT! When hard-coding flow steps using Code Extension, you should respect the step definition from the Flow Designer and only make small adjustments. DO NOT use Code Extension to completely change the flow steps behavior; otherwise, the bot diagram will no longer provide you with accurate information and you might get confused when analyzing the Conversation History and performing further debugging.

To hard-code a flow step, on the desired flow step, click the Code Extension section header, then click the Edit icon displayed next to the desired language (if there are bot additional languages set on the bot). The Code Extension editor appears.

The Code Extension provides you with a set of predefined code templates to help you define your JavaScript code.

To add a template, click the Add default template button ( ) and select the template that best suits your needs.

NOTE: In the Code Extension editor, entities and entity collections are referenced by name; therefore, if you want to use the Entity explorer when creating an entity or entity collection, make sure that you remove the brackets “[[ ]]”.
IMPORTANT! In the Code Extension editor, always append thisStepValidator.Validate(thisStep); at the end of your code. This ensures that the flow step code is validated before execution, helping to prevent errors and ensure smooth functionality.

Use cases for Flow step code extensions

Conditional menus

Copy

Example: Show a different menu for Authenticated users

( 
          function () 
          { 

              thisStep.Message = 'This message replaces this: ' + thisStep.Message; 

              //Clear all cards and build new ones. 
              //It is a good practice to author with the designer all the options, and customize with code specific rules.

              thisStep.Metadata.PostActions?.Clear(); 

              //use create* methods to create various objects. 

              if ([[ChatUser]].IsAuthenticated) 
               { 
                //create first card with two buttons

                    thisStep.Metadata.Hero.Cards.Add (thisStep.CreateHeroCard()); 
                    thisStep.Metadata.Hero.Cards[0].Title = "Title 1"; 
                    thisStep.Metadata.Hero.Cards[0].Subtitle = "Sub title 1"; 
                    thisStep.Metadata.Hero.Cards[0].Text = "Decsription 1"; 

                    //need to create the collection first

                    thisStep.Metadata.Hero.Cards[0].Buttons = thisStep.CreateCardActionList(); 
                    thisStep.Metadata.Hero.Cards[0].Buttons.Add(thisStep.CreateCardAction()); 
                    thisStep.Metadata.Hero.Cards[0].Buttons[0].Title = "Option 1"; 
                    thisStep.Metadata.Hero.Cards[0].Buttons[0].Value = "Value 1"; 
                    thisStep.Metadata.Hero.Cards[0].Buttons.Add(thisStep.CreateCardAction()); 
                    thisStep.Metadata.Hero.Cards[0].Buttons[1].Title = "Option 2"; 
                    thisStep.Metadata.Hero.Cards[0].Buttons[1].Value = "Value 2";              
              } 
          
              // this is mandatory at the end 

              thisStepValidator.Validate(thisStep); 
          } 
)(); 

The figure below shows a hero step definition in Flow Designer using the code extension above.

Conditional messages

Copy
Example: Show Alert and smiling emoji or Info and sad emoji in the Account info message based on the number of cases
( 
          function () 
          { 
            if ([[Account]].CasesCount >0) 
            { 
                thisStep.Message = 'Alert! :('/*sad emoticon*/+ thisStep.Message; 
                } 
                else 
                { 
                    thisStep.Message = 'Info :)'/*smile emoticon*/+ thisStep.Message;
                }; 
         
             thisStepValidator.Validate(thisStep); 
          } 
)();

The figure below shows a message step definition in Flow Designer using the code extension above.

Data Manipulation

The Set object allows you to store unique values of any type. You can use it to deduplicate data retrieved during a flow or to quickly check if a specific value exists within a large list. This ensures that the data being passed back to the AI Agent is clean and free of redundant entries.

NOTE: The Set() object is available in Druid 9.17 and higher.

Syntax

new Set([iterable]);

Example

This example demonstrates using a Set object to filter out duplicate product IDs collected during a conversation before saving them to a Flow Variable.

Copy

Example

(function main() {
    // Simulated list of IDs collected from user input or an API
    const rawProductIds = ["P100", "P200", "P100", "P300", "P200"];
    
    // Create a Set object to automatically remove duplicates
    const uniqueIdsSet = new Set(rawProductIds);
    
    // Convert back to an array for compatibility with Flow Variables
    const finalProductList = Array.from(uniqueIdsSet);
    
    // Save the cleaned list to the bot flow context
    Context.SetFlowVariable("UniqueProductList", finalProductList.join(", "));
    
    // Log the result for debugging in the Audit Log
    Context.LogRequestTask("Deduplicated product list created:" + uniqueIdsSet.size + " items.");
})();