Versions Compared

Version Old Version 4 New Version Current
Changes made by

Stephen Biro

Stephen Biro

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

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

Control that will cause others to show/hide

...

Code Block
function inputVisibility(inputId,isVisible){
    //set the visibility of a run dialog control
    if(document.querySelector('#'+inputId) !=== null){return} //exit if invalid control reference
    document.querySelector('#'+inputId).parentNode.parentNode.parentNode.closest('tr').hidden = !isVisible;
    switch //(document.querySelector('#'+inputId).parentNode.parentNode.parentNode.previousSibling.hidden=!isVisible;type) {
      if(document.querySelector('#'+inputId).type=='radio'){  case 'radio':
            document.querySelector('#lbl'+inputId.substring(2)).parentNode.hidden=!isVisible;
    }else{        break;
        case 'file':
            document.querySelector('#lbl'+inputId.substring(3)).parentNode.hidden=!isVisible;
    }   }
     break;
        default:
            document.querySelector('#lbl'+inputId).parentNode.hidden=!isVisible;
    }
  }

Dialog Controls - Initial State

...

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

code
Note

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

RbFileUpload type parameters become prefixed with “tbl”. RbYesNo type parameters become prefixed with “r1” and “r2” and require slightly different handling described further below.

Code Block
function inputVisibility(inputId,isVisible){
    //set the visibility of a run dialog control
    if(document.querySelector('#'+inputId) !=== null){return} //exit if invalid control reference
    document.querySelector('#'+inputId).parentNode.parentNode.parentNodeclosest('tr').hidden = !isVisible;
    switch //(document.querySelector('#'+inputId).parentNode.parentNode.parentNode.previousSibling.hidden=!isVisible;type) {
         if(document.querySelector('#'+inputId).type=='radio'){case 'radio':
            document.querySelector('#lbl'+inputId.substring(2)).parentNode.hidden=!isVisible;
    }else{        document.querySelector('#lbl'+inputId).parentNode.hidden=!isVisiblebreak;
    }   } }case 
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.

...

Code Block
languagepowershell

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.previousSiblingfile':
            document.querySelector('#lbl'+inputId.substring(3)).parentNode.hidden=!isVisible;
            break;
        default:
            document.querySelector('#lbl'+inputId).parentNode.hidden=!isVisible;
    }
  }

inputVisibility('EmployeeNumber',true);
inputVisibility('CompanyName',false);
inputVisibility('Salary',false);
inputVisibility('tblaFile',false); #note the tbl prefix

...

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.

...

Code Block
languagepowershell
function inputVisibility(inputId,isVisible){
    //set the visibility of a run dialog control
    if(document.querySelector('#'+inputId) === null){return} //exit if invalid control reference
    document.querySelector('#'+inputId).closest('tr').hidden = !isVisible;
    switch (document.querySelector('#'+inputId).type) {
        case 'radio':
            document.querySelector('#lbl'+inputId.substring(2)).parentNode.hidden=!isVisible;
            break;
        case 'file':
            document.querySelector('#lbl'+inputId.substring(3)).parentNode.hidden=!isVisible;
    if(document.querySelector('#'+inputId).type=='radio'){        break;
      document.querySelector('#lbl'+inputId.substring(2)).parentNode.hidden=!isVisible;  default:
     }else{       document.querySelector('#lbl'+inputId).parentNode.hidden=!isVisible;
    }

 } }

//For simple criteria, a short hand way to do show/hide fields is to base it directly on the value of another field
inputVisibility('EmployeeNumber',document.querySelector('#WorkerType').value == 'E');
inputVisibility('CompanyName',document.querySelector('#WorkerType').value != 'E');

/*
//Long form approach for more complex criteria
if(document.querySelector('#WorkerType').value == 'E'){
    inputVisibility('EmployeeNumber',true);
    inputVisibility('CompanyName',false);
}else{
    inputVisibility('EmployeeNumber',false);
    inputVisibility('CompanyName',true);
}
*/

...

Code Block
languagepowershell
function inputVisibility(inputId,isVisible){
    //set the visibility of a run dialog control
    if(document.querySelector('#'+inputId) !=== null){return} //exit if invalid control reference
    document.querySelector('#'+inputId).closest('tr').hidden = !isVisible;
    switch (document.querySelector('#'+inputId).parentNode.parentNode.parentNode.hidden = !isVisible;type) {
        case 'radio':
            //document.querySelector('##lbl'+inputId).parentNode.parentNode.substring(2)).parentNode.previousSibling.hidden=!isVisible;
            break;
     if(document.querySelector('#'+inputId).type=='radio'){   case 'file':
            document.querySelector('#lbl'+inputId.substring(23)).parentNode.hidden=!isVisible;
    }else{        break;
        default:
            document.querySelector('#lbl'+inputId).parentNode.hidden=!isVisible;
    }

 } }

//Note: For RbYesNo control types, each radio button is its own id.
//      The 'Yes' control id is preface with 'r1'; whereas the 'No' is prefaced with 'r2'
inputVisibility('Salary',document.querySelector('#r1IsActive').checked); //'Yes' (the 'r1' prefaced id) is checked

...