21. Iterate Ui Elements in UiPath Modern Design | For each Ui Element activity in UiPath

uipath has got two design experiences one is the classic and the other is the modern design experience as an RPA developer we should know both the experiences how to use what in this playlist We are covering the classic versus the modern design in a step-by-step manner where we are focusing more on the modern design in the previous videos of the playlist we have covered already all of these topics in case you are absolutely new to Modern design and you want to get started you can refer to the playlist and get [Music] started today in this video we are going to discuss about a new activity of the modern design which is called the for each UI element we are going to start with something by defining a use case and then we are going to see how we can utilize this activity and how beneficial is this activity in casee you coming to the channel for the first time and you haven't already subscribed please consider subscribing to the channel to get the latest videos in the series having said that let's get started okay so let's define our use case so I am into my browser and I am logged into a website which is called EET test. art.com so let me go here and I'll click on this button which says work items okay and what would happen the Acme is going to show me all the work items which are available on the screen okay so let's say today I have a requirement that I want to click on all these search items or in other words I want to open all these search item wherever the status is open okay so I can see everywhere it is one open right so let's define a additional scenario that I want to click on this button search button wherever the type is wi1 okay so wherever the status is open and the type is wi1 I simply want to click on this button like this and this should open the work item for me okay so this can be here this can be here here the status is open but the type is wi2 so I should not go and click on this one right so requirement is simple open the items wherever this is wi i1 and the status is open right when I say click it can be any action you can relate it can be something where you have to tick mark it can be something where you have to select the checkboxes right so wherever there is any UI element action which you have to do on such scenarios you can use this activity okay so before this activity if you are a developer and you are coming from a little bit of development experience or you have been using the classic design what a developer would ideally do to do all of this right so the typical approach was to extract all this information right so we would use the data scraping feature we would scrape all this information put this data into a data table get the index of all the elements create a dynamic selector and then click on this search button right that approach used to work and that is a pretty good approach and that is what the classic developer used to do but now when we are in the modern design experience uipath has made it very handy and very easy to utilize right so just again repeating in the classic way what I would have done I would have extracted all these information from page 1 page 2 page 3 till page 10 put it into a data table from the data table I would have filter out right that wherever the wi i1 and stus open then I would have got let's say five five items and then I would Loop into for each five items and then Creek our Dynamic selector and then click on this button right so that was the classic approach let's now try to see the modern design activity and how does Modern is taking care of the scenarios right so I hope the use case is clear so let's go back to uat Studio I'll close the other instance okay so I'll go here and I'll create a new sequence and I'll call this as for each UI element okay by looking at my UI Watch Studio you guys might be now comfortable that this is a modern design experience okay so now I'll go to the activities and here the activity which we are talking is called the for UI element and this is in the UI automation application and for each UI element okay in case you are not able to get this activity chances are there that you are still in the classic one so just select the modern and you should get this activity okay so for each UI element I'll just go and I'll drag and drop it here okay now it is saying me indicate the Target on the screen where is your target right so I'll go back here and this is my target so I'll click on this one which says indicate Target on the screen and the first error the current activity must be in inside a use application SL browser before using it place it inside the use application SL browser right totally makes sense because we are in the modern design activity so I'll delete this go here and use the first activity which is use application SL browser okay drag and drop it here indicate the application to automate and now I'll point it to the work items okay we have already discussed all of these properties everything in the previous video so not spending much time here immediately I'll go to activities and now I'll take the for each UI element which is this guy drag and drop it here and now it should work okay now it is saying me indicate the UI element on the browser now this is the time you have to indicate it to the element which you want to do that action right check boxes in our case it is the search item so I'll go here and I say indicate in the edge and I'll point it to this button which is called the search button but if you see here on the popup menu this is the same menu which you might be familiar when we discussed about the extracting of the structure data right the look and feel of this viser is exactly the same as what we discussed in the extraction of the structure data right so uipath is asking me Mukesh find me the UI element add the UI element when I say UI user interface okay so I'll click on this button which says add UI element and then I'll point it to the data or the button whichever we are interested right in our case it is this small search button I click on it and it has automatically extracted all the information for those search button and here you can see in this one it's says I am the current item right if this is all good and the pattern is successfully matched you can simply click on the confirm if not you can just add the other element right so I'll just go here and I'll say confirm now you can see here this is the current item which it has got you have an option here to click on this button which is the preview and you can see the preview but since it is just uh button so that's why it do not have any text okay once you have done this the other thing here you would notice here is something which is called add label now what is a label right so when you have to work on this search button to filter out them or to work upon them you need some selection criteria right or in other words you can say that hey I need some additional information so in my case the additional information is I want to know about the type and I also want to know about the status it can be date or it can be anything right so I'll go here and I'll say that please add me the label so I'll go here and I'll say add a label and I'll point it to this button which is the wi5 I just click on the first element and all the other elements are automatically taken by it right now here you have an option to change this customize this right all of that we have already discussed so you can check it out here so I can just go here and I say confirm right in case you want add additional information you just go and say add label and you just point it to this one which is called the status okay and it has got all the status also I can say confirm once all this data is here I can preview the data and you can see that this is the current element because this is a symbol that's why it is not coming but in other case it's in case it's a word it will come right so you have the label and you have this label now what you can do is as a developer you always has an option to go here and you can customize this which was not available in the classic design right and this is my status okay this also option you have okay type status now extract data from multiple pages is your data spanning across multiple pages right page number 1 2 3 4 5 6 7 8 9 10 the answer to my question is yes so I'll just go here and I toggle this option to on and here you can see that now I it is asking me to indicate to the next button in many scenarios the next button might not be available directly here so sometimes the developer might need to scroll down but now if you scroll down it might record that action as well so for that in the modern design you have something which is called the stop selection so as soon as you click on stop selection it will stop this thing and you have now all the option to go ahead and start scrolling and all those things right you can just go it's like pausing it I can go here I can say extract data from multiple Pages toggle to on and now I just have to indicate it to the next button which in our case is this one okay it says selecting the Target and it has got the selector for the next item okay so then once you are done you just go here an essay save and close now exactly same concept of the data extraction in the data extruction we would to extract the data and the output was a data table which then we used to write in an Excel or in a database data table right all of that we used to do but what is different here is for each U element if you go to the properties okay you would notice here the let me just expand it okay here so these two the Target and the next button these are exactly the same thing which you have in the extract data table visit as well then you have these options limit extraction to loan limit maximum UI Pages or maximum pages I can say No Limit how many number of items you want to extract in case you want to limit you can simply go here and limit these items here right so these options are available for you which are exactly the same as extract data types good part about this activity is this one which is called the configure filter now think it as compared to the classic design experience where the developer would simply go to the website extract all the data in a data table then the developer would write a link Q the developer would write something which is called a filter data table do all this manipulation here as soon as I click on this button which says configure the filter it opens a wizard for me and you see very intuitive or exactly the same name which I have given while extractions are coming for me so I don't have to specify column zero column one the name of the columns right I have all this information directly available and that to in a way anybody can understand right so I can say where the type all these things contains what do you want to check I think we decided for WI one okay and add status contains let me check what was the status open right so I'll just copy this open and I'll paste it here right you can now relate it to your use case this can be condition this can be and this can be or so I want both the condition to true so this and this should be true that only I I want to do this operation right so this activity actually now has reduced my work of reading the data into the data table using the filter data table activity doing the manipulation all of that is cut shot right so you can just manipulate this and you just go here and I say okay once that is done what would happen in your UI element collection you will get all the UI element which is the the user interface element which satisfy this criteria okay so now what you can do here you can easily go and use a click activity okay so I drag and drop a click activity here and now click activity is asking you where should I click now into the click activity you simply go to the properties and here you have the input right ideally in the input you just go and you indicate it on the screen and you get the selector that selector information you have to pass here right however when you are using this kind of activity if you go to the variables you would notice that uipath has automatically created this current element for you which is a kind of UI element so that means that any UI automation activity has that input property right so if I go to the properties now you would see here into the target tet there is no Target because we did not specified the selector however I have something which is called the UI element which can become an input and that UI element we can directly pass in this one which is called the input output element input element if you keep your mouse it says that provide me the UI element and where is my UI element my UI element is in this variable which is current element type of UI element so all you have to do is just go to the properties in the input element type the current element and that's it now what should happen the automation will run it will go and it will click on all these buttons one by one and then you can do the operations right and then once you are done you have to come back to the previous screen so you need to add a go back right so all the all of that logic is your part of automation right so to see that working I can use an activity which is called highlight search highlight and I'll take the UI automation highlight activity okay instead of the click I simply want the uip paath robo to highlight that activity if it is able to highlight it would be able to click as well right now the same concept in the Highlight I'll go to the properties and what do you want to highlight I just want to highlight the UI element which was in my current element right now this guy is asking me for how much time you want to highlight right so that duration you can just go here and you can put in uh this property which is called the duration and which is here this one which is by default is 30 seconds right you can always go and uh reduce this time so let's reduce it to something like uh 5 Seconds right we do not want to wait it for 30 seconds okay sorry that is the time out my bad this is the duration right for how much time you want to wait for that activity to highlight right so by default the duration is 2 second 2 second would be very less so let me just uh make it to 4 seconds maybe and then what color you want to highlight you can specify the color here I'll just keep it to something like uh let's say Indian red okay and then we want to highlight it for 4 seconds right this time out is that what happens in case the activity is not found right common properties okay so this I have set for the Highlight so if everything works well what should happen it should go to the browser extract all the information select only the one where the wi item is one and the status is open and it will highlight the button okay let's go here and I'll just say run the file okay so the project has started let's see this in action right so only two activities and I was able to iterate the elements okay so here it is you can see wi item 1 second second row highlighted for 4 seconds then it is highlighting the fifth one you could see that in red right now the third last W i1 open highlighting once this page is done now the automation automatically move to the next page which is the page number two highlighted highlighted right you might be seeing that this is highlighting all the elements wherever the status is wi i1 and the status is opening right the third last right so which means that now by just using two activities I was able to make this automation right which is pretty awesome right I hope you guys understood the concept and you understood the value of this activity that in case I have to do it in the classic it would have taken me a lot of work right so I'll just it will keep continuing so I'll just go here and I'll stop this right so same like we are able to highlight it it should be able to click it right so the people who are looking this and they are a little confused that what is the difference right so I'll just go here and I'll show you that as well I'll take a click activity okay and where do you want to click I will go to properties and I'll say that just click on this one current element right now what would happen the robot will go it will go to the first page it will find all the criteria where it is wi1 and open and it should click on this search button okay so once this search button it will click it should be on this screen right so once it is on this screen what do you want to do you maybe you want to update the work items and all those stuffs that again is your logic but we'll just ask the automation to go back to this button which is the work items right so I'll just go here and after this maybe I'll just ask uh click activity and I'm telling the robot that you just go here and you click on this button which which is the work items okay so that way what would happen when it is looking for the next UI element it will go back to the previous page okay so let me see if I am able to go back if I click on that work item yeah it comes to the previous page okay so to better understand what I'll do is I'll put a delay not recommended but again we want to understand it so I am putting it like like this okay so I'll go here and I'll say 3 seconds delay I have put here and uh 3 second delay I'll put it here right so what would happen the same automation will run it will click on these items the first it should uh click on this one 983 wi1 and open and second it should do on this one which is the 958 okay so let's go here and I say run the file file right we have already tested with the help of hover but just for the people who might not understand the concept of hover just trying to explain them with the help of the click as well right so the automation started you would see that first it will click on the first item which was uh the 983 next we told the automation to go back now it is clicking on the second one which is the 9556 came back here and went back right next it will click on the third last and once all the elements satisfying the criteria done from this page then it will go to the next page you can see at the top the page number is now two and the same action will happen for all these elements right so here we have not written any code to update the work items and all those processing all those automation steps you can just invoke in the for each Loop right and the automation will work smoothly right so I hope now this clears your concept so I'll simply go here and L stop this okay I personally like this activity very much if that is the case for you just comment down for each UI element and I would understand that yes you guys also like this activity and in case you have any more discussion which you want to have on the same topic you can just share your thoughts with me in the comments right I'll appreciate your feedback on this video and with that we would like to wrap this video here thank you for watching if you like this video please do subscribe to the channel and see you in the next video of the modern design experience thank you for watching and happy automation okay so that is all for this video I would like to wrap this video here I hope this was insightful if you have any more questions any more doubts feel free to write me in the comments or you can also drop me an email as well I would appreciate your feedback on the video and tell me in the comments what would be the next topic or next video you want to see so with that I would drb this video here thank you for watching if you like this video please do subscribe to the channel and happy [Music] automation

Channel: Tutorials by Mukesh Kala

Views: 1,206

Keywords: UiPath, UiPathCommunity, RPA, LearnRPA, Tutorials By Mukesh Kala, automation, tutorials, how to, uipath tutorials, uipath beginner, robotic process automation, UiPathRPA, uipath rpa, UiPath Videos, Rpa tutorial, Robotic Process Automation, uipath training, UiPath examples, RPA Training, UiPath Mukesh Kala, uipath descriptors, descriptors in uipath, uipath modern design, uipath modern design experience, modern and classic design in uipath, uipath modern design experience vs classic

Id: crJ_MLrfXMY

Length: 23min 15sec (1395 seconds)

Published: Thu Feb 29 2024