There may be times where input controls on the run dialog for a bot should show or hide dynamically (typically based on the value of another input control). While this isn’t possible directly through the bot’s configuration it is possible through JavaScript bound to one or more parameter controls of the run dialog.

Sample bot params

Let’s assume we have a bot with parameters

param(
    [string]$Name,
    [rbsingleselect]$WorkerType, #possible values E or C
    [string]$EmployeeNumber,
    [string]$CompanyName,
    [rbyesno]$IsActive,
    [int]$Salary
)

Control that will cause others to show/hide

The value for $WorkerType can be ‘E' for Employee or 'C’ for Contractor.

Steps to setup dynamic controls

To make controls dynamic there are three general things to do:

Create a function to simplify the showing/hiding of controls.
Add JavaScript to set up the initial state (visible or hidden) of the run dialog controls that will be dynamically shown/hidden.
Set criteria on various controls to show/hide other controls.

Helper show/hide function

To simplify the showing/hiding of fields, utilize a helper function which we will add to the various controls.

function inputVisibility(inputId,isVisible){
  //set the visibility of a run dialog control
  if(document.querySelector('#'+inputId) !== null){
    document.querySelector('#'+inputId).parentNode.parentNode.parentNode.hidden = !isVisible;
    //document.querySelector('#'+inputId).parentNode.parentNode.parentNode.previousSibling.hidden=!isVisible;
    if(document.querySelector('#'+inputId).type=='radio'){
      document.querySelector('#lbl'+inputId.substring(2)).parentNode.hidden=!isVisible;
    }else{
      document.querySelector('#lbl'+inputId).parentNode.hidden=!isVisible;
    }
  }
}

Dialog Controls - Initial State

To set the run dialog controls' initial visible/hidden state we will add JavaScript to the first control’s On Load event handler.

Click the Script tool on the Name parameter, select the OnLoad event.

Add the inputVisibility function JavaScript as well as lines to set the initial visible/hidden state for any controls that will be dynamically shown/hidden.

In this example those are the EmployeeNumber and CompanyName input controls.

The name of the run dialog input control is the same as the parameter name on the bot and is case sensitive.

function inputVisibility(inputId,isVisible){
  //set the visibility of a run dialog control
  if(document.querySelector('#'+inputId) !== null){
    document.querySelector('#'+inputId).parentNode.parentNode.parentNode.hidden = !isVisible;
    //document.querySelector('#'+inputId).parentNode.parentNode.parentNode.previousSibling.hidden=!isVisible;
    if(document.querySelector('#'+inputId).type=='radio'){
      document.querySelector('#lbl'+inputId.substring(2)).parentNode.hidden=!isVisible;
    }else{
      document.querySelector('#lbl'+inputId).parentNode.hidden=!isVisible;
    }
  }
}

inputVisibility('EmployeeNumber',true);
inputVisibility('CompanyName',false);
inputVisibility('Salary',false);

Click OK to save the event handler.

Add script to cause show/hide

Add the script to the Change event of the control(s) that will cause other control(s) to be visible or hidden (also adding the helper inputVisibility function).

For the WorkerType parameter → Change event

In this example one controlling control will be the WorkerType control. If the WorkerType is E then show the EmployeeNumber control and hide the CompanyName control, otherwise do the inverse.

To add this script click the JavaScript tool on the WorkerType parameter.

Click OK to save the event handler.

For the IsActive parameter → Change event

[RbYesNo] parameter/control types follow a slightly different control naming pattern. Each radio button has it’s own control id.

The “Yes” radio button id is the parameter name prefaced with “r1”
The “No” radio button id is the parameter name prefaced with “r2”

To show/hide an RbYesNo type control, you can simply reference one of the radio button ids and the inputVisibility function will handle hiding all.

Eg.
inputVisibility('r1IsActive',false);

In this example another controlling control will be the IsActive control. If IsActive:Yes is checked then show the Salary control, otherwise hide it.

To add this script click the JavaScript tool on the IsActive parameter.

Click OK to save the event handler.

Final Behaviour

When the run dialog initially loads the default value of Worker Type is Employee and the Employee Number input control is visible with the Company Name input control hidden.

Changing the Worker Type to Contractor results in the Employee Number input control being hidden and the Company Name input control being shown.

Setting Is Active to Yes shows the Salary input field

It is left to the bot developer to have the appropriate logic inside the bot PowerShell to handle the various permutations of some parameters coming in as empty string values.

Copy of Example Bot

The below can be copied and pasted into the Bot Studio left nav by right clicking on any folder node and selecting paste.

readibots KB

Run Dialog: Show/Hide Controls Dynamically

Sample bot params

Control that will cause others to show/hide

Steps to setup dynamic controls

Helper show/hide function

Dialog Controls - Initial State

Add script to cause show/hide

For the WorkerType parameter → Change event

For the IsActive parameter → Change event

Final Behaviour

Copy of Example Bot