This week, I got side-tracked on figuring out how to take pictures from a PowerApps Canvas app and put them into a CRM “model driven” app (The most frustrating part is getting around the terminology).
I started with a Canvas app I was creating to let people in the field work with cases. On the edit form, I wanted to let a user capture a picture and store it with the case for future reference. The Canvas app is fairly straight forward; you select a contact from a gallery, then either open an existing case from a gallery or create case, and then the user will be on an Edit form. I was able to kick-start my development by generating an app from data. I am not going to recount all those steps as there are a bunch of good videos on that already. What I found lacking in the community was a discussion about how to connect pictures with CRM, so I will provide the steps needed here.
Normally on a Canvas app, all the data you want to save in CRM is in the Edit Form, but that will not work for pictures. In order to get pictures to be captured and put into CRM, you need to use Flow. If you have not used Flow before, this is as good a time as any to start because eventually you will need it. And before we can modify our Canvas app, we need to have the Flow created first.
1. First create a Flow with a PowerApps trigger. There is nothing to configure at this step. Behind the scenes, this trigger action will manage all the parameters needed to make our connection with the Canvas app work.
2. Add a Compose Data Operation action, click on the “…” to rename it to “convert picture” (note that this is in lower case).
3. Click in the Inputs field, and in the Expression, paste this:
base64(decodeDataUri(triggerBody()['convertpicture_Inputs']))
This line of code will take your picture and convert it to a format the is acceptable to CRM. This code is case sensitive and depends on the name you provided in step 2 above.
4. Add an action to create a new record in CRM. Here are the values I provided for this example:
You will be prompted to select the instance of CRM you want to connect the Flow with, then you must choose Notes as the Entity because that is how CRM stores all pictures as attachments on notes. For purpose of this example, I have included only a couple fields as parameters – the Document is where the picture is located, and the Regarding is the ID of the case record you are relating it to (it is called “incidents” in the Regarding Type field).
5. For the Regarding field, you will need to click into that field, then click on the PowerApps / See More / Ask in PowerApps and it will create a new field called “Createanewrecor_Regarding” and insert it into that field.
6. Save the flow. Mine was automatically named as “Create a new record”
7. In my Canvas app, I inserted a Camera control:
8. Select the new control and place it on the form where you want it to appear.
9. In the OnSelect property of the camera, I connected it with the flow using this one line of code (note the semi-colon separating two function calls in this one step).
ClearCollect(photo,Camera1.Photo); 'PowerApp->Createanewrecord'.Run(First(photo).Url , BrowseGallery1.Selected.Case)
Now when the user taps (or clicks) on the image in the app, it will add the picture to a collection called ‘photo’ and then call the new Flow with the photo as the first parameter, and the ID of the case as the 2nd parameter.
Note:
- ClearCollect(photo,Camera1.Photo) is necessary to temporarily store the photo so that it can be passed as a parameter to the Flow. The ClearCollect() function wipes out anything that was in the collection variable and puts in new values. A collection is a variable that can have many values contained in it.
- The reason we used “First(photo).Url” is because the picture was in a collection, the First() function just pulls out the first one (even though there was only one picture).
- The Case [Global Unique] ID was accessible through a gallery I had in my app. This would only work if the case is already existing. If this was a new case, it would require some additional work to first create the case, then get the ID before you are able to save a picture.
If your flow was called a different name, then use the Action menu in the canvas app editor to select your flow, and it will prompt you for the order of the parameters it is expecting.
Testing!
Now when I run my canvas app, and click on the picture, it (should) run my Flow to create a new record in CRM. Flow can be a bit finnicky, so you may find that it does not always work the first time. My first few times failed because I didn’t have the code correct at step 3. Here is how I debugged it:
While you are in Edit mode in the Flow, click on the Test icon:
Then choose your most recent run and click Save & Test
There will be a red X next to the step that failed, and you can click on a link to see the inputs and outputs to see what went wrong. Once you have the flow working, you should be able to open the case in CRM and see the picture in the Notes area:
Let me know if you have questions and I will try to help!