Getting Started

Microsoft’s PowerApps platform is a powerful tool which can enable your business to accomplish many tasks remotely through mobile devices. The ability to create and submit content on the go streamlines many processes, which previously may have been done back at the office. The application allows for fast development and ease of implementation as it integrates with Microsoft’s library of online applications.

Recently one of our clients had a requirement to submit images taken by a mobile device to a SharePoint library. This seemingly simple task, actually appeared quite complicated once I dug into the steps required. I began doing my research on forums, blogs and threads. Just as with any new application, PowerApps is constantly evolving and online support content quickly becomes out-dated and obsolete.

What I Found

I stumbled upon a tutorial video for saving images from PowerApps to SharePoint created by Paul Culmsee’s. Now this video could likely be all that you need to get started; however, there were a few things I learned along the way that might make things a bit easier for you as well. I studied that video many times, followed the instructions exactly, but still could not get my application to work.

Beyond the trial and error I had to undergo to finally get the application working, my requirements were slightly different than just saving images to SharePoint. I needed the photos to be linked to a master record (list item) and then through the application, be able to pull those images from SharePoint back into the app. This is where I had to do a bit more digging.

SharePoint

PowerApps

Flow

What You’ll Need

The basic setup required for saving images to SharePoint from PowerApps is…

  • A SharePoint List to connect PowerApps

  • A SharePoint library to save the images from PowerApps

  • A text editor or script editor such as Notepad++

  • PowerApps mobile application on a mobile device (for testing)

Let’s Begin

I’m only going to cover my requirements gaps and the mistakes I made while following this tutorial video I mentioned earlier. The video covers this process in a great amount of detail so I see no need to go through it all. If you have already seen the video, I’m going to pick up around the editing of the Swagger file.

Editing the Swagger file

Up until the editing of the Swagger file, everything was super easy to follow thanks to Paul Culmsee’s excellent instructions. The file gets created using an online tool called apigee. At this point, you should have created your Flow and copied the HTTP Request action’s URL. That URL contains everything you need to populate the Swagger file.

Personally, when I completed the wizard on apigee and created my Swagger file, all of my parameters were blank. Not sure why, but thanks the to the URL copied from the HTTP Request action, I was able to open the Swagger file up in Notepad ++ and make the updates. Each parameter is called out in the query string, and those values will be used to set the default property of each parameter.

Updating “parameters”

  • api-version: should be something like “2016-06-01”

  • sp: should be similar to “/triggers/manual/run”

  • sv: should probably be “1.0”

  • sig: is a series of alpha-numeric characters and special characters which will be unique

Updating the “host” property

There have been many threads online regarding the “:443” appended to the host URL when copied from Flow. Users reported failing Swagger files due to authentication issues. The most recent solution for this it to just remove the “:443” from your Swagger file in the “host” property.

Updating “consumes” and “produces”

These two lines of code were probably what took me the longest to figure out. My Swagger file generated the “produces” property and set it to null. While this is correct JSON, it doesn’t work for PowerApps. This property needs to be set to an empty array. Additionally, my Swagger file was missing the “consumes” property which should also be set to an empty array (consumes may not be necessary in all cases).

"consumes": [],
"produces": [],

Adding a Master Record Property to the Swagger file

A SharePoint column will need to be created to store the Master Record ID. The ID can be passed into the HTTP Request using additional parameters in the Swagger file. Properties can be added by copying the format for filename. See the example below:

{
  "name": "masterRecordId",
  "in": "query",
  "type": "string",
  "description": "item id of the linked list item",
  "required": true
}

Follow the URL – forward slashes

The Swagger file breaks down the URL which was copied from your HTTP Request action in Flow. Each portion of the URL is used in a cascading format down though the various properties in the file. Keep track of the forward slashes, one missed slash will produce errors when trying to use the Swagger file. The full URL is broken down into four (4) properties.

  • “host”: the root without Hypertext Transfer Protocol

  • “basePath”: path after first forward slash (include the slash) – typically “/workflows”

  • “schemes”: Hypertext Transfer Protocol – “http” or “https”

  • “paths”: the remaining path starting with a forward slash – usually something like this “/randomNumbersAndLetters/triggers/manual/paths/invoke”

Editing the Flow

The Flow outlined in the tutorial video works great for completing the task of saving images to SharePoint. However, there are a couple of steps that I took in order to link the images to my master record in the SharePoint list. Secondly, in order to display those images back in PowerApps, on a mobile device, there are some workarounds required.

Creating a Master Record column

The easiest solution for linking a master record to the images saved to SharePoint, is to create a Single line of text field and name it Master Record ID. The more elegant solution, is to create a Lookup column which allows for metadata to be pulled in from the master record. Either approach works, however, in PowerApps there is currently a delegation issue when using the Filter() function on a Lookup column, so a Single line of text field works great.

Updating the Flow to set the Master Record column

This task is simple, the Flow can be updated to first use the Create file action, then use the Update file properties action to set the Master Record ID. The masterRecordId property in the Swagger file will be the value of that column. The only catch is, if you decided to use a Lookup column, you will need to use the int(…) expression to convert the masterRecordId to an integer.

THE PICTURE COLUMN

This was probably the biggest work-around in the whole implementation. At this time, PowerApps does not support displaying images from a SharePoint library on a mobile device. It will work great while previewing in PowerApps studio, but fails to display the picture while on a mobile device. Why? Well it seems to be due to security and authentication gaps. Microsoft developed a patch of sorts, while you cannot display the “images” you can display a “link” to the image in the form of a Hyperlink/Picture Column.

To get around this issues, create a Hyperlink/Picture Column in your images library. This column will essentially store a link it itself. I’ve seen other solutions online that will roll-up images from SharePoint in a single list, but that adds a third list to your application and can be messy. Just adding the column in the image library itself works best. Format the URL as a Hyperlink, we will come back and change that later.

Updating Flow to set the Hyperlink/Picture column

Once the column is created and formatted as a Hyperlink, the Update file properties action can be used to set the column. The results of a previous Get file properties action will provide the value for the Hyperlink column. Use the dynamic content property named “Link to item”. Once all of the properties are set, update the Flow and close it.

Note: the Hyperlink/Picture column will not appear if the URL is formatted as a Picture. That is why it must be set to Hyperlink first, then later changed back to Picture. The Flow will continue to work after making the change.

Displaying the images in PowerApps

The final step is to retrieve the images saved to SharePoint in PowerApps, when editing a master record (list item). Add the data connection to the images library and Filter() on the Master Record ID column. Then return to the image library in SharePoint, and change the Hyperlink/Picture column to Picture. This will allow the images to display properly once the gallery or image control is linked to the data connection using the Hyperlink/Picture column.

Wrap Up

I hope these additional steps were helpful in implementing your app. These were the biggest hurdles I had to overcome to meet my requirements and if you had similar issues while implementing this solution I hope this saved you some time. Please share your work-arounds or fixes below!