Tag Archives: dialog

Building Custom Screens using Dialogs and Ribbon Buttons in CRM 2011

In this post I demonstrate how you can rapidly extend Microsoft CRM with custom screens in minutes, rather than hours or days. 

I will demonstrate a custom Lead Qualification screen by using a custom Ribbon button that pops a CRM Dialog and I will share a couple of tweaks that smarten up the user experience.


Microsoft have supplied with Microsoft CRM 2011 a Lead Qualification screen where you can qualify or disqualify a Lead and chose what records you want created:

image

However, this screen sits outside CRM’s supported extensibility model and sometimes fails to meet requirements. When you hit this scenario you can attempt an unsupported customisation to the screen, you can build a replacement screen, you can use form fields and plug-ins to manage the requirement or you can use a Dialog.  In this post I will demonstrate the Dialog solution and provide some guidance on how you can improve the user experience.

Here’s my scenario.  I have Leads for both existing Customers (Contacts) and for non-customers.  I want users to be able to qualify or disqualify leads.  When they qualify them I want the system to create an Opportunity against a Contact record.  For non-customer Leads, the Contact record should be auto-created.

In this scenario the out-of-the-box screen has these limitations:

  • The user can choose to have a new Account created (I never want this)
  • The user can chose to have a new Contact created, even when the Lead references an existing Contact (we could end up with duplicates)
  • The user can accidentally chose to not have an Opportunity created
  • The user has to reselect the Contact on this form if they wish to associate the Opportunity to an existing Contact (despite the Contact being referenced on the Lead)

Ok, so let’s jump to the solution so you can see whether you like this approach.   I have added a Button to the Lead form’s ribbon menu which pops a Dialog:

image

If the user selects “Convert Lead” an Opportunity is created, the Lead status is updated and the Lead form is refreshed.  If the Lead referenced an existing Contact then the Opportunity will be attached to that Contact, otherwise a new Contact is created.  

If the user select “Disqualify Lead” the Dialog will prompt them for a reason and then update and close the Lead and refresh the Lead form.

The advantage with this approach is it is a more controlled user experience.  We are not exposing the user to options we don’t want them to select and not asking them to perform any double keying.   And by creating a ribbon button and adding some jscript to auto-refresh the CRM form we get a much nicer user experience then an out-of-the-box  Dialog experience.

Here’s how I configured this…

 

The Dialog

 

The Dialog is quite simple.  It has 2 pages.  The 1st page you see in the screenshot above.  It asks a question and captures the response.   You’ll see from the Dialog definition below that I then have a condition statement and only proceed to the 2nd page if the user chose the  “Disqualify” option on the 1st page:

image

Next, the Dialog needs to take action.  

For Disqualified Leads, the Dialog updates the Status of the Lead based on the Disqualify Reason captured:

image

For Qualified Leads, the Dialog checks whether the Lead references an existing customer and then either just creates an Opportunity record or creates a Contact and an Opportunity, before finally closing the Lead:

image

 

The Button

 

I added the Ribbon button using the VisualRibbonEditor available on CodePlex.  I copied the icon path and display rule from the out-of-the-box Qualify button.  Here’s the Action definition for the button:

            <Actions>
               <JavaScriptFunction FunctionName="LaunchDialog" Library="$WebResource:new_LaunchDialog">
                <CrmParameter Value="PrimaryItemIds"/>
              </JavaScriptFunction>
            </Actions>

I needed to pass the Lead record’s GUID to my function so you will see I registered a CrmParameter in my ribbon definition.  “PrimaryItemIds” will give you the GUID of the current record.

 

The Jscript

 

Here’s my LaunchDialog function that the button calls.  There’s also a supporting function which just ensures the Dialog launches centred on screen:

