Use device camera on Dynamics 365 forms: capture photo, store and use it in a document template

Updated: Apr 3, 2019

Why bother?

Dynamics 365 forms do not support camera controls, and only allows a single image associated with a record. The only way to associate images with a record is to store them as notes attachments or SharePoint documents.

This doesn’t work in scenarios where we want to store a concrete, somewhat fixed set of specific images. For example, if we are creating an app for the housing appraiser, we want to be able to allow her to quickly snap photos of front, back and sides of the house, and also to be able to do it without leaving the form and to be able to see the pictures right on the form, along with the rest of the data field and a signature field.

TL;DR

We’ll store images as multi-line text fields, with Pen control enabled.

We’ll use WebRTC mediaDevices to control the camera and a little bit of JavaScript to grab an image and save base64-encoded stream to a text field on Dynamics form. We’ll wrap it into an HTML Web Resource and display it on the form (works same way for standard Unified or Web Interface). We’ll update encoded stream to prepare it for Word document template output.


Alternatives

The alternative, as of now, is to use a custom app - e.g. PowerApps would allow us to quickly build a list-detail app where the detail form would show some Dynamics fields along with PowerApps Camera control and a little bit of code would save captured image into the form’s data context.

There are some issues with this:

If you don’t need custom UI in your Dynamics app (outside of the requirement to use camera control), adding it could open Pandora’s box of building duplicated set of UI experiences

Use PowerApps or another technology requires skills that current Dynamics support team doesn’t have

PowerApps might be unavailable for you (e.g. Dynamics on Premise or Government Cloud, at the time of this writing)


Implementation

For this example, we’ll add Profile Picture and Signature image fields to a Contact record. We will use code to populate Profile Picture using camera capture and use Signature field as intended for pen-based signatures. We’ll use WebRTC in an HTML web resource to access media devices on user’s laptop/tablet/phone. This article shows how to use user’s camera, but same approach could also be used to control user’s microphone.


First, create four multi-line text fields with enough storage (20,000+) and place them on the form:

Make Copy fields invisible - we’ll use them later for the document template.


Next, create a new HTML Web Resource. The code in this web resource will access device’s camera and will allow us to capture an image.

Note: the bulk of the code in this resource is taken from this great example on using WebRTC to use media devices. Refer to this post for the explanation on using MediaDevices.getUserMedia()


Make following changes to the code in the example:

- Add a ‘Use This Photo’ button and a click handler for it to copy captured base64-encoded photo and copy it to a Profile Picture field

function useThisPhoto() {

var data = photo.getAttribute('src');

if (!data) {

alert('Please take a picture first');

return;

}

i f (!window.parent.Xrm) { alert('Not in Dynamics context'); }

else {

window.parent.Xrm.Page.getAttribute('isi_profilepicture').setValue(data);

}

}


- Add instructions to users

<body>

<div class="contentarea">

<h1>

Capture New Profile Picture

</h1>

<p>

Click on Take Photo to capture an image. Than click on Use This Photo to save it to the record.

</p>

<div class="camera">

<video id="video">Video stream not available.</video>

<button id="startbutton">Take photo</button>

</div>

<div class="output">

<img id="photo" alt="The screen capture will appear in this box.">

<button id="useit">Use This Photo</button>

</div>

<canvas id="canvas" style="display:none"></canvas>

</div>

</body>


Publish the web resource and embed it into the Dynamics form:




Pen control, unfortunately, does not allow us to clear its contents once set. To fix this, add a bit field ‘Clear Signature’ below the Signature field. Add a Business Rule to clear the Signature when ‘Clear Signature’ gets changed to Yes.


Publish all changes and open modified Contact form.

The (almost) finished product should look like this:

The signature control is on the left, the top right image is the profile picture stored with the record; bottom left image is the camera stream and bottom right image is the camera capture taken when we click on ‘Take Photo’ button.


That would be all except we would also want to be able to create document templates reflecting these image.


Create word document template with image fields

Word templates allow us to generate great looking outputs very quickly.

Let’s create a simple document template for Contact and display some basic contact data, along with contact’s signature and profile image.

Click on ‘Download Template’ for contact:


Open new Word document, navigate to XML Mapping Pane and drop a few fields on the screen from DocumentTemplate. Use Picture Content Control for Profile Picture and Signature and plain text for the rest of the fields:

Save the document, upload the template to Dynamics and run it. You will see that it unexpectedly fails:

This happens because base64-encoded image captured by both Dynamics 365 Pen Control and WebRTC mediaDevice has the format that the Word’s Picture Content Control fails to recognize it as a proper stream and fails.

The captured field, viewed as text, looks like this:

data:image/png;base64,iVBORw0KGgoAAAANSUh…...

The encoded stream is prefixed with ‘data:image/png;base64,’. All we need to do to complete our solution is to use Copy fields to store the copies of our image data with ‘data:image/png;base64,’ string stripped out.


We’ll do it using a synchronous workflow that fires on changes in Profile Pic and Signature fields and uses String methods of msdyncrmWorkflowTools to strip this prefix and set Copy fields.

The custom step to strip string prefix looks like this:


After updating signature and profile pic on a contact record, the workflow will update hidden Copy fields and the record will have data ready for the document template.

Go back to editing the template. Delete Profile and Signature content controls and replace them with Profile (Copy) and Signature (Copy) Picture content controls. After uploading modified template and running it on a record, we’ll get the document complete with our images:




Information Strategies, Inc

5101 Wisconsin Avenue NW #420

Washington DC 20016 

202-364-8822

GSA Contract Holder

Connect with us

  • White LinkedIn Icon
  • White Twitter Icon
  • White YouTube Icon
  • White Blogger Icon
  • White Facebook Icon

© 2019 by Information Strategies, Inc.