Frustrated, by Power App Image to SharePoint
Building a Power App image to SharePoint app isn’t easy. In fact, it’s a real struggle.
Until you know how. This article will show step by step how. Minimal text, illustrative images remove ambiguities. Training designed to get you building your Power App in the minimum about of time.
Power Apps Photo to SharePoint.
Lab Time: 60 minutes
Lab Overview: This lab objective is to show you how to create a Power App image capture app and submit your image to SharePoint. The training demonstrates how to build a Power App image app. How to construct a Flow. Then how to wire up Power App to Flow and submit your image to SharePoint.
Power apps have two image controls.
Exercise 1: Building your app
- Add picture
Option one, uses a device built in camera. However, the image will be of a lower quality. The reason the image data utilises URL data format.
Option two, enables you to select a picture stored on your device alternatively the devices camera. This option enables you to utilise binary data format. What this means is your app has access to your camera devices high quality options.
Option two is the most popular choice. Choosing ‘add picture’ requires Flow. The reason being Power Apps doesn’t have any methods for transforming one data format into another. Flow takes your power App image and outputs your image to SharePoint Online.
Create Power App Image capture.
Open Microsoft Power App click here…
Create a Canvas Power App see image below.
Choose phone layout.
Select Insert>Media>Add Picture
See image below.
Next select and add a button see image below.
Re-position the button as shown in the image below.
Exercise 2: Build the Flow
Next we build the ‘Flow’ click here…
Select ‘My flows’ then ‘+ New’ and in the drop-down sub menu choose ‘Instant – from blank’ see image below.
Wizard splash window opens.
- Name your ‘Flow’ in the example the ‘Flow’ is named (PowerApps FileUploadToSPOTest).
- Select ‘From Flow Trigger.’
- Click ‘Create.’
See image below.
In the ‘Flow’ window click the three dots. In the drop-down sub-menu choose ‘Delete’ see image below.
When the manual trigger is deleted the following option appears.
- Type ‘Power’ you needn’t type ‘PowerApps.’
- Under the ‘Triggers’ option, click ‘PowerApps.’
See image below.
Under the ‘PowerApp’ trigger click ‘+ New Step’ see image below.
Under ‘Actions’ click ‘Condition Control.’
A ‘Condition’ option opens see image below.
Under the ‘Condition’ type 1 and in the third box ‘Choose a value’ type 2. Clearly one is never going to equal to two. What this means is the ‘Yes’ condition will never be actioned see image below.
Next under ‘If yes’ click the ‘Add an action’ and select ‘Office 365 Outlook’ see image below.
Under ‘Actions’ select ‘Send and email Office 365 Outlook.’
Email requirements are required. While an email will never be sent to be able to make this hack function this step remains a necessity for now. Microsoft have stated a native connector is in development which should remove this necessity.
- Type an email address (doesn’t have to be an active address)
a. Subject type something for example (Mail will never be sent).
b. Body description type something for example (Silly to fill this in etc.)
- Click ‘Show advanced options.’
Place your mouse cursor in the ‘Attachments Name -1 box.’ Then click ‘Ask in PowerApps.’
Note: ‘Sendanemail_AttachmentsContent’ and ‘Sendanemail_AttachmentsName.’ Obviously in the ‘Attachments Name – 1’ box you want to add ‘Sendanemail_AttachmentsName.’ In ‘Attachments Content – 1’ add ‘Sendanemail_AttachmentsContent.’
Dynamic content options Missing
Assuming you don’t see both ‘Sendanemail_AttachmentsName’ and ‘Sendanemail_AttachmentsContent’ add what ever option appears. Next click ‘Ask in Power Apps’ again. Both options should be listed. Simply remove the incorrect option and replace with the correct entry.
Next configure the ‘If No’ click ‘Add action.’
see image below.
Select under ‘Actions’ ‘Create a file’ see image below.
Note: Your SharePoint library destination doesn’t require anything special for this exercise. Name and defaults are acceptable see image below.
To add your SharePoint library you should see the image below options.
- Add your SharePoint ‘Site Address.'
- ‘Folder Path’ the SharePoint library you want to store the image.
Place your mouse cursor in ‘File name’ and select
4. 'Sendanemail_AttachmentsContent’ see image below.
Final Flow trigger. Click ‘Add an action’ in the search box type respond. Under the ‘Actions’ tab you should see ‘Respond to PowerApps’ select this option.
Click ‘Add an output’ see image below.
Click ‘Text’ see image below.
Type in ‘Enter title’ (see image below) ‘FileUrl.’ In the ’enter a value to respond’ place your mouse cursor.
- Scroll down
- Select ‘Path’
- Click ‘Save’ see image below.
See completed Flow example image below.
For a production Flow – name all your Flow ‘Steps’ to something more meaningful. If you or someone else return to the Flow at a later date; a descriptive title may help you or someone else to better understand the Flow, logic process.
Exercise 3: Add flow to PowerApp
Return to ‘Power Apps.’ Select the ‘button.’
- Select ‘Action’ from the menu.
- In the ribbon select ‘Flows.’
See image below.
3. Select your ‘Flow, PowerApps FileUploadToSPO’ in the example PowerApps FileUploadToSPO name is to long too display.
4. If you click the three dots a submenu ‘Edit’ appears
a. Click ‘Edit.’
b. A new window opens.
c. Full ‘Flow’ name can be viewed ‘PowerApps FileUploadToSPO’ see image below.
Click to select your ‘Flow’ see image below.
Once your ‘Flow’ is added you should see the following:
- ‘Flows’ associated with ‘Button1’ ‘PowerApps FileUploadToSPO’ is listed.
- The parameters need to be completed in the formula bar (fx).
For the fx parameters formula type
Click the cross to close the ‘Data’ panel.
Note: “Beverage.jpg” you can type whatever you like.
Copying and pasting code may result in errors. Recommendation copy and paste into Notepad or Notepad ++ be aware quotes may need to removed and retyped.
Using the device you created the app on, test the app by clicking ‘Play.’
Click the ‘Tap of click to add picture.’
Note: For this I’m using a desktop PC. This will open ‘Explorer’ enabling me to navigate and select an image. If I were using a device with a camera, I would have the option to use the camera.
- Select and image in the example ‘beverage.jpg’ is selected.
- Name of image.
- Click ‘Open’ to add image to Power App.
See image below.
Click upload see image below.
You should see the dots running across the screen see image below.
Navigate to your SharePoint site. Assuming all went well you should see the image listed in the example ‘Beverage.jpg’ see image below.
Success see image below.
This concludes the lab exercise.
CONGRATULATIONS. YOU HAVE NOW COMPLETED THE FIRST LAB IN THIS COURSE AND GONE THROUGH THE EXPERIENCE OF CREATING A SIMPLE APP.
If there is demand for further presentations, I will expand upon this presentation by adding additional Power App capabilities for example automated file naming, uploading multiple images, description and audit meta data.
In this lab you learnt how to create a simple MS Power App using ‘add picture control’ plus ‘button’ to send the image to ‘Flow.’
You learnt how to configure ‘Flow,’ to use a ‘Power App connector,’ add a ‘condition’ adding ‘Outlook’ to send email and using ‘attachments’ to send the output to ‘SharePoint online (SPO).’
Finally, how to add your ‘Flow’ to ‘Power App’ and test your app to send an image to ‘SPO.’