function LaunchDialog(sLeadID) {
    var DialogGUID = "128CEEDC-2763-4FA9-AB89-35BBB7D5517D";

    // Get the CRM URL 
    var serverUrl = Xrm.Page.context.getServerUrl();

    // Cater for URL differences between onpremise and online 
    if (serverUrl.match(/\/$/)) {
        serverUrl = serverUrl.substring(0, serverUrl.length - 1);
    }

    serverUrl = serverUrl + "/cs/dialog/rundialog.aspx?DialogId=" + "{" + DialogGUID + "}" + "&EntityName=lead&ObjectId=" + sLeadID;
    PopupCenter(serverUrl, "mywindow", 400, 400);
    window.location.reload(true);
}

function PopupCenter(pageURL, title, w, h) {
    var left = (screen.width / 2) - (w / 2);
    var top = (screen.height / 2) - (h / 2);
    var targetWin = window.showModalDialog(pageURL, title, 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width=' + w + ', height=' + h + ', top=' + top + ', left=' + left);
} 

This function receives the Lead record’s GUID as a parameter (thanks to the ribbon definition) and combines that with the CRM Server URL (which is derived via Xrm.Page.context) and with the GUID of the Dialog definition (which is hardcoded) and then pops that URL.  It uses window.showModalDialog() and window.location.reload(true) to automatically refresh the Lead form when the Dialog closes.

Now I have hardcoded the GUID of the Dialog in my function.   A better solution would be to have that housed as a parameter and read at runtime.  Check out this post for an approach you can follow to implement that.

That’s it, I hope someone finds this useful. Smile

GT.

Advertisements

Launching a Dialog from a Ribbon Button in CRM 2011

Here’s some sample code that demonstrates how to execute a Dialog from a Ribbon button in CRM 2011.  The solution sample is provided in managed and unmanaged formats:

Managed Solution (updated: 25 Feb 2011)

Unmanaged Solution (updated: 25 Feb 2011)

note: this has only been tested successfully in CRM Online 

I have built out a Dialog based solution for a call centre, further extending the solution I documented in one of my earlier blogs.  The scenario is as follows:

A call centre agent takes both sales and service inbound calls.  They are tasked with:

  • searching for the caller in CRM and adding them as a new Contact if not found
  • determining whether the call is sales or service related
  • logging the phone call in CRM
  • recording a new opportunity or case
  • informing the caller they will be called back within 24 hours

I wanted a Dialog based solution that would guide the call centre agent through the process with the minimal number of clicks.  I didn’t want the user to have to create the initial CRM record required for the Dialog, I wanted the user to simply click a button.   My solution design makes use of the REST End Point to retrieve the GUID of the Dialog that should be launched and also to create the initial Phone Call record.   Dialog’s are URL addressable so launching the dialog is not difficult once you have the context record and the Dialog GUID.  In the Dialog itself I make use of Dialog Variables and Database Queries to query CRM to see if the Caller exists and to present a list of possible matches back to the user.   Pretty powerful stuff.

 

The end result looks like this…

The user has an incoming call, they click the Incoming Call button. 

 

image

The Button executes a jscript function that does a window.open, launching an HTML page I’ve loaded into CRM as a web resource.

 

An HTML page pops indicating a Phone Call is being created and the Call Script is being loaded:

image

This HTML page is used to reference some jscript libraries I need to extract the CRM context and for the execution of the REST call.  The HTML page provides the progress indicators to the user and then executes a jscript function that does the heavy lifting.

The jscript function:

  • queries the REST end point for Processes to retrieve the GUID of the “Inbound Call Script” Dialog Process.
  • uses the REST end point for Phone Calls to create a Phone Call record.
  • formulates a URL using the CRM context, Dialog GUID and the Phone Call GUID
  • does a window.open to launch that URL

 

And then the Dialog appears:

image

 

The Call Centre Agent greets the caller, notes there reason for calling and collects their name (as prompted by the Dialog script):

image

 

The script then prompts the agent to find out whether the caller has an existing account:

image

 

If the caller indicates they are an existing customer a Contact search page is presented:

image

 

A search is executed against CRM using the search strings entered (doing a “like” search).  And the search results are returned to the agent for review:

image

 

The user can go back and modify their search, or they can select one of the search results, or they can indicate the caller was not found in the database:

image

 

Finally, the agent selects the nature of the enquiry so that an Opportunity or Case record can be created in CRM:

image

 

The final page of the Dialog provides the call wrap up script:

image

 

Behind the scenes a Phone Call record has been created and linked to either an existing Contact or to a new Contact.  A Case or an Opportunity has been created and linked to the Contact.  And the Phone Call has been marked as completed.

 

I was pretty impressed by the extensibility offered by the CRM platform here.  The REST end point performed a little slowly for me but I haven’t tried to performance tune anything here.  The Dialog functionality largely bent the way I needed it to.  The area it was weakest was the display of the Query Results, where a pick list is not really suitable.  

 

To see this in action:

– Download the solution, install, publish and refresh your browser

(Known Issue: Check the Dialog is Active.  The Dialog definition contains references to the Australian currency which prevent it from publishing in instances missing that currency.  Edit those mappings as required)

– Navigate to Workplace –> Contacts

– The “Incoming Call” button should appear on the Ribbon (it appears on the “Main” tab for the core data entities, i.e. on the Account and Contact ribbons)

– Click the button

– Navigate the dialog

– At conclusion you should see:

   – A new completed Phone Call record

   – Attached to either a new Case or a new Opportunity

   – And both records related to either an existing Contact or a new Contact

Utilising Dialogs in CRM 2011 for Record Creation

 

Here’s an introduction on using Dialogs to provide a consistent Data Capture process within a call centre environment.

Let’s model a scenario where the call centre representatives are tasked with recording each inbound call as a Phone Call record in CRM.  The phone call needs to be attached to a new Contact record and depending upon the nature of the call either a Case or Opportunity is to be created for later resolution by a specialist Sales or Customer Service Representative.

The diagram below illustrates both the end user process and the steps automated by the dialog:

image

 

Now this process could be modelled in CRM without the use of Dialogs with the user simply navigating through CRM, creating and updating records as required.  Dialogs however offer us a scripted alternative that significantly reduce the keystrokes and ensures consistent adherence to the business process.

Let’s create the Dialog…

 

1. Navigate to: Settings –> Customizations –> Customize the System

image

The Default Solution will be displayed.

2. In the navigation tree on the left, click on Processes and then click New to create a new Process:

image

3. Enter a Name for your Process, select Phone Call as the Entity, select Dialog as the Category and then click Ok.  The Dialog Designer will be displayed:

Note: As an inbound call is received, the user will create a new Phone Call activity and then invoke this Dialog to process the call

image

4. Now we need to build up our Dialog.  The definition of a Dialog is made up of the Dialog Pages (wizard screens) that the end user will see, each of which contains one or more Prompt and Response sections (script questions).  And around these Pages you add your conditions and automated actions.  

The Dialog designer has sections where you can define Input Arguments and Variables.  We won’t be needing to get that advanced so just minimise those sections and whilst you’re at it minimise the header section and maximise the window to get a bit more screen real estate:

image

5. Click on the row displaying Select this rows and click Add Step and then click on the Add Step dropdown and chose Page:

image

A Page element will be added to your Dialog steps. 

image

This will be the first screen of our Dialog.  We now need to add some content to that screen.  We will add 3 Prompt and Response steps to the one screen to achieve the following end result:

image

6. Click on the row displaying Select this rows and click Add Step and then click on the Add Step dropdown and chose Prompt and Response:

image

A Prompt and Response element will be added to your Dialog steps. 

image

7. Click the Set Properties button and enter the following:

image

I have inserted some dynamic content to embed the name of call centre representative into the script.  You do this using the form assistant on the right.

This first prompt has a multi-line response allowing the user to capture in detail what the caller says, so there is no need for the user to be scribbling notes down on a pad of paper to only have to key them in later. The notes captured here will be recorded into CRM.

8. Save and Close the Prompt and Response window.  You will be returned to the Dialog designer:

image

9. Click on the Add Step dropdown, chose Prompt and Response, click the Set Properties button and enter the following:

image

10. Save and Close the Prompt and Response window and then add another Prompt and Response as per below:

image

Your Dialog definition should now look like this:

image

11. Enter a name for the Page:

image

12. Click on the Page so that the Page and its 3 Prompt and Response elements become highlighted:

image

13. Click on the Add Step dropdown and chose Page to create the second page of our Dialog (the second screen of the wizard).   Add a Prompt and Response to that new Page as per below:

image

The intention of this Prompt and Response is to prompt the call centre representative to chose whether a Case or Opportunity should be created..  The prompt is to the user, it is not meant to be a question they ask the caller.  I could have written a series of Prompt and Responses to define a scripted conversation from which we could derive what action should be taken but for this scenario I figure it should be pretty obvious whether the caller wants to buy something or has a customer service issue and I expect they will have already indicated the reason for their call.  So I just want the user to chose Case or Opportunity.

As I want to control what sort of response is captured I have opted for an Option Set response and defined the 2 values I want made available to the user.

14. Save that Prompt and Response.  And then add a 3rd page to the Dialog with the following Prompt and Response:

image

15. Assign meaningful names Pages 2 and 3 and confirm your Dialog definition now looks something like this:

image

16. Now’s a good time to see how the Dialog is going to look.  Follow these steps to test things out:

 

a. Save the Dialog and then click the Activate button to enable it

b. Create a new Phone Call activity

c. Populate the mandatory fields and then Save the Phone Call (this process is a bit clunky at the moment but you could improve things easily enough with some basic configuration and/or jscript). 

d. Click the Start Dialog button on the Ribbon and then select your dialog from the list:

image

 

If everything works correctly you should be taken through the 3 pages we defined and end up on a 4th ‘Finish’ page…

Page 1

image

Page 2

image

Page 3

image

‘Finish’ Page:

image

Now we aren’t actually doing anything with the responses received during the dialog session so you won’t see any records created or the phone call updated in CRM.  Let’s go add those automated actions to the dialog now…

17. Return to your Dialog (Settings –> Customizations –> Customize the System –> Processes). 

18. Click on the 3rd Page and then from the Add Step dropdown select Create Record:

image

A ‘create new record’ Step will be added to your Dialog definition. 

19. From the dropdown select Contact and then click the Set Properties button:image

20. On the Contact form that is displayed insert dynamic fields using the form assistant to have the Contact’s First Name and Last Name fields be populated based on the Dialog responses received:

imageimage

21. Save and Close the Contact form and enter a meaningful description for this step:

image

22. Next we want a Condition and some Create Record steps to handle the creation of the Case or Opportunity record.  Add this as per below:

image

When specifying the conditions you can access the Dialog Responses under the heading Local Values:

image

When setting the properties of the Case and Opportunity records make sure you set the Customer to be the Contact that was created in the previous step (again available under Local Values):

image 

23. Now the last thing we want to do is tidy up the Phone Call activity that we initiated this whole process off.  Add additional steps to populate any additional details you want written to the Phone Call and to change its status to completed.   Make sure you at a minimum you associate the phone call to the Contact and to the Case/Opportunity:

image

image

24. Ok, the last few steps of your dialog should look like this:

image

25. Save, Activate and give it a whirl. 

 

Here I go, taking a sales enquiry from Mark Johnson, I create a phone call, start the Dialog session, greet the caller and follow the script.  I capture his initial comments and then prompt for and record his name:

image

I then classify the call:

image

And then wrap up the call:

image

I exit the dialog and can now see that the Dialog has created a new Contact record in CRM:

image

And against that Contact I can see the Closed Activity:

image

And the Open Opportunity:

image

 

To make this solution a bit more real world we would add more prompt and response elements to capture the callers contact details and we would likely want to call a workflow to route the Case or Opportunity record that is created.

Hopefully this (horrifically long) blog gives you a good introduction to Dialogs and gets you thinking about how might you use them.  

A word of warning – there are lots of gotchas with Dialogs (e.g. they don’t cater for lookup or date fields) so make sure you prototype them out to see they will work for you.  The beauty of Microsoft CRM is the ease with which you can try these things out so…  give it a go!