Capture contact images with Xrm.Device.captureImage

This article shows how to capture contact images using a Dynamics 365 mobile App based on the new client API in version 9. The same could be extended to capture images in any entity for other business scenarios.

The new Dynamics 365 API introduces several new namespaces, one of them is Xrm.Device. This namespace offers the method Xrm.Device.captureImage that we will use here to take the photo of our contact.

Firstly, we will create a Dynamics 365 App:

rtb_blog_apps menu

You can also get into the “My Apps” section using the following URL:

https://orgname.crm.dynamics.com/apps

Please notice we will use the new Unified Interface in the Client option:

rtb_blog_unifiedinterfaceapp_captureimage

This app will be available for the Dynamics 365 for phones. In my case, I’m testing it with an iPhone.

In the new app, we will edit the site map to include the contact entity:

rtb_blog_unifiedinterfaceapp_sitemap_contact

Now we will add a new button to the contact form ribbon. There are different ways to do this, in my case I have used the Ribbon Workbench editor within XrmToolbox:

rtb_blog_ribbon_form_new_photo_button

We will pass the record GUID and the entity type (e.g. contact) as the command parameters:

rtb_blog_ribbon_form_command parameters

The button will trigger the corresponding command (e.g. GetPhotoCommand) and this will execute the JavaScript function to capture the image (e.g. GetPhoto). This code should be placed in a WebResource.

rtb_blog_unifiedinterfaceapp_captureImage code

You can download this code from GitHub:

https://github.com/rtebar/Dynamics-Utils/blob/master/Dynamics.Utils/Dynamics.Utils.Web/CaptureImage.js

Once we have captured the image, we will update the current contact record. There is where we are using the method Xrm.Web.updateRecord. To display some alerts or potential error messages, we will use the method Xrm.Navigation.openAlertDialog and Xrm.Navigation.openErrorDialog. Finally, to refresh the form and show the new picture, we are refreshing the form with the method Xrm.Navigation.openForm. These methods are also part of the new client API with Dynamics 365 version 9.

In the actual mobile app, you should see something like these screens:

20180122_114627000_iOS

The new button should appear when you click on “…”:

20180122_114643000_iOS

Once you click the button, it should trigger the device camera:

20180122_114700000_iOS

If everything is ok, it will show us the alert dialog we were expecting:

20180122_114708000_iOS

Finally, the picture should appear in our contact form:

20180122_114809000_iOS

Notes: This article has been written using the platform version 9.0.0.3267

About Ramon Tebar

Software Engineer specialised on Microsoft Technologies with experience in large projects for different industrial sectors as developer, consultant and architect. I enjoy designing and developing software applications, it is my job and one of my hobbies. I’m interested in design patterns, new technologies and best practices. Making those part of the ALM process is a great challenge. During the last years, I have specialised in Microsoft Dynamics CRM (now Dynamics 365). I customise and extend the platform to provide tailored solutions and integrations based on service-oriented architectures and messages queuing. Motivated by community events and contributor in blogs, technical books, open source projects and forums, I have been awarded Microsoft Most Valuable Professional (MVP) on Dynamics 365 (CRM) since 2012.

Posted on January 22, 2018, in Dynamics 365, JavaScript, Mobile and tagged , , , , , , . Bookmark the permalink. Leave a comment.

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 )

Google+ photo

You are commenting using your Google+ 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 )

w

Connecting to %s

%d bloggers like this: