Category Archives: JavaScript

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

Advertisements

Dynamics 365 (CRM) Image Loader

This article describes how to create a simple Dynamics 365 (CRM) web resource that would allow us to display images based on a dynamics URL. This URL would be stored in an entity attribute and the name of the attribute would passed as a parameter to the web resource.

Preparing the demo for EMEA Summit 2017, I needed to display some logos and organisations images (covers) in the Account entity.

Let me show you a picture and you will immediately get what I mean:

CRMUG_EMEA_Summit2017_ImageLoader_imagesAccountForm

In our demo, we used the account entity to track the different NGOs / charities that would be part of the end solution. Each charity would have their own different logo and image cover that would be, later on, displayed in the PowerApp we also prepared.

Those images would be defined based on the following account attributes:

CRMUG_EMEA_Summit2017_ImageLoader_imageAttributesAccountForm

Solution: A simple web resource that would allow us to specify the attribute name with the URL as a parameter.

Below you can see the form definition, which got 2 web resources to host those previous images:

CRMUG_EMEA_Summit2017_ImageLoader_accountForm_webresource

If we now look at the properties of each web resource, we would see they are using the same HTML web resource behind the scene, but the parameter we are passing is different. The parameter is actually the attribute name to feed the image:

CRMUG_EMEA_Summit2017_ImageLoader_webresource_logo_parameter

And the other one:

CRMUG_EMEA_Summit2017_ImageLoader_webresource_cover_parameter

If you want to see the code of that HTML web resource, have a look at my GitHub link.

Hope you find it useful 🙂