Creating a Getting Started Pane in CRM 2011

Objective: Update the Account “Getting Started” help pane (Also known as Help Visor).

In CRM 2011 there is a great new feature called the “Getting Started Pane”. If you look at any of the system entities you will see Microsoft have created and tailored a pane with useful content for each entity. Recently I was asked how do you create one of these panes for a custom entity? Today I am going to explore the steps needed to do this and make it available in your CRM 2011 system.

One thing to note straight away is this process involves customizing HTML and adding JavaScript custom actions. This task would suit a dev type with the support of a functional person who can provide the actual content. You will need the CRM 2011 SDK kit to assist you.

Here are the steps to create a new custom help pane. In this example we will link to a video online, add a new video thumbnail and add in 2 custom content links:

1)      In CRM 2011 you will need a solution ready with your custom entity. For this example I have a custom entity called “Interests”.

2)      Firstly export your Solution with the custom entity and ensure a Site Map has been added as a Solution Component. Save the customizations file on your development machine, we will use this again later.

3)      In the CRM 2011 SDK kit find the Help Visor Template under “\SDK\Resources\GetStartedPaneTemplate”.

4)      Copy the “HelpVisor” folder to your development machine.

5)      In this example will use English (1033) only, so will not be creating new language folders.

6)      In the HelpVisor folder open up the HelpVisorTemplate.htm file in the 1033 Folder and edit it with an editor (like Visual Studio).

7)      To replace the video image you need to add an image to the “image” folder of size 104 x 76px.

8)      In the HelpVisorTemplate.htm  file locate the “VideoContainer” tags and update the image directory to point to your custom image. For my entity “Interests” I am using a bicycle image called “bike.jpg”. I have also changed the video link to point to a CRM 2011 video on YouTube just as an example. You could have a prepared content video and link to that in a Production system. You can also refine whether the video popups up in a new window/tab or is embedded.

9)      Add in “TitleSection” description and a “DescriptionSection” description, in my example I have used “Getting Started with Interests”

10)   By default your Visor has column and row placeholders. These will need to be edited and replaced with your content and actions.  Each link can be an action item or redirect you to a detail page where you have specific information. Below I have added in a custom action for “Business Interests”. In a Production system you could add many of these references liniking to custom pages you deploy within your HelpVisor solution. Better yet you may link to content on your corporate network.

11)   Once complete your Visor should look something like this:

We are now ready to upload this to the “Interests” entity in CRM.

12) Using the Web Resources Utility tool found in the SDK kit. I highly recommend reading the “read me” file associated with the Web Resource utility, it looks and feels a bit like the Plug-in Registration tool, but there are a few more complexities. E.g. Resources must match the file structure for relative links to work correctly.

For example:

DynamicXrmSolutions_/redir.htm

DynamicXrmSolutions _/Scripts/HelpVisor.js

DynamicXrmSolutions _/1033/HelpVisorTemplate.htm

DynamicXrmSolutions _/1033/Content/Content1.htm

Whatever you choose for your naming convention, make sure you note the path to the “redir.htm” file as this is needed in the sitemap.

13) Upload & Publish the files in the HelpVisor folder as Web Resources.

You will see the Resources appear in your Web Resources list in CRM almost immediately

14)  The next step is to update the Site Map and make reference to the new Help Visor. Open the Customizations file you exported earlier and do a search for the “SubArea” with your entity name. In my example the entity schema name is called “dxrms_interests”

The tag we need to modify is the “GetStartedPanePath”. Update the Web Resource URL to point to your root path (As noted when you uploaded the Web Resources linking to the redir.htm file.

15)  Once this is complete, save your customizations file. Add it back into the Solution Zip file you exported (So far it seems you cannot upload a Customizations file separately outside of a .zip or cab .file). Import your Customizations and Publish your Solution. You will also need to refresh your browser to see the changes. You should now see the Getting Started Pane appearing above your custom entity!

Side note: I looked in customizing the system entity Help visors, but this appears to be unsupported. You would need to pull down the entity help visor .htm file from the CRM website and right there I feel we are in unsupported territory. I would be interested to hear other peoples thoughts on this and Microsoft’s stance.

About these ads

, , , , , , ,

  1. #1 by Mauro Ippolito on March 6, 2011 - 9:13 am

    Great!

    We will use that!

  2. #2 by Gareth Tucker on February 17, 2012 - 12:36 am

    Thanks Matt, this helped me today. How are you by the way?

    regards,
    Gareth.

    • #3 by Matthew Mead on March 27, 2012 - 11:48 am

      Hi Gareth, sorry for the slow reply. Doing great, I have joined a great partner in Toronto and am getting refocused on Dynamics CRM again. Hope you are well!

  3. #4 by Jim Daly [MSFT] on March 29, 2012 - 12:47 pm

    Matt -
    Thanks for writing this up. I will include a link to this blog post in the next release of the SDK.
    You asked about whether it is supported to update the HTML help visor files on the server. We recommend you use Web resources rather than edit those files because:
    1. The files could be updated in the future during a service pack or version upgrade. This would wipe out your changes
    2. It is only an option for Microsoft CRM On Premises. Microsoft CRM Online keeps all these files on a central help server
    3. If you want to package your customizations as a solution, those files on the server would not be included.

  4. #5 by Manon on October 22, 2012 - 10:56 am

    Hello Matthew

    Great post! It helps a lot in understanding how to customize the Get Started pane.
    I’m trying to do a bit of customization without really changing too much of the pane itself. I just want to have some functionalities from the original Get Started page while restricting others. How do I go about calling on some CRM actions from a customized page? For example, I’m trying to call the javascript ExecuteAction to create a custom view, but nothing happens. Is there an additional Javascript code we need to include as a web resource for this to work? How can I have access to the library of CRM functions from within my customized HTMLs?

  5. #6 by Jason on December 11, 2012 - 7:47 am

    Great blog entry. Thanks Matt

  1. A Sampling of New and Improved UI Features that Simplify and Expedite Navigation in Microsoft Dynamics CRM 2011 - Customer Effective Blog - CRM Technical Blogs - Microsoft Dynamics Community

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 )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 106 other followers

%d bloggers like this: