Power Apps Save Pictures to SharePoint - Camera Control Tutorial

hello everyone this is reza durrani in today's video i will show you how we can work with the camera control in powerapps we will leverage the camera control to take pictures store all of these pictures in a collection and then in one go without using power automate no flows we will save the pictures that we've captured into the attachments of a sharepoint list item so let's get started with the video but first my introduction [Music] to get started with the camera control in powerapps i will head over to the insert tab go to media and select the camera control now the camera control is going to leverage the camera of my device right now i am on my desktop so it's leveraging the camera on my desktop if i'm on a mobile device i have multiple cameras i can also provide the user with options to switch the camera so they can accordingly pick the camera of their choice now if i preview my app here's my camera control if i select this control it will actually capture the image now if i want to display that image i can head over to insert go to media and use the image control so i'm going to place the image control right here and for the image property of my image control camera and that's the name of my camera control dot i have a property here called photo now if i go and preview this app each time i click on the camera control it's going to take the image so let's say i put my hand up i take the picture that's the picture that it has captured right here now let's say i would like to create a collection of data so as the user clicks on the camera control it keeps it keeps creating this collection of images so for that i will head over to gallery and insert a blank horizontal gallery place this gallery here in this gallery insert an image control just the height and now for the camera control there is a property called onselect so every time the user selects the camera i will use the collect function to create a collection i will give this collection a name and in this collection i will add my camera control so i can either directly point to it by using the name of the control or i can use the self function because this property is for the camera control itself so self dot photo so that completes my function wherein every time the user clicks on the camera control it will add the photo into that collection now i will leverage that collection as the items property for the gallery that i just created now that i've done this let me go ahead and preview the app and as i start clicking on the camera control if you look at the bottom it's gone ahead and added all that data into the collection and these are all the images that i captured as i was clicking on the camera control so i've added a button now to clear all those images so on select of this button i will call the clear function to clear that collection so if i preview the app click clear images the images will be cleared another key property around camera control is around its stream functions so if you search for stream there's a property called stream rate and basically what this does is if you define your time there in milliseconds once that time that you've defined is complete it will take a picture automatically so the user does not even have to click on the image so the stream rate now i've defined as 10 000 that is 10 seconds and on the on stream function i am using that same collection but this time i'm loading the data from self dot stream property that means what is currently being streamed is what it's going to capture so basically after every 10 seconds we'll take a picture on that camera control and place it right there in my collection at the bottom let me preview my app clear my images and let's check this out you see every 10 seconds it just grabs the image and plugs it in to my collection right here so this can act like the burst mode on your camera control if i reduce the stream rate and then just use the camera control it can just start taking pictures like in burst mode another property of the camera control is something known as camera and by default if you notice it puts a number here zero now if i was to add a drop down control on this screen and for the items property i will use the camera control dot there is a property called available devices and what this will do is this will list out all the available camera devices that are currently connected to my desktop or my mobile device so right now i have my own webcam that i'm leveraging right here so it's actually putting the name of my webcam right here but i can switch i can switch to a different camera if i have additional devices connected and the camera control will change its behavior it will change its experience and the output of this available devices is actually a table if i open this table right here you see i have ids and i have the names of my device these ids are basically the camera that is currently in action currently my camera control is on the camera zero that's why it's on my webcam so if i switch this to one it will head over to the camera on my laptop which is actually facing down right now so you see it change the camera so basically it can pick the camera depending upon the id number of the device that is plugged in right here so these are some of the key properties that you need to be aware of when you are working with the camera control now keeping all the learnings of the camera control in mind let me show you an app that i built leveraging the camera control and using sharepoint as a data source to store the images that i capture from the camera control and these images i will be storing into my sharepoint list as attachments so for example i have an inspection list and i have one of my line items here which says lawn inspection if i open this item i have attachments right here these are those images that i have captured from my camera control so if i select one of this it will go ahead and open up the image that i captured live from my camera control now as part of my app on the home screen i am just displaying a gallery of all the data from my sharepoint list and the image that you see here in the gallery first attachment of that list item and the way i did that is for this gallery control i have an image control right here now the attachments property returns tabular data because i just want a single image to show up on my gallery i have used the first function to just grab the first attachment and then i just use the dot value function and it will place the first attached image to that gallery item if i preview my app i can go ahead and select an item it will take me to the form displaying all the data associated with that item and right here at the bottom i have a gallery that is showcasing all the images which are basically those attachments for this specific item now i will go ahead and create a new inspection item i will inspect my keyboard so i've just gone ahead and filled certain details about the inspection i'm inspecting it today and i've just put in some sample data for the site address city state and zip now next i would like to add pictures using the camera control so if i select this it takes me to a screen where i have that same camera control option and i can just click on it and take pictures now i've just placed my camera here on my keyboard so let's say i'm doing an inspection of this keyboard i'm gonna just make a few selections all right just taken three pictures of this keyboard once i'm done with this i'm gonna hit back so all my three pictures are captured and i can go ahead and click submit and this will now submit the data to my data source which in my case is my sharepoint list and here again it's showing me that first image in the gallery and if i select this item right here at the bottom i can see all those three images that i captured if i head over to my sharepoint list i see my keyboard line item right here and as attachments i have all my images now if you've ever worked with the camera control before the pictures that you capture if you want to post that to your data source you would have to leverage flow pass your collection of images as json to flow and then loop through all those items and start adding it as attachments however in this example that i'm showcasing if i head over to data sources or the connections you will see that i have no connection to power automate whatsoever so i am not using power automate but i am still able to upload those images as attachments to my sharepoint list so first step is when i'm creating a record so when the user clicks on the plus icon the formula that i'm leveraging here is first i'm clearing a collection of images reset form set the mode of the form to new and navigate the user to the inspection screen so when i click this it takes me to the inspection form screen wherein the form now is set to new mode and the user can create a new record now when the user clicks on the add photos icon right here it will just navigate the user to the inspection photos screen and as part of this screen i have my camera control for the on select property of my camera control the first step is i'm setting a variable and i'm using the good function which basically generates a random good on the fly i am then adding data to a collection of images and for that i am using a record that has the following three properties now why do i use these three properties i'll explain shortly the property names have to be as follows display name id and value for the display name and the id property i'm leveraging that variable which has the good and then i'm appending the extension of my file name which in my case here is dot jpg so i'm setting the display name i'm setting the id and then i have a property called value and in this is where i place the photo which is the picture that is captured by the camera control so now that i have my on select function defined here the moment i preview my app and as i start clicking or selecting the camera control it's taking that picture and adding it to that collection and right here at the bottom i have a gallery which is basically showing the data from that collection very similar to what i showcased earlier when i was going through the camera control the only difference here is that when i'm adding data to the collection i'm adding that data in a particular format i've also given the user an option here to delete an item from that collection of required and on select of that icon i'm using the remove if function to remove it from the collection of images if the display name matches the display name of the item in the gallery so once these pictures are captured when the user clicks on the back button it takes the user back to the main form screen now in this screen if you observe at the bottom i have this label here that says add photos and it gives the count of the number of photos well that count i'm grabbing directly from that collection of images now how am i adding that collection of images directly to my sharepoint list item attachments well for that in my form control i have my data card of attachments and this data card of attachments the visibility is set to false so the user does not even realize that those images are actually going in as attachments if i change the property of this data card to true and if i preview my app if i scroll down now you will see that in the attachment section i have the data that's present in that collection so those images are directly being applied here as attachments for the attachments data card if you look at the default property this is for the data card the default property is that same collection and there is also another property for the data card called update even that property i have set it as that same collection that means as more and more images get added to that collection automatically all those images would be added right here as attachments now bear in mind that the attachment control has specific limitations if we look at certain properties here maximum number of attachments that are allowed as part of this control max attachment size these can be increased however if you read the documentation around the attachment control there are limits you can upload files only if they are 50 megs or smaller there are limitations that you need to be aware of so the attachment data card here is what makes it possible for me not to leverage flow to post my data to my sharepoint list item and the key to understand is that the attachment control expects the files that you add to this control to have a specific schema and that schema is exactly what i leveraged for adding the photos so when i go to add pictures the on select function this is the schema that it expects it expects a schema that has the display name the id and the value and that's the reason why i built that schema into my collection so that it works with the attachment control and the reason why i leveraged good was because i wanted to keep the name of my attachment files or my images in this case unique and back to my home page when the user selects a specific record so let's say i pick the home inspection record i can see all my data right here at the bottom i have this gallery that is basically showing the data from that collection of images and how did i load that collection now for an existing item is so when the user selects this button to navigate to the viewform experience right here is where i am loading that collection again and that collection i am loading directly from this item.attachment because the schema of that collection matches the schema of my attachments so once i have my collection loaded i'm setting a variable which maintains the context of the item that the user has selected and i then reset my form set it in view mode and navigate the user so when the user makes a selection here i am with all that data with the collection preloaded and you can see them right here in the attachments as well for the attachment data card i can always go ahead and hide this and when the user clicks on edit to edit the form i just change the mode of the form to edit my collection is already loaded with those three images and now if i click on the camera control i can go ahead and take additional pictures and associate them with my list item now right here i'm projecting my mobile device i have logged in to my powerapps app on my mobile device i will launch my inspection app here are all the inspections i can see them right here i can select an existing record i can scroll down i can look at all the images that were captured i can add additional images in this case i will go ahead and create a brand new record so i'll click on the plus icon add some sample data and now go to add photos this will now open the camera control on my mobile device and right here i will just go ahead and grab a few images of the laptop that i am inspecting once i'm done with this i will click on back i have my three photos i will click on submit and all of this data now will go to the sharepoint list item as attachments so right there at the bottom is my laptop item if i select that i can go ahead and look at all the images that i captured right here if you enjoyed this video then do like comment and subscribe to my youtube channel and don't forget to hit the bell icon so that whenever i upload my new video you get notified about it thank you so much for watching

Channel: Reza Dorrani

Views: 22,188

Rating: 4.9918199 out of 5

Keywords: powerapps save photos to sharepoint list, powerapps tutorial, powerapps upload photo to sharepoint, powerapps upload image to sharepoint, powerapps save image to sharepoint, powerapps save picture to sharepoint, powerapps save data to sharepoint, powerapps camera sharepoint list, powerapps camera save to sharepoint, powerapps save image to sharepoint list, powerapps picture to sharepoint list, powerapps picture to sharepoint, powerapps camera, power apps, powerapps, SharePoint

Id: iW9dpDntKrY

Length: 18min 18sec (1098 seconds)

Published: Tue Apr 13 2021