Handle date pickers (date selectors) in Power Automate for Desktop

hey there it's Graciela here in this video we're gonna check some examples of how to handle date Pickers in a web page using power animate for desktop this is the first web page we're gonna work with and as you can see what a regular user would do to select a date here they would just go to this drop down and then select custom date and then they would be able to select the month the year and the actual date and they can also use this errors to work with that and I think that it's quite complicated to do all these actions because sometimes you don't have this month and year selectors sometimes you just have these errors and the date Pickers all work very differently so one of the best ways to do this is to type in directly date picker because most of them they will give you the option to select but that most of the date Pickers that I have worked with they always have a way that you can input the data that means grading the date that you want to work on for example if I just type in December 31st of 2022 you can see that if I click outside this or if I select 2023 you can see that if I click outside that and then I click on update this date picker automatically finds the information based on my input even though I didn't actually selected the date and that's the approach that we are going to use to automate this using power automate so I'm just gonna go to Power automate then click on the recorder and we get this window in which I can just click on launch new browser I'm gonna launch Chrome and I'm gonna start at this link and the first thing we do is we select this drop down then we select custom date and as you can see Power automate is recording everything that we are clicking on and everything we're doing in this web page and again I could use these buttons but you can see that that can get complicated if we try to use it that way but if I just click on this directly and then I just type in my date you can see that power automate is recognizing that I am typing in in this even though it's a date picker behind the scenes it can also work as an input text and that is how power automate is recognizing this and you can see that the web page is recognizing as well or input properly so then we just click on update and then we keep doing whatever we need to do after we select a date in this case it's just exporting and then exporting in an Excel format once I'm done with that I just go to done and you can see that part automate has recorded everything in this case um these steps are were recorded and we don't need them so I'm just gonna remove them and something that we can do is to just for example use an input for the date and for example we can do January 1st 2023 and then click on Save and you know that the format in which we are going to input the date that can really depend on the website so in this case we need to convert the input data the start date or whatever date we need to select in our date picker and just convert it to the format that that or web page will use so for that we are just going to use the convert daytime to text and I'm going to select that I will convert my date and the format that I will use in this case I will select custom and you can see that I need my day then month and finally gear and then instead of using a hard-coded date here I am just going to map this input in my web page to the formatted daytime here and once we have converted that I'm just going to run and you can see that now this workflow is taking the date that I gave it as an input it transformed me to the date that my web page will work with and then it just moves forward with the next steps so this is one way to handle date Pickers now we're gonna see another example which is in this website and you can see that the date picker is a little bit different from the other one but at the end of the day we always have this type of text input control in this web page and we can use that as well so we don't have to handle the errors and the year and month selector so for that I'm just gonna go back to poor animate and I will just start a new Chrome session and we're gonna start recording we're gonna start in this webpage and you can see that part automate properly recognize this as an actual the text input that we can use if I type in that automatically records my action and I'm gonna just do that in the end date I'm just gonna change it to February and again you can see that for Adam ID is properly recognizing what I am typing in so then I'm just gonna click on done and first I'm going to delete these two steps which I don't need and then we can do the same thing about uh formatting or daytime as we are doing here in this case this second web page just requires day month and year and that will match this and I'm going to add a new input variable which is the date end and it's going to be a text and we're gonna set it to this December 31st 2020 and we're gonna just do the same thing about uh formatting this to the actual date that we need so I'm just gonna change this instead of using date we're gonna use date and and again the same format and we're just rename this to end then we click on Save and we can just change the hard-coded input here that we were doing when we were recording to the start date and end date that is formatted in the way that this web page will require and now let's run this automation I will just change this to maximize because I want to see the whole screen and I'm going to stop the flow right after we input or date so we can see it working and let's start it you can see that we have January 1st through December 31st and you can see that by grabbing the text here power automate is interacting properly with the date Pickers even though we're not actually using the date picker but the text input and finally we're gonna have a look at this last web page that you can see that we have our date picker here it's a little bit different from the other two examples that we have been looking at and you can see that we can start the date and we end it here and that is how we can do it through the interface but to handle this through Power automate there are different ways as you can see this even though this is a quite different date picker it's still a text that we can use and we can update but we can also see here that once we select a date range you can see that the URL of the web page changes so that means that this website has some type of event color that whenever we click on dates here that redirect us to a new URL and that is what actually loads this new data so so instead of us for example selecting these dates this way or typing in and then clicking on apply filter or something what we can do is just to handle this URL at the top I'm going to copy all of this and as you can see I have here the original URL and then we have the start date and then we have the end date and it's always going to be in the same format we have here we have month and then we have day and same for the end whatever is after this like the T and the seconds and minutes and all of that it's always going to be the same so we can copy this same URL and for example I'm just gonna change this to April and if I copy this once I go to my URL it's going to load my new date range as you can see it changed this to April 9th so we can do even though we can interact with the date picker here we can also use the option of working with this URL so for that let's go to Power animate and I am just going to start a new browser instance I'm going to launch a new Chrome session and here's going to ask me what's the initial URL that I want to use so I will just copy this and paste it here and as you can see we need the start date and end date to be dynamic so again we already have these input variables as a starting and end date so we're going to take those two for this example so for the start date I am going to just select the start date and for the end date we are going to select the formatted date for the end of the period so then we click on Save and finally we just need to make sure that we use the right format in this case this is expecting year month and day so I'm just going to click uh here and update this year month and day keep in mind that the month here is uppercase if you use lowercase that's going to use minutes instead of month so it's important to do that and I'm gonna change the format for the two of them and we are going to use July 1st through December 31st so I'm just gonna click on run and you can see here that it is I'm just gonna stop the flow because now we are no longer working with this other date Pickers so now you can see that we have lunch this URL it automatically loads the dates that we are working with which is July 1st through December 31st and that is selected properly here and you can see that my report loaded this data so this is another way in which you can handle date Pickers because a lot of web pages usually do that whenever you select a date and you click on filter or or see data or update data sometimes they will load a new URL and you can use that to directly send the request to show the data related to this date range so as you can see working with date Pickers can be different depending on the web page and depending on how the web page works you can work with the URL but typically the uh most of date Pickers that I have worked with usually also come along with a text input and you can take advantage of that to just use it in part anime to input the text field instead of interacting with the errors and the days and the months and all of that because that can get a little bit complicated so I hope this video was useful for you thank you so much and see you next time

Channel: Power GI

Views: 3,262

Keywords:

Id: unByToIU9ss

Length: 13min 0sec (780 seconds)

Published: Mon Jul 31 2023