How to style an HTML Table from Power Automate Flow

[Music] hello in the last week video i created a flow that gets the items from a sharepoint list and converts it into an html table and then sends the html table in an email one of the questions that i got from multiple sources from linkedin and from youtube and different places was ali how do you style this table because it's very basic html table and today i want to show you how to style it let's get into the video and see how it turns out so in the previous video we created the table in an email out of a sharepoint product list today we want to update the same flow and we want to make this table a little bit fancier i think it looks pretty good but i'm sure you can do better regardless we want to learn the basics so let's get into it this is the flow that i created in the previous video if you haven't watched that i put the link right on the top here so you can go there follow that video create this flow and then you can follow me here for the styling if you have done that just open this html email table demo and you're good to go right under create html table i want to capture the html and work with it to do that i click on this button and i add my magical control which is combos if i click on this compose i can get the input from create html table and capture it inside this compose as text so if i click on create html table output i will have that table inside compose let me just save it and test it again i click on test run flow done and now if i click on this compose it gives me the very same table that i put in the email in the previous video so i just copy it and i want to edit it in an html editor there are lots of html editors that you can work with i personally prefer visual studio file new file and i create an html page i click on open and i just copy and paste the table that i have here i just save it i give it a name for example table styling 0 1 i click on save and then if i just double click on the file that i just saved you will see the exact table that we worked with now we want to add style to it so remember we are out of flow now here we can add inline styles to the table although we can do it i'd rather not to the other way is just adding a style tag here and i just say for table for example background color make it yellow let me do it that light golden whatever so it's not going to look that bad i just go back to the page refresh and you see now i have a background but even this one is not my favorite and the reason is that the page that displays this table may have some other tables and this style will affect all of them so i have to find a way that i can narrow down the scope of this style to this specific table i prefer to give it an id so this id is going to be my table and maybe underscore001 i'd rather pick something that is unique so give it a name that cannot be repeated so now if i refer to this table using this id chances that another table or another object in the same page has the same id is much slimmer you can even be creative and use a unique id for this just create it using tools create uid just remove this hyphens and paste it here regardless all we want is a unique id for this table that style refers to this table by that id so let me just replace this table with the id that i have now and let me change the color to red maybe orange red and i save it and let me go back to the page and refresh it now it takes the color although it looks very ugly so let me go back here and make it to like green probably this green yellow is a bit better than what it was before refresh yeah okay so i have a background same way you can add as much as you want so if i consider for example header the th tag i can give it a background i can give it a font so let's say my table and th and i just add a little bit of style to it and i say for example color which is going to be the font color is going to be navy save it and i go back to the page again and if i refresh it you see the color changed same way i can add border i mean the sky is the limit so let's say this one instead of a header let me add for example the td tag inside the table and i would say border two pixels and it's gonna be dashed for example and the color is gonna be gray save and i just refresh that and you see the table looks like this and even if you want to change the background color of these cells you can change background color and i change it to yeah good one okay one of the best table designs in the history of development in the milky way fantastic i like it it looks cool now we want to take the style that we have here and pass it to our flow first thing is that we need to assign this id to the html that is created it's very simple so if you go back to the flow itself you see that this compose takes the table and outputs the table if i go to edit i can have this compose to get this output and add the id to it to do that i just remove this i click here i go to expression and i use the function called replace replace accepts one big string that i want to work on it and this big string let me get it from dynamic content and it's gonna be the create html table output this is what i'm going to work with the second parameter is the value that i want to replace so i put single code and if i go back to my html page if you remember before i add the id here it was something like this so if i just replace this one with something like this i will have table replaced by table space id equals something fantastic so what i'm trying to replace is this i paste it here as the first parameter and the final value again i put my double single quote and i add the entire thing here copy and i paste it here i click ok so now compose creates a table that has an id which is great now i create another variable i'd rather create variables in the beginning typically so i create another variable initialize variable and this variable is going to be my table style and probably want to rename this one to table style looks better type is going to be string and value is going to be the value that i created here copy and paste it here i click on save so i have the entire values here in one stringed variable and now all i need to do i need to go back to my email instead of this output i need to have the output from compose which is going to be this one which is the table that has an id and right after that or before that i can add the table style now let's save it and test and see the result test test run flow done and now we can go to our outlook and see the result and this is the table that is beautifully styled that was all about it sorry i'm not the best designer and not that much of artistic talent but i think you got the idea you put your design and artistic talent together and make it much better than i did thank you for watching stay tuned till the next video you

Channel: Alireza Aliabadi

Views: 18,477

Keywords: How to style HTML Table Power Automate, Create HTML table, Power automate, how to stlye html table power automate, how to stlye html table pwoer automate, Mictosoft Flow, HTML table in e-mail, Send list items in HTML table, email list items, sharepoint list to html table, Sharepoint list to html table power automate, power automate how to, html email, power automate microsoft, microsoft flow sharepoint, power automate sharepoint

Id: K46Msjqnap4

Length: 12min 6sec (726 seconds)

Published: Mon Jun 22 2020