{Quick Tip} Manage your Entity Forms when your CRM is exposed to Web and Mobile App

Spoiler alert! Unlike other blogs, I am not going to update you about any new feature. Rather I am going to share my project experience in handling multiple forms designed for your Web and Mobile layouts.

Scenario

You have exposed you CRM recently to Mobile Apps. When you expose your CRM to Mobile Application development, in most of the scenarios you would end up designing separate forms. Let’s take the example of Account entity. Say you have designed two forms

  • Account Web Form – This form is displayed to users while accessing CRM to Web
  • Account Mobile Form – Form displayed to users while browsing CRM on Mobile

And you have your users who will just access CRM through desktop and then some users accessing CRM through both Desktop and mobile.

 

So now the implementation

First of all, as I have been across client locations, I find that some consultants still assume that to expose a form in mobile, we need to create a form of type = ‘Mobile Express’. Mobile express forms were required for previous Dynamics app – Dynamics CRM Phone express. For the current version of Mobile App for Dynamics, Form Type = Main would work just fine

So what is the next step? We create a new form of type Main, this time specifically for mobile and put in only the fields required for Mobile as per the requirement. But wait, we have another form already exposed for the desktop. So how do we handle this.

  • Create a new security. Let us name it here – “Mobile User Security Role”. The privileges for this security role is optional and depends on your requirements.
  • Assign the security to users who need to access CRM on mobile.
  • In the Form order for Main Form set, set the Mobile form at the top of form order.

image

  • The next step is to leverage the role based forms. Expose the Account – Mobile form to only users with Mobile User Security Role.

image

Uncheck the “enabled for fallback” checkbox as well.

Save an publish your customizations.

All set and done. Now this works very well for users who does not use desktop and manages through mobile (hardly the case) and users not exposed to mobile platform. However the issue is for a user who has access to mobile and desktop version. They now see two forms and the mobile form starts showing up in the desktop as well as it is highest level in the form order as well.

The last step here is to switch the mobile if it loads on desktop. The simple piece of client side script would just work fine when put in form load of the mobile form.

function SwitchToDefaultFormForWebVersion(){

        var _defaultFormName = "account web form";

        var _isMobileClient = Xrm.Page.context.client.getClient() == "Mobile";

        if (!_isMobileClient) {

            var availableForms = Xrm.Page.ui.formSelector.items.get();

            var currentForm = Xrm.Page.ui.formSelector.getCurrentItem();

            if (currentForm != null) {

                var currentFormLabel = currentForm.getLabel();

                if (currentFormLabel.toLowerCase() == _defaultFormName)

                    return;

            }

            for (var i = 0; i < availableForms.length; i++) {

                if (availableForms[i].getLabel().toLowerCase() == _defaultFormName) {

availableForms[i].navigate();

                }

            }

        }

    }

Please remember that form navigation script is not supported on mobile. Hence first I am making the check if the client is Mobile.

Well there you go. Everything is up and running for you now.

 

Hope this helps!

 

Debajit Dutta

(Dynamics MVP)

For training/ consulting/ utilities – please visit our website – www.xrmforyou.com or write to us at info@xrmforyou.com

Advertisements

Open Lookup Dialog Programmatically using Xrm.Utility–Dynamics V9.0

This one feature that I am going to pen down here, personally I have longing for it quite sometime now.

So before going into the HOW part of it, let’s understand the why part of it? When do I need show a Lookup dialog Programmatically? Well the answer is, numerous occasions. Like if you need to throw up a lookup dialog on change of field on the form OR you needed to throw the lookup dialog on click of a button on a web-resource.

All this time, we have achieved this but not in a supported way. Probably we may have ended up using Xrm.Internal.openDialog or some method of Mscrm.Internal namespace. But all these are unsupported and mere workaround to this perennial problem.

Well, no more messing around. Microsoft has finally brought in the Xrm.Utility.lookupObjects.

So let’s see how it works.

Let’s take a not so good example here. Let’s say whenever the account country is US, primary contact is mandatory and the user is thrown a lookup dialog of contacts from where he needs to select the Primary Contact. below if the function registered on change of country field

function changeOfCountry(e) {
    var formContext = e.getFormContext();

    if (formContext.getAttribute("address1_country").getValue() == "US") {
      
var lookupOptions = {};
        lookupOptions.allowMultiSelect = false;
        lookupOptions.defaultEntityType = "contact";
        lookupOptions.entityTypes = ["contact"];

        Xrm.Utility.lookupObjects(lookupOptions).then(


            function (result) {
                if (result != undefined && result.length > 0) {
                   var selectedItem = result[0];

                    formContext.getAttribute("primarycontactid").setValue({ entityType: selectedItem.entityType, id: selectedItem.id, name: selectedItem.name });
                }
            },
            function (error) { }
        );
    }
}

