PowerApps: How to Save Audit App Camera Images as Attachment to SharePoint List

Introduction

Power Apps and SharePoint together form a winning technology combination of spinning up an application in very little time. With SharePoint’s native back-end lists, storing data is quite easy as its well-integrated with Power Apps.

One of the common requirements that we come across is to capture photos and store them in the backend. In case, we want to store the captured image as a file in Document Library, we used to leverage Power Automate that can convert the captured image into a file and save it to the document library.

In this article, we will see how we can save the captured images as attachments to a List Item without using Power Automate.

Scenario

As part of an Auditing requirement, we will be using an application to monitor and Quality Test the works that have been done on the Road or any other repairs done. As part of the inspection, we also have to capture the image of the site and fill in the work details and save the data back to the SharePoint List.

So, we will create a SharePoint List with the below columns and customize the Out of the Box forms to incorporate Image Capturing functionality as well

Background pattern

Description automatically generated with low confidence

Implementation

We can easily update the OOB SharePoint List forms and customize them in Power Apps using the “Customize Forms” option.

Graphical user interface, text, application, email

Description automatically generated

Setting up the UI

We have renamed the fields from a readability and functionality perspective in the left tree view of the Power App. Moreover, we have also updated the SharePoint Form to a 2 column layout and added 2 additional Controls

  • A Button that navigates to the screen where we will use camera control to capture the images of the Inspection.
  • A Gallery (Gallery_ImageCollection) to display the image collections of an inspection
Graphical user interface, application

Description automatically generated

In addition to that we have added an additional screen with the controls:

  • Camera Control to capture the image
  • Gallery to show in real time, the snapped pictures.
  • Delete Icon to delete the snapped pictures, if needed. Graphical user interface, application

Description automatically generated

Camera Control

We will be using the Camera Control to capture the images of Inspection and the images will be added to a collection. The collection will have 3 columns

  • DisplayName
  • Id
  • Value

The reason for creating the collection with this structure is because we will set this collection as the source for the Out of the Box Attachments Column and for it to accept the values, it has to follow the above 3 column schema.

We will also ensure that the Pictures are named in a unique way by getting the current Date and Time and setting it as the Picture Name using the formula.

Set(varPhotoID,
Substitute(Text(Now(),DateTimeFormat.LongDateTime),”:”,”_”)
);

Here we are substituting the Colon in the time with an underscore to avoid the presence of illegal characters in the file name.

We will be adding the above formula in the OnSelect of the Camera Control, once the image ID is generated, we will add the image to the Collection with the expression :

Collect(
colInspectionPhotos,
{
DisplayName: varPhotoID&”.jpg”,
Id:varPhotoID&”.jpg”,
Value:Camera_Inspection.Photo
}
);

As indicated previously, since the Attachments control would expect a 3 Part Value for the image file, we will specify the formatted Photo name in varPhotoID variable to both DisplayName and ID and map the Photo to the Value Parameter.

Graphical user interface, application

Description automatically generated

While testing, clicking on the camera will save it to the collection as:

Graphical user interface, text, application, email

Description automatically generated

Gallery Control

The snapped pictures can be seen in real-time in the Gallery control just below the Camera Control and we will be specifying the Collection in the Items Property of the Gallery.

Graphical user interface, application

Description automatically generated

We have also added a Delete Icon inside the Gallery for deleting individual pictures and have mentioned the below expression in the OnSelect of the Delete Icon.

Remove(colInspectionPhotos,ThisItem)
Graphical user interface, application

Description automatically generated

This completed the screen where we have added the Camera Control for snapping the inspection photos which we can see in real-time and delete them if deemed inappropriate.

Save as Attachment

To save the image collection to the out-of-the-box attachment column, we will go to the Attachment Card of the Home Screen of the SharePoint List and Set the Items Property to Collection value.

Graphical user interface, application, website

Description automatically generated

We will also specify the Collection in the Update property of the Attachments card

Graphical user interface, application, website

Description automatically generated

To complete the flow, add the Navigate action to the Camera Icon in the home screen so that on clicking it, it navigates to the screen with camera control.

Graphical user interface, application, website

Description automatically generated

Testing

Let’s test out the app by creating a new item, which will open up the list Power App as below :

Graphical user interface, application

Description automatically generated

We will click on the camera to add the snaps of the Audit Site which will take us to the screen to capture the images

A screenshot of a phone

Description automatically generated with low confidence

We have captured the image and let’s navigate back to the home screen to add more details about the inspection

Graphical user interface, application

Description automatically generated

Finally, let’s save it which will create an item in the list. If we open the item, we can see that the captured images have been saved as attachments and it is listed with the unique names(Date and Time format) we had assigned to it.

Graphical user interface, application

Description automatically generated

Summary

Thus, we saw how to save the images captured using Camera Control to the SharePoint List as an attachment without the use of Power Automate in between.

Related Articles

Author

Author

Priyaranjan KS is a Modern Workplace Architect primarily focused on developing and architecting solutions around Office 365,Power Platform and Azure.He is also a Microsoft Most Valuable Professional(MVP) and a Microsoft Certified Trainer(MCT)

Latest Articles