Microsoft Powerapps to send images as email attachment or saving photos to SharePoint

Microsoft has announced the retirement of InfoPath in late 2016 and ever since then everyone using InfoPath is concerned about finding an InfoPath replacement. Microsoft has provided guidance that the successor to InfoPath will be PowerApps.

So, I think it the right time to leave our old friend InfoPath behind and move ahead with PowerAPPs(next big thing). To be honest, I started liking it. We started creating basic app in which the user fills in the form from mobile devices to get SharePoint list updated etc.

All going well 🙂 . So we gradually started adding more interactive controls to our PowerAPPS. I added a camera control and BOOM❗a Roadblock we cannot save an images to SharePoint online or send it as an email. Yes, that’s basic functionality but it does not work. So, I started looking for workarounds, such as using the Add Images using Excel, but they were too awkward.

I needed a solution which is NOCODE just PowerAPPS, FLOW and SharePoint/Outlook.


ScenarioAutomating the Spare-Part ordering Progress.

  • User uses this Mobile phone to place the order, including the Image of the Spare part.
  • On-Order placement, an order is placed to the vendor with the sample image of the spare part.

To achieve the above we need SharePoint Online, FLOW and PowerAPP subscription. So without wasting more time let’s get into the Meat and Potatoes 😀.


Step 1:  Setting up SharePoint List.

For this demo we need, two columns.

  1. “Title”: “Single Line for Text”, to Store the Name of our Spare Part.
  2. “Image”: “Multi-Line of Text”, to Store the base64 encoded image content.

SharePointList

Note: Please set the “Image”: “Multi-Line of Text”, type to “Plain text”.

  1. Add your SharePoint List as Data source.

Data Source


Step 2: Building our PowerAPP.

Our Final APP will look like the screenshot below.

PowerAPP

 

 

 

 

 

 

 

 

Click on the 1. Camera Control and set the

  • OnSelect Property to:

ClearCollect(CameraImage,Camera1.Photo)

  • CameraImage is the name of the Collection and Camera1.Photo in the name of the Control.
  • When you Tap the Camera Control it will grab the photo, and store it in a collection named CameraImage. Note: I’m using ClearCollect, the collection will always be cleared first, having one image only in the collection

Click on the Camera Control and set the Tooltip property to “Tap here!! to click”

For 2. Text Input

  • I have not changed any property.

Click 3. Image Control and set the,

  • Image property to Camera1.photo. Camera1 is the name of the camera control.Imagecontrol

Finally Click on 4. Button and set the

  • OnSelect Property to :

 Patch(SparePart,Defaults(SparePart),{Title:TextInput1.Text,Image:First(CameraImage).Url}) ; Exit()

  • We will Patch the data to SparePart SharePoint List and Title, Image is the name of the Column for the List that we created in Step 1.
  • Exit(), The Exit function exits the currently running app. The user is returned to the list of apps, where they can select another app to open.

ButtonControl

Our PowerAPP is ready. So if we run the PowerAPP we will see the following data in our SharePoint SparePart List.

base64spo

Now we have the Image data in the base64 encoded format but it is of No-use(Not really!!!), lets create a FLOW and attach it to the SparePart SharePoint List and attach covert the base64 image string to binary format.


Step 3: Creating an FLOW.

Flow1

Step 3.1When an item is added in the FLOW.

Flow1.1

Step 3.2:

  • Paste the function below in the “Compose action”

“replace(triggerBody()?[‘Image’],’data:image/jpeg;base64,/’,’/’)”

  • This will replace the ‘data:image/jpeg;base64,/’ with ‘/’, and we will have the correctly formatted base64 string.

Flow1.2

Step 3.3:

  • Paste the function below in the “Compose action”

“base64ToBinary(outputs(‘Replace’))”

  • This will convert the base64 content that we formatted in Step2 to Binary.

Flow1.3

Step 4.1 (Send an email): Configure the send to email action with reference to Screenshot below.

Sendemail

 

Step 4.2(Create a file in SharePoint Document Library):Configure the action with reference to screenshot below.

Flow1.5

All done :-). So log into PowerApps on the web or mobile device(I have tested the Powerapp with iphone, Android device), open your app Click the Photo.

Output of Step 4.1

email

Output of Step 4.2

PowerAPP

I hope that this post has helped you 🙂 to better understand how PowerAPP and FLOW components works together to create Awesome Apps and enhance/build on the ideas  💡that I have presented here.

14 thoughts on “Microsoft Powerapps to send images as email attachment or saving photos to SharePoint

  1. Sigh – I am having a similar issue. I get a broken image also. I took the Base64 string and tried to convert with an online tool – It fails with following error message ( Invalid mime type: application/octet-stream). Any thoughts?

    Like

    1. I tried the exact steps mentioned in the article and always get correct result “No Broken” images.

      Please check if the data is Patched correctly to SharePoint Online. i.e. Copy the data from the “Image column” and paste it any online tool which can convert “Base64 to Image”.
      I used the first link that came up in Google search (“https://www.google.co.in/search?q=convert+base64+to+image&oq=convert+base&aqs=chrome.2.69i57j69i60j0l2j69i60l2.4475j0j4&sourceid=chrome&ie=UTF-8”)

      Do you get image?

      Like

      1. I figured out my problem.

        In the 2nd phase you need to name the (compose) process as Replace – That fixed it!

        Did you realize the email step shows the incorrect image in your walkthrough?

        Like

  2. >>In the 2nd phase you need to name the (compose) process as Replace – That fixed it!
    Yes, you need to be careful while naming the actions.

    >>Did you realize the email step shows the incorrect image in your walkthrough?
    Thanks for pointing it out 🙂 I have updated the Image

    Like

      1. I have managed to reach Paul’s step following his guide..but what I need to achieve now is to concatenate multiple image (blob or base64) data together and join them up as a single (long?) jpg to send out via email..

        Like

  3. I have an error in Flow when trying to run this thing.

    It tells me that the type of the first parameter of the replace function is “null” instead of “string”.

    Any idea guys ?

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s