Focus on the highlighted lines starting from top. The first is the lookupOptions paramter. Since we are going to open a contact, I have specified defaultEntityType and entityTypes both to contact.

Also you can set the defaultViewId and the viewIds property to show the default view to use and views to be available in the view picker respectively

For a complete set of the properties of lookupOptions refer to Microsoft Documentation. https://docs.microsoft.com/en-us/dynamics365/customer-engagement/developer/clientapi/reference/xrm-utility/lookupobjects

As soon as the method is executed, the below dialog opens up

image

Cool isn’t it? Now half of the job is done. But how about getting the selected record back. Well this method does not disappoint you here either.

The success callback function returns the selected item as you can see from the code above.

It has properties of entityType, id and the name which you can use to set the look up field of any other type. Here I have used the same to set the value of primarycontactid field of the account record.

Such a huge sigh of relief for me.

Hope this helps!

 

Debajit Dutta

(Dynamics MVP)

For training/ consulting/ utilities – please visit our website – www.xrmforyou.com or write to us at info@xrmforyou.com

{Dynamics V9.0}–Show alert/ confirm/ error in Modal style with new Client API in Dynamics Version 9.0

Working currently on a client engagement on the latest Dynamics version (v9.0) and hence got a chance to the new introduced Client API’s with version 9.0.

For starters, the Xrm.Page has been deprecated with version 9.0 and a completely new set of API’s have come up with version 9.0 along with host of new features.

For a list of deprecated API’s – https://docs.microsoft.com/en-us/dynamics365/get-started/whats-new/customer-engagement/important-changes-coming#some-client-apis-are-deprecated

So coming back to the requirement here, if you have worked on Client API’s, chances are more that you have worked with Xrm.Utility namespace. Showing alerts/ confirmations/ opening entity forms/ webresources – what not can we do with the namespace.

However there was a problem. Xrm.Utility.alertDialog/ Xrm.Utility.confirmDialog still used to leverage the window.alert/ window.confirm for a web client. The result is – customer always complained about the look and feel of the pop-up. And also the ability to customize the contents of the same.

Well no-more. Now you have complete control on these. Excited? Let’s explore together.

1. Xrm.Navigation.openAlertDialog

The previous Xrm.Utility.alertDialog has been replaced with this new API. So let’s  see how to open an alert dialog using this function.

var message = { confirmButtonLabel: "Test Button", text: "New alert API Test" };
var alertOptions = { height: 150, width: 280 };
Xrm.Navigation.openAlertDialog(message, alertOptions).then(
    function success(result) {
        console.log("Alert dialog closed");
    },
    function (error) {
        console.log(error.message);
    }
);

Wonderful isn’t it? You get an option to even choose the button text. And even more is the flexibility to choose the height and width.

Now let’s see how it renders.

image

Such a relief to the eye from the previous versions. And what a relief to the customers!

 

2. Xrm.Navigation.openConfirmDialog

This is the new version of the previous API – Xrm.Utility.confirmDialog.

Let’s see how to invoke it

var confirmStrings = { text:"This is a confirmation.", title:"Confirmation Dialog", subtitle: "test subtitle", "cancelButtonLabel": "Test Cancel", confirmButtonLabel: "Test Confirm" };
var confirmOptions = { height: 200, width: 500};
Xrm.Navigation.openConfirmDialog(confirmStrings, confirmOptions).then(
function (success) {   
    if (success.confirmed)
        console.log("Dialog closed using OK button.");
    else
        console.log("Dialog closed using Cancel button or X.");
});

 

As you can see, you can put title/ subtitle/ text/ cancelButtonLabel/ confirmButtonLabel and also the height and width. The complete rendering of the pop-up is now in your hands.

And now let’s see how it looks.

image

 

3. Xrm.Navigation.openErrorDialog

Well this is something new here. Let’s see first the nomenclature of this function. As per Microsoft Documentation

Xrm.Navigation.openErrorDialog(errorOptions).then(successCallback,errorCallback);

 

The important thing here is errorOptions. So let’s first explore that.

What are the parameters here:

  • details: Any custom details you want to include in the error. If you specify this – “Download Log File” button would show up.
  • errorCode: Now this is wonderful. If you specify this, the message for the corresponding errorCode is retrieved from the server and shown.
  • message: this is the custom message that you want to display in the dialog.

var errorOptions = {message: "Custom Error Message", details: "Inner exception details"};
Xrm.Navigation.openErrorDialog(errorOptions).then(
    function (success) {
        console.log(success);       
    },
    function (error) {
        console.log(error);
    });

Below is the UI I get. strangely enough, the custom error message is not displayed. However if I download the log file, the details are in the log file.

image

 

Log file:

image

 

Hope this helps!

 

Debajit Dutta

(Dynamics MVP)

For training/ consulting/ utilities – please visit our website – www.xrmforyou.com or write to us at info@xrmforyou.com