Code Extension

Note: This feature is available in DRUID version 5.1 and higher.

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 CodeExtension 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.