Sending Image from Canvas PowerApps to SharePoint Document Library using Flows

One of the most common requirements is to upload images to SharePoint using PowerApps. From my learning from various sources, I’ll try to “demystify” my explanation to send/upload an image to SharePoint Document Library using Flows on my Canvas PowerApp.

Ingredients

Assuming you have the following things already  in place in PowerApps as well as in SharePoint

  1. PowerApps’ Camera/Image control and a Submit button. In my case, the image above is a camera so that I capture the image I want and the image below is the Image control to show me what I clicked.
    powerApp
  2. A SharePoint Document Library to record, say, Incidents.
    spDocLibrary
  3. We will get to the Submit button on the PowerApp once we create our Flow.

Flow

Let’s create a Flow to pick the Image from your PowerApp, convert it to binary and send it to the SharePoint Document Folder location called Incidents.

  1. Since we want to trigger the Flow from the PowerApps itself, we will select the trigger of the Flow as ‘From PowerApps’ and hit Create
    createFlow
  2. Once your Flow is ready, leave the first step of PowerApps because that’s the trigger. Add Step to create a SharePoint file and fill in the details of the Document Library you have created.
    createSPFile
  3. Fill in the FileContent as above. You’ll need this to be converted in the intermediate step after this.
  4. Now, you’ll need to add an additional step in between PowerApps and the Create SP File step as below. It will be a Compose action.
    addAction
  5. In Compose action, under Expression, select dataUriToBinary expression and make sure you open the bracket as well.
    dataUriToBinary
    toolTipHidden
  6. Now, go back to the Dynamic Content section and select the CreateFile_FileContent to complete the formula.
    fileContentAvailable
    completedFormula
  7. Click OK on the screenshot above and the formula should be set.
  8. Now, replace the File Content section to take in the Output of the Compose step.
    outputRecorded
  9. Save your Flow and your complete Flow should look like this.
    CompleteFlow
  10. I’m naming my Flow as ‘IncidentFlow’ so that I can identify it.
    incidentFlow

Adding the Flow to Submit button

Going back to the PowerApp, let’s Run this Flow on the selection of the Submit button and pass the image.

  1. Now, select the Submit button, and on the Formula bar, add the Flow you created, I named it IncidentRun. Select the same so that the Formula comes as IncidentRun.Run( for you to pass on the image.
    Now, pass the latest image on the collection i.e. the same image which is being displayed in the image control below.

    runFlowFormula

 

Running the App

I just ran the app on the desktop itself, you could do it from your phone too!
So I clicked on the Camera when I was ready, the image appeared in the image control and I that was what I wanted to upload. So I clicked on Submit button.
hittingSubmit

The flow was successful
FlowSuccessful

And my image was in SharePoint too!
imageUploaded

I know it is a lengthy post but I tried to summarize as much as possible. Make sure you have a way to uniquely name each file or else, the same file will be overridden.

Thank you!

 

Advertisements

Create your first PowerApp! Connect to SharePoint Online List

PowerPlatform is the next big thing in

PowerApps comes with several Dynamics 365 licenses and make sure you have been assigned one as well as below –
license

Navigate to https://web.powerapps.com/ to go to the Admin Center and here you can simply start working on your first app.

In this scenario, I want to be able to read from my SharePoint Online list and make decisions based on what data is in the List
spList

Build your PowerApp from data

  1. Among the options to create your app from either Canvas or Model-driven, I’ll chose to build one based on data which is a Canvas type of application.
    startFromData
  2. Now, I’ll chose SharePoint’s Phone layout since I want to connect to my SharePoint Online site to be able to read from my lists
    selectSPApp
  3. Now, since I already have selected SharePoint connector, I’ll be creating a new connection on the next page.
    createSPConnection
    Since this example is for SharePoint Online, I’ll select Connect directly (cloud services).
  4. Now, since I already had accessed the SharePoint Site, it appears in my list. You can either connect to a new Site from + New Connection button on the left-hand side or enter a new SharePoint Site in the URL and click GO. Or even select a recently visited one like I did –
    selectSPSiteFromRecent
  5. Then, choose your list
    chooseList
  6. And it takes a few moments to build out your App. And when it’s ready to be worked on, here’s what you get.
    appIsReady

Understanding your App Designer space

Won’t be covering much details on what each tool does, but wanted to share how things are placed –

  1. On the left-hand side, the App pages/components are divided into three main sections. (Obviously, you are free to add and modify more screens as needed)
    defaultTreeView
  2. You can add several controls on these screens
    insertTab
  3. And these controls/components can be adjusted from the right-hand side pane as below
    customizeProperties
  4. That’s basically the most of the App basics you need to know at this point. I’ll post more posts on that later. 🙂

Publishing Your App & Share

Presuming that your app is now ready to go, her’s what you can do in order to publish

  1. Navigate to File, give a suitable Name to your App.
    appName
  2. Move over to Save and Save your App.
    saveApp
  3. Once Saved, Share the App.
    shareThisApp
  4. Once you click on Share, you can get to Add users who will have access to this App and you can chose their permission level.
    shareWithUser
    permissionSelection

Running your first PowerApp

Assuming you have installed PowerApps on your device and logged in with your credentials, you’ll see the App as below

And you can start working on your App already

Hope this was quick. And then there’s a tremendous lot to be done with PowerApps and leveraging the PowerPlatform!

CDS For Apps Analytics instead of Organization Insights. Power Platform Admin Center

Now, there’s a new way of looking at Organization Insights. You would no longer to maintain a solution in D365 to look at your D365 Organization Insights.

Guess what, Organization Insights is no longer on AppSource now. I quickly searched it up and it wasn’t there.

It’s all available on https://admin.powerplatform.microsoft.com

Currently, the admin center is in Preview.

CDS For Apps analytics

  1. All your Organization Insights are available on the Common Data Service for Apps section as shown below –
    adminCenterView
  2. It has all the same info as it was in the Organization Insights.
    insights
  3. Moreover, you can download the data as well.
    downloadData
  4. Gives you a CSV of the selected type to look at the data.

Similar Analytics available for Microsoft Flow and PowerApps too.

Bye Bye, Organization Insights!