Dynamics 365 Model-Driven app — Capture entity image using device camera

In the Outlook Contact form, you can upload an image of your contact to show a picture of the contact as well as hold information about them.

Dynamics 365 API introduces new namespace Xrm.Device. This namespace provides methods to use native device capabilities of mobile devices. For more details please read Client API Reference.

This post gives step by step instructions on how to capture entity image and invoke the device camera in Dynamics 365 model-driven app. I have used contact entity and want to capture an image for it.

Enable Entity Image:

The “Image” type field is available for some of out-of-box entity. If you are using custom entity and wanted to capture entity image follow the below steps.

Step 1: Login to CRM. Navigate to Customisation -> Customize the System -> Entity.

Step 2: Create an Image Data Type Field in the custom Entity as shown below.

Step 3: Open the custom Entity Main Form. Click on Form Properties and click on Display Tab. Select the Show image in the form to opt the feature.

Step 4: Save and Publish the Entity.

Model-driven app:

In this example, we will create a new model-driven app to capture entity image. You can use any existing unified interface app to do the same. Follow the steps below.

Step 1: Navigate to Settings -> Solution -> Open your custom unmanaged solution.

Step 2: Go to Model-driven App -> New to create an app.

Step 3: Click Next -> Select Solution -> Done

Step 4: The app will be created successfully, now we will edit sitemap to add the contact entity navigation.

Step 5: Click Save and Publish.

Now, we will add a new ribbon button to the contact form which get display after the record create. The button click will execute the CaptureEntityImage JavaScript function to capture image for the record. We will use Xrm.Device.pickFile Api to prompt the dialog and use Xrm.WebApi.updateRecord to update the entityImage field for the entity.

API Syntax:

Xrm.Device.pickFile(imageOptions).then(successCallback, errorCallback)

TypeScript Code:

You can download the code from GitHub:

Capture Image using Mobile Client:

Open the “Quick Capture” model-driven app in a mobile device and create a new contact record. Click on the “Capture Image” ribbon button, the mobile device will prompt the dialog box to capture the image. The dialog box has option to capture image using device camera and other option to use exiting image from device. Once you click the button, it will prompt the below screen to capture image.

We will use “Take Photo or Video” option and click the camera icon, it will open the device camera.

Click on “Use Photo” and you should see “Done!” alert message and finally the picture should appear in the contact record.

Capture Image using Web Client:

Open the same “Quick Capture” model-driven app in a web client and create a new contact record. Click on the “Capture Image” ribbon button. The web client will open the file browser to capture the entity image.

Web client doesn’t show the camera option, this API invokes the device camera to capture an image and is supported for the mobile clients only.

Once you select the file, you should see “Done!” message and finally the new picture should appear in the contact record.

The Unified Interface for model-driven apps provides a consistent and accessible user experience across devices — whether on a desktop, laptop, tablet, or phone. Xrm.Device is very useful client Api which can be used in web client and mobile client and can solve different business needs.

Hope this helps!