Unanswered

Loop through web page form elements dynamically in power automate desktop

(0) Share

Report

Posted on by maxpower45255

223

I hope someone would have an idea on how to solve this. My goal is to loop through rows of an html table, find certain fields in each row (textboxes and checkboxes mainly) and manipulate each row accordingly. This is part of a billing solution. Basically, a customer sends a PO (purchase order). Once the PO is fulfilled, we invoice the PO on a portal. So I have to loop through my invoice lines and try to match the original lines on the PO, and If there's a match, I enter the QTY from the invoice line (could be same as the original requested qty) or different into the corresponding line. The matching of the lines is done by item#.

The chanllenge I'm facing is the web page I'm working with renders the elements dynamically. So I can't rely on the IDs of the fields because they change constantly. The page displays the purchase order header section, and then a table of PO lines. The table has this header/structure seen on the attached screenshot. I've also included the html of the first checkbox and item# textbox. The html for the rest of the fields on the subsequent rows is basically the same except for the IDs being different.

I'm using the "Extract data from webpage" action with the "Process data upon extraction" option set. This returns me the static data and it's helpful. I can loop through the results of the variable. Now, I just need to reference the input fields (textboxes and checkboxes) which can only be identified by their CSS selectors, and enter the Qty, unitprice and check/uncheck the chekbox if we're invoicing this line or not. Then submit the invoice.

Any ideas on how to achieve that would be appreciated.

sample HTML of the fields:

Categories:

Power Automate Desktop

I have the same question (0)

All responses (11)

Answers (0)

Sort by

momlo 1,527 Super User 2024 Season 1 on at

Like
a
(0)

Report
Copy link

Link copied!

Hi @maxpower45255

At first glance,
I see you have row index(if i read your example correctly) tabindex="0".
So I would capture input elements you need to complete (from one row only) and try to make them dynamic using variable.

Example:
If I think of quantity column my selector would need to be built in a following manner:
"Give me text input that sits in table in row %RowVariable%"

And assuming the list is always sorted Asc on "No." column your %RowVariable% would need to be set in your loop, based on your "No." column from current item in the loop --> %RowVariable% = %CurrentItem -1%.

Does that make sense?

Was this reply helpful? Yes No
maxpower45255 223 on at

Like
a
(0)

Report
Copy link

Link copied!

Thanks @momlo . The question is, short of using the input fields' IDs, how would you use a css selector in this case to specifically identify the input field and in the correct row. I'm playing with the page and trying out different selectors and ideas. but if someone has done this already, it would help to get their input.

Was this reply helpful? Yes No
momlo 1,527 Super User 2024 Season 1 on at

Like
a
(0)

Report
Copy link

Link copied!

You can use variables in the selector, also jquery such as :contains() etc 🙂

https://learn.microsoft.com/en-us/power-automate/desktop-flows/build-custom-selectors

Was this reply helpful? Yes No
ShakeNBake 4 on at

Like
a
(0)

Report
Copy link

Link copied!

MaxPower, Any luck figuring this out? I'm trying to do something similar, updating a dynamic number of rows for claims. There's about 10 columns, and the number of rows varies based on the overall claim. Could be up to a hundred rows. I need to populate the data from an Excel Table which has the data.

Was this reply helpful? Yes No
maxpower45255 223 on at

Like
a
(0)

Report
Copy link

Link copied!

@ShakeNBake Sorry I don't have an answer for you - yet. I put that project on standby because of other priorities. But I do need to get back to it soon. I will let you know how I solve it.

Was this reply helpful? Yes No
andrey3 2 on at

Like
a
(0)

Report
Copy link

Link copied!

Hi, do you have a solution? I have encountered a similar condition several times. I need to copy and paste values from Excel to a web page that contains many rows and columns. After adding a new row in Excel, I must click the "+" button to add a new row in the web page. Each new row has a dynamically changing element attribute. I have attempted to use a loop in Power Automate, but it doesn't work because the new data always gets stuck in the previously set element. Please help me with this issue.

Was this reply helpful? Yes No
Heather 19 on at

Like
a
(0)

Report
Copy link

Link copied!

@maxpower45255
Try using the resulting for each variable (from your loop step) in the element selector.
I do this to solve a similar issue

Was this reply helpful? Yes No
maxpower45255 223 on at

Like
a
(0)

Report
Copy link

Link copied!

Thanks @Heather! Unfortunately, the IDs of the elements aren't sequenced, and I have no idea what they will be called. I'm familiar with using a variable in the CSS selector. But that requires that I'd know ahead of time what is the format of the sequencing. For ex, if all my fields were called <input id="txt-1">, <input id="txt-2">, <input id="txt-n">, your solution would work.

Was this reply helpful? Yes No
mmonline 169 on at

Like
a
(0)

Report
Copy link

Link copied!
Hi @maxpower45255
This could get a little involved but would be doable. I would need a similar page to work with to flesh out a solution.

But, using the Run Javascript function on a Webpage action might provide additional possibilities of iterating through the DOM and all elements in a table row. Even though you do not know the id or name of an element, you could go through the <tr> elements of a table and each <td> element of a row. It's ordinal position is likely fixed.

Example javascript&colon;
function ExecuteScript() { var rowCount = document.getElementsByTagName("table")[0].getElementsByTagName("tr").length; var rowCounttwo = document.getElementsByTagName("table")[1].getElementsByTagName("tr").length; return "[" + rowCount.toString() + "," + rowCounttwo.toString() + "]"; }

This is simply returning the number of <tr> elements for the two tables found on W3 Schools lesson on HTML tables. https://www.w3schools.com/html/html_tables.asp

But if the table being returned, regardless of ID's, has columns and input elements in the same ordinal position you could map it out and loop through all the rows, grabbing data from each row.

Again, I would need a similar page and a little time to work out the solution. But this may be the only way to deal with the dynamic aspect of the data in question.

Was this reply helpful? Yes No
mmonline 169 on at

Like
a
(0)

Report
Copy link

Link copied!
Hi @maxpower45255:

I've modified the javascript to demonstrate getting into each row and column.
function ExecuteScript() { var rowCount = document.getElementsByTagName("table")[0].getElementsByTagName("tr").length; var rowCounttwo = document.getElementsByTagName("table")[1].getElementsByTagName("tr").length; //return all the rows of the table var tRows = document.getElementsByTagName("table")[0].getElementsByTagName("tr"); var msg = ""; //loop through each row for (let i = 0; i < tRows.length; i++) { //return all the td elements in the row var tData = tRows[i].getElementsByTagName("td"); // row 0 (header row) has only th elements. // This if statement will only evaluate rows with td elements if(tData.length > 0) { var company = tData[0].innerText; var contact = tData[1].innerText; var country = tData[2].innerText; msg += "Row: " + i.toString() + ": " + company + "||" + contact + "||" + country + "\n"; } } msg = msg.trim(); //remove trailing line return msg; }

This returns the following text from the above referenced page:
Row: 1: Alfreds Futterkiste||Maria Anders||Germany Row: 2: Centro comercial Moctezuma||Francisco Chang||Mexico Row: 3: Ernst Handel||Roland Mendel||Austria Row: 4: Island Trading||Helen Bennett||UK Row: 5: Laughing Bacchus Winecellars||Yoshi Tannamuri||Canada Row: 6: Magazzini Alimentari Riuniti||Giovanni Rovelli||Italy

Following this logic, you can get the ID or name of each field from a specific td element. Based on the construction of that table, you can know which field it is by its position. Or it seems so.

I hope this opens up some possibilities to solve your problem.

Was this reply helpful? Yes No