What You’ll Need
The basic setup required for saving images to SharePoint from PowerApps is…
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 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).
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:
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.
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.
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!