Dataverse Image Columns with Power Automate and Canvas Apps (Tutorial)

say to those has an image column type that you can use to store images that are related to a record and if you choose to use this column type inside the confines of a model driven app then it's very straightforward to add images and to retrieve them later inside of that app but if you step outside of that model driven world and you want to use the images with your canvas apps or with a power automate flow for example then things get a little bit more complicated so in this video I'm going to look at how you can capture images into dataverse and then use them again using canvas powerapps and power automate let's start over in dataverse so here I've got a new dataverse table called image column demo and I'm just going to show you how to add a um an image to this so I'm going to go ahead and just click on the plus here and I'm going to add a column called image I'm going to go ahead and change the type to I'm going to come down to file and then change that to image and I'm going to make this the primary image for this record I'm just going to go ahead and save that and for the model driven app perspective if I just come into the forms for this table and take a look at my main form you can see that by default I don't have my image on there but adding it is as simple as grabbing it and dragging it over and now I have it there I'm going to go ahead and save and publish this full then I can step back out of my form I'm going to jump back into my table I'm going to click on edit then I'm going to click on the little arrow next to new row and click new row using full and once I've gone ahead and created a row you can see I can now choose a file and I'll go ahead and choose one of my thumbnails here click on open and then I have my image attached to my record if you're enjoying this video and it adds value for you please do remember to like the video and then subscribe to the channel so you can see the next one as soon as I release it so for a model driven perspective adding your image field and getting back the information is as straightforward as that but let's now take a look at a canvas app so I've just got a basic canvas up here and I can achieve exactly the same thing using an added picture control so you see I've gone add a picture control here and then I have an image which shows the image property of the uploaded image element of the add a picture control then I have a text box and then I have a button and what this button does is it patches into my dataverse table called demo table with the defaults of demo table and then adds in the uploaded image and the text associated with this box so we'll just take a look at how this works I'm going to click on this I'm going to add another thumbnail you can see that immediately my thumbnail is is over here I'm going to call this picture two and then I'm going to click on upload if I X out of this and I'm going to jump out of my app for a second and I'm going to take a look at my table and you can see that picture has been added in there so let's jump back to the app my next example is using a camera to take the photo so in this video earlier this week I highlighted how to use a button to take a photo in a power app I'm not going to do that today I just have this picture this camera control here I'm just going to hold alt and take a photo and you can see similarly to the last setup I have an image here I have my text box and then I have my upload button and slightly differently to the way this worked before I'm still patching the same table but with my image I am now passing an object to it which is full image1 dot image and value image one dot image and that's necessary to make this work I can't just patch the the image value across this time so I'm going to go ahead and run this I'm going to put in picture two and I'm going to upload now let's jump out of this and take a look back at a table and you can see I now have these two pictures I actually call them both picture two but that's okay um I've got these two pictures in my table so that's really the two different scenarios that you might have of adding an image to a dataverse table from a canvas power app now let's take a look at accessing those images so back in my app I have two ways of looking at these images so I have a gallery here where I have just uh the table so if we just take a look at this whole Gallery you'll see that I'm just pulling the data from demo tables and then usefully I can grab that image by just saying this item dot image so I can just very easily get that image out into my canvas app or equally over here I have a drop down which is driven from the demo tables table it's showing the primary column here the name column and then down here I just have an image control and the value of the image is drop down one dotselected dot image so using those images once you've got them into Data versus really straightforward in your canvas apps so now we've looked at how to add images using a powerapps canvas app and how to access them in the same canvas app let's take a look at this from the perspective of power automate so I've created a manual flow here which just goes ahead and lists the rows from My Demo tables table and just selects the column the image column and then I've got a composer action down here that takes the values that we get out of this list rows action in order to take a look at what data we get out so let's take a look at what we get so we just take a look at our compose action you'll see that when we get out our image what we're getting is um basically a very long string which is the data connected with our image so we're not getting anything that's immediately usable in power automate so so say we wanted to take that image and send it to someone in teams for example how might we go about that so in this example we've added a couple of steps and there's an action for dataverse which is download a file or image and we can just pass to that the row ID that we want on our table and tell the the action what column we want the image from and then it will grab that image so what I've done here is I've got my same compose action here just showing me what's coming out of the the body of this action and also down here I have a further compose that's showing me what happens when I use the data URI function on that output so let's just take a look at what happens here so you can see the first compose what we get out of our downloader file or an image is this output which gives us a content type which isn't a particularly useful content type from the point of view of grabbing an image and then the same output that we had previously and then if we look at our second composer action so what the data URI function allows us to do is to compose an output that we would then use in something like a a source property for an image for example in HTML but in this case what you're seeing is while we have something that is encoded base64 which is what we want what we're not seeing is an image so we don't have this encoded as an image so it wouldn't be possible to directly pass this along to say an image tag in an HTM and they'll email or in teams for example so in this example I've added a couple of steps I've just added a step to get my profile for the current user and I've added a post into teams and you can see that in the post into teams we are able to compose in HTML and I'm sending the outputs of this compose two which is the data URI function so what this will generally do is create for us and HTML image using the source which is getting from here so let's just take a look at what happens here because it isn't quite what you'd expect and you can see that my flow has failed to run because I am limited on the size of the message that I'm sending in this post it's limited to 28 kilobytes so I'm not even getting as far as working out what's going on you can see that I've got this this source tag The Source property for this image tag here is kind of what you would expect but generally you'd be looking at this and this would be an image content type but in this case this is not an image content type but that isn't the issue that we're having here with this error the error is simply driven by the size of the amount of data that we're sending through to it so in example number four we have a solution and the solution is that we have to temporarily offload our image somewhere else so we're going to take the output that we get from our download and image or file and we're then going to use the OneDrive connector to create an image out of this output and then OneDrive has a very useful action which is to get a file thumbnail that that isn't delivering to us file content that's actually creating a thumbnail which can be downloaded with an HTTP request elsewhere and that thumbnail once you've created it is available for I think six hours until it disappears now just be aware that anyone with that um that address that's created by that that thumbnail action is going to be able to view that thumbnail in the six hours that it's available and then I've got exactly the same thing here getting my profile and just sending a message in teams using the URL value that I get back from the get file thumbnail so that's the URL of the thumbnail that I'm creating here so let's go ahead and test this and jump it over to teams you can see that the message has arrived in teams but you may be thinking that doesn't solve the original challenge of how do you embed an image out of that dataverse image column so let's take a look at the last example so in this example we aren't working with the limitation that we have in teams we're actually going to send our image through to an email where it can be uh practically as big as we want it to be and we are still doing the same First Steps here where we're downloading our image getting the body of that image response and creating a file in OneDrive and OneDrive has a very useful feature when you get back a file content from it if you drop down the advanced options you can see that what this does is infers content type so let's just take a look at how this is going to work here um and why it works so let's test this okay so that's run successfully and you can see that we create the file as we did before we get back the same file content which is this non-image content type but then when we go to get the file content you can see that because we've got the infer content type turned on when it grabs that content it is then changing that content type to an image which means that we then have a PNG file we're able to come down here and construct our data URI using that function and send that through to email here and you can see that I have the source property of this image tag be the output that we got from that data URI function so jumping into our email you can see here we have this image and this is embedded into our email as you would expect that to be so now you're probably thinking well that's great but what if you want to go the other way what if you have an image and you want to use power automate to put that image into dataverse let's take a look at those examples so in this case I'm going to manually trigger this flow and I'm just going to choose the image that I've already stored in my OneDrive so once we've got this added in here let's just run this to remind ourselves of what the output is from this get file content using path so you can see that I've got my image.png is the input here and my output is an object where I have the content type and then I have the content so the content that I'm interested in is this content property that I've got here so I'm going to go ahead and edit and I'm now going to add a dataverse step and I'm going to add a new row so I choose the table that I've been using and I can just call this picture from OneDrive I'm going to go ahead and go down to Advanced options and then in the image field what I'm going to do is click on expression I'm just going to put a space in here which will allow me to grab Dynamic content so I'm going to go back to Dynamic content I'm going to grab this file content here and you can see I've got my file content and what I've got is my body but I want the content element that is below that body so what I'm going to do is I'm going to put some brackets in here um and then I'm going to put in content that I need to remember that there's a dollar sign in front of it so I'm going to click OK you can see there that's now grabbing that content as the image data that's going to go into dataverse so let's go ahead and test this you can see that's worked I've added my image into dataverse so let's just go ahead and go back and take a look at my table and you can see I've got my picture from OneDrive in there with the image so hopefully that's given you a good overview of how to use the image column type in dataverse whether you're accessing it from a model driven app from a canvas PowerApp or from Power automate and whether you're trying to add images or get images back out again drop a note down in the comments if there's scenarios with the image column type that I've missed or perhaps you have a better way of doing some of the things that I've done in this video I hope you've enjoyed it I hope it's been useful and until next time bye bye foreign foreign

Channel: Bright Ideas Agency

Views: 5,211

Keywords: power apps, dataverse, powerapps, microsoft power apps, power apps tutorial, dataverse image column, power automate, power automate tutorial, images in dataverse

Id: E3u3oMCZbyI

Length: 16min 31sec (991 seconds)

Published: Fri Apr 28 2023