We have UiPath documentation available to trigger Do block upon Checkbox or dropdown change. But there is no such documentation available for triggering Do block upon Select Box value change.
This tutorial explains the steps to be followed to trigger Do block once user selects or unselects a select box item.
Create a UiPath Form, add a Select box component and add few values to it.
Add a custom CSS class to the select box component and Save. In this example we are using ‘optionSelection’ as CSS class value and the field key is ‘selectBoxes’.
Add new HTML component and Select Hidden attribute.
We are going to add Javascript logic which triggers the Do block execution to this component.
Go to the conditions tab → Advanced Conditions → Javascript and insert the below code
jQuery(document).on("click",".optionSelection .checkbox", function (event) {
//Conditions will normally get executed several times.
//The below condition is used to make sure we are calling Do block only once
if(!(sessionStorage.getItem('optionSelectionActiveClasses') !== null && sessionStorage.getItem('optionSelectionActiveClasses') == this.innerText+this.classList)){
//Save the checkbox to session storage to prevent multiple Do triggers
sessionStorage.setItem('optionSelectionActiveClasses',this.innerText+this.classList);
//Output the select box name and its value
data.selectedCheckbox = this.innerText;
data.selectedCheckboxValue = ! ($(this).find("input").is(':checked'));
//Update variable values and trigger do block
instance.emit('updateData',{});
//optionSelected will be outputted under SelectButton field.
//This can be used in Do block switch
instance.emit('execute','optionSelected',{});
event.stopPropagation();
}
});
It is important to add this logic to a component other than the Select box because Dynamic select boxes will not work when we add Conditions or Advance Logic to them. In case of static select boxes, the logic can be added to the select box component itself and no need to have an additional HTML component just for this logic.
Create the below fields in the FormFieldsCollection to output the selected select box name and its value.
I’m a little confused why the first line has .checkbox in it if the component is a select box.
I found your post because I’m trying to do something that seems like it should be fairly simple, but there is so little documentation about components, events, etc that I can’t figure it out.
I have a button that triggers the Do block and using an if on that button key, updates some variables which in turn updates fields on the form. This all works fine, I click the button and everything I want to happen happens.
But what I would really like is to trigger the Do Block based on a change to any of the fields (two text boxes, a radio, and an Edit Grid).
Since my button already works, I was thinking I could just hide it and put into the button’s settings some sort of “if textA changes or textB changes or radioC changes or editGridD changes, click me”
The classic form (versions older than 23.4) doesn’t support triggering of do block for some components such as Edit grids. UiPath form is built using Form.io package which in turn is powered by JavaScript. We can enhance the form features using Javascript and jQuery but it may not be straightforward for developers not having Javascript/jQuery experience.
I started with the newest version and after fighting with it for an hour was frustrated and gave up. I couldn’t even get the datatable to update from an Edit Grid nor Data Grid.
Where has the GenerateInputFields feature gone? Plus bugs.
You know, sometimes things work well (like the older style of Forms) and don’t need to be changed for the sake of change.
The attached workflow file contains the solution to your problem. It will trigger do block when an input field, radio or edit grid changes.
The enhancement is performed by assigning a custom class to all the input components and implenting advanced conditional logic inside all input components (not to the grid but to the input components inside it).
Sample code is given below
const updateOnChange = instance.updateOnChange;
instance.updateOnChange = function(flags, changed) {
if (flags.modified) {
//The below method allows us to trigger do block only when the input field lose its focus
jQuery( ".customText" ).on( "change", function() {
//Code to execute do block
instance.emit('execute', 'inputChange',{});
return updateOnChange.call(instance, flag, changed);
});
}
}
ashokkarale
Yoichi
Nitesh
SorenB
Charly-Moreno
tejas.kotharkar
mlellison
sven.wullum1
parnalmahavir.patni
Jose_G