Monday, March 19, 2018

A workaround for saving hi-res photos from PowerApps to SharePoint

Saving photos or images from PowerApps to SharePoint is not easy, but there are workarounds using for example Flow to get this to work as I’ve written about previously. The caveat with this approach is that when using the camera control you won’t get full resolution on the images you take, but a scaled down version – and adding Flow to the mix increased complexity.

With the recent release of supporting attachments with SharePoint lists in PowerApps it’s now possible to get those high resolution photos into SharePoint. But, it’s not straight forward. Even though it’s possible you should think it through before going full on production with this.

Note: This post is written based on testing on iOS.

Uploading photos is a common ask when using PowerApps on mobile device. You might create a reporting application of sorts which supports adding photos as documentation. My first thought was to utilize the new attachment support, pick the camera as input and be done with it. Turns out I should stop believing in fairy tales when a feature is just released :). When tapping the “Attach file” link, you get a dialog to browse your iCloud Drive, not an option to tap into the camera. Which makes sense as you need an attachment filename. This means we cannot use the default add attachment functionality.

20180318_124151000_iOS

What I came up with was using the “Add picture” control with a custom collection, and then binding the forms attachment control value to this collection. You also need to reset the form after you modify the collection in order for the change to be picked up in the control (which is needed for it top be submitted). The reset has a timing issue, so I had to add a timer control which reset’s the form every 1 second. It’s all in a days works of duct tape.

Oh well.. let’s build the application, and you will see for yourself.

Get the sample application!

https://1drv.ms/u/s!AsQPRl4COMyeooI3lfgbLKucjUuw1g

Step 1 – Create a SharePoint list

First you need to create a SharePoint list supporting attachments as your data store. You can add any number of columns as needed for storing captured data, but I’ll stick with title only for this sample.

Step 2 – Create the App

As I’ll be testing this on my phone I picked a blank phone layout. For the screen’s OnVisible event add the following formula to clear our image collection on start or if you have a multiple screen logic. Adapt as you see fit. (See my sample application for more details).

Clear(ImageCollection)

From the View tab I click data sources and pick my “Attachments” SharePoint list.

image

From the Insert tab add an Edit form and bind it to the Attachments data source. I renamed my form from Form1 to AttachmentForm for readability.

image

De-select all list fields except Title and Attachments.

image

Next change the default mode of the form from Edit to New.

image

Add an image control

Outside of the Form, add an “Add picture” control which will be used to capture images using your device camera.

image

Next change the formula for the image control group’s OnSelect event to:

Collect(ImageCollection,{DisplayName:Concatenate("image",Text(CountRows(ImageCollection)+1),".jpg"),Value:UploadedImage1.Image,AbsoluteUri:"",Id:"00000000-0000-0000-0000-000000000000"})

image

What happens is that we add a row for the attachments with the fields:

  • DisplayName – filename of the attachment, must be unique
  • Value – binary data of the image
  • AbsoluteUri – blank, will be set by SharePoint
  • Id – A guid, will be set by SharePoint

The first part generates a unique filename for the attachment imageX.jpg, where X is the attachment number starting from 1, and we set the value to point to the AbsoluteUri property of the image control. Internally this will point to the binary blob. (I figured out the data format with some playing around as it’s not documented).

Select the AddMediaButton1 control, and set ChangePictureText to the same text as the default text as we’ll be supporting multiple images:

image

Binding the attachment list to the custom collection

Select the data card for the attachments and unlock it.

image

After unlocking the control, change the Items property to be bound to ImageCollection instead of Parent.Default.

image

By default the control accepts 6 attachments which you can change. The max attachment size of 10mb is a hard limit in the current version, so this should be left as is.

Next unlock the title field, and set the default value to a text of your choice.

image

This change might seem weird as all SharePoint items will have the same title. Since the title field is required, and in the next step you will be adding a reset form timer to overcome a timing issue, this is a workaround to make sure the item has a title. You can re-work in a couple of different ways:

  1. Make title non-mandatory, and hide it from the appå
  2. Add a custom title field which you bind to a context variable, and then bind the above control to that context variable.
  3. (Figure out another way to fix the timing issue to update the image collection)

Adding a timer to refresh the attachment list

On the screen canvas add a timer control, and configure the properties as follows:

  • Duration: 1000
  • AutoStart: true
  • Repeat: true
  • OnTimerEnd: ResetForm(AttachmentForm) <- or any name you have on your form

Without this timer there’s a timing issue for when the collection updates and binding of ImagesCollection to the attachment control in the app.

I tried adding it before submit or after the image was taken, but ran into issues where it wouldn’t pick up all photos taken.

Adding a clear images button and submit button

Add a button named Clear with the following formula for OnSelect:

Clear(ImageCollection)

Add a button named Submit with the following formular for OnSelect:

SubmitForm(AttachmentForm);Clear(ImageCollection)

Testing the app

You should now have an app looking similar to the image below, with some tidying up.

image

Here’s a short video testing the app on my iPhone, adding two photos.

Heading over to the SharePoint list I now have one list entry with two attachments.

image

Next steps

To make the app more polished you can:

  • Add a start screen to your app
  • Hide the timer control
  • Hide the attachment card
  • Add an image gallery showing the photos you take binding it to ImagesCollection
  • Create a Microsoft Flow which takes each attachment and saves to a separate document library

20180318_123426000_iOS

Summary

Although saving a collection of native camera images from PowerApps to SharePoint is still not super simple, it is doable, and you don’t need Microsoft Flow. We also see that PowerApps is changing and new functionality is being added – so maybe in some near or distant future we can use a device camera to capture native hi resolution images in PowerApps, and easily save them to SharePoint, either directly or via a not too complex Flow.

Happy PowerApping!

2 comments:

  1. Mikael, thank you for this great post!
    I've faced with one problem: I cannot use timer for form's reset as It delete all info in other fields. Can you advise a workaround?

    ReplyDelete
    Replies
    1. You can use other backing fields instead for your metadata and hide the form fields. Then set the form fields before submitting. Which is one solution. Or if you can work out the timing issue, and not reset.

      Delete