UI customizations on your coffee break

A Guest Blog From Sam Lu

After working in the CRM industry for over eight years I’ve observed a healthy tension between UI philosophies regarding CRM as a whole.

Users generally fall into two camps:

  1. Organized screen camps:  
    These users want to view a given record, and see its related information, either on tabs or on a single click.  Our MS CRM 3.0 follows this model quite easily and beautifully out of the box.
  2. All relevant screens on one page UI:  
    Some Users want to see a full form of all information on a single page (where you either tab or scroll down a long UI screen.)

Either of these approaches has its drawbacks.  For those Organized screens, we get the common complaint that the application is too clicky, that there are too many open windows (or tabs for that matter) and that it becomes confusing for a new user.  For the Single Page UI, users will complain about scrolling, or about how confusing it is to have so much information on one screen.  They’ll often complain if the resolution is too small that the fonts become very tiny or if the resolution is too big and now they have to scroll both horizontally and vertically.

In all honesty, the perfect solutions are the ones that find the magical balance in between.  A UI that immediately presents relevant information, but doesn’t overload the User experience to the point of overwhelming them.

I’ve always loved going to Convergence or watching a sales demo and have seen MS CRM transformed into incredibly robust applications that bare almost no resemblance to the Out of the Box.  Aside from taking the path of some implementations and building a highly customized UI, its often come as a demand on many projects to just achieve some UI change without diving into the depths of custom .aspx pages or treading into the shadows of “unsupported” land.

It amazed me that there was a bevy of options that are not very difficult or costly to implement but are very robust options.  I found that, esthetics aside, there were actual options available to very easily and with very little time invested build a much more robust UI.

Here are the hallmarks of this approach and the keys to its implementation:

  • We still use the basis of our OOB navigation where we are viewing a single “focal object”
  • Using the iFrames within our UI wizards we can call up any page
  • Using URL referenceable pages we can embed entire screens and screen sections into iFrames. 
  • These changes are all client side related, making them easy to deploy (well versed, either of these changes can be implemented in minutes)

What I’ve included below is a very simple way to put in an iFrame onto any form, and then drop (or embed) into this form a related object (either a list or a related single entity.)
Embedding a list has actually appeared on many pages including our own tips and hints page: https://www.microsoft.com/dynamics/crm/using/usertips/tips.mspx

The related form was a bit trickier, and I was able to accomplish this with some help on traversing the html spans of our Lookup objects from Streamline Solutions, an implementation partner here in Los Angeles.

To embed a related list into the same form

Example: To show the related Opportunities on the Contact form.

 

1. Create a section for that list form.

2. In that section add an iFrame

3. Name this iFrame something relevant such as OpportunitiesFrame

4. Check the “Pass record object-type code and unique identifier as parameters.”

5. Make sure the “Restrict cross-frame scripting” is NOT enabled

6. Go into the Form Properties and enter this code to an enabled On Load function:

 

var navOpportunity;
navOpportunity = document.all.navOpps;
if (navOpportunity != null) {
navOpportunity.style.display = "none"; document.all.IFRAME_OpportunitiesFrame.src=
"/sfa/conts/areas.aspx?oId=" + crmForm.ObjectId + "&oType=2&security=852023&tabSet=areaOpps"; } else { alert("navOpportunity Not Found"); }

 

The key to the above code is:

· navOpps is the name of related Opportunities, you can retrieve the specific name of the list you want to retrieve using the IE Developer’s toolbar

· areaOpps is also an explicit reference to Opportunity and you should check to ensure the object you want is set correctly

· The first line hides the link from the navigation area, but which you can choose not to do.

· Ensure the URL is correct, the Conts above refers to the Contact Area. You should be pointing to the URL for the Parent object, not the list view object.

 

7. Save and Publish. You can set the properties of the section and iFrame to automatically fit as necessary.

 

To embed a related form into a given form

Example: To show the related regarding Opportunity from an Activity form.

 

1. Create a section for the related form to appear in.

2. In that section add an iFrame

3. Name this iFrame something relevant such as OpportunityFrame

4. Check the “Pass record object-type code and unique identifier as parameters.”

5. Make sure the “Restrict cross-frame scripting” is NOT enabled

6. Go into the Form Properties and enter this code to an enabled On Load function:

var OppId = document.all.regardingobjectid_d.getElementsByTagName('span' [0].getAttribute('oid');

if OppId != null)
{
document.all.IFRAME_OpportunityFrame.src=
"/sfa/opps/edit.aspx?id=" +OppId;
}
else
{
alert("OppId Not Found");
}

The key to this code is:

· Retrieving the Object ID embedded in the span of the Regarding lookup field

Any object that is related should have a lookup field referencing that single relationship. This allows us to retrieve a related ObjectID from the client side reference.

· Set the link correctly. Unlike the list view above, this URL should point to the page you’re displaying. Opps ties to the Opportunity page.

· This code assumes a static regarding type, meaning the frame will be Empty if the Activity is tied to a Regarding object other than Opportunity (you may want to write some client code to hide this section in this scenario.)

7. Save and Publish. You can set the properties of the section and iFrame to automatically fit as necessary.

Ah, I love it when coding is easier than thirty minute meals.  Through implementing the above, you can easily embed screens to the related object that is most used at the current implementation.  

For an embedded list, a Sales implementation can embed related Opportunities.  A Service centered implementation can embed related Cases.  A custom Bank vertical can embed a custom Financial Accounts object.

Conversely the relation back to a single object can enable us to display any object referenced in a lookup.  This could be the Regarding object of an Activity (you can easily make this robust enough to handle all object types, I didn’t go to the trouble). This could be used to show the Parent Account in a lower pane of the Contact screen.  It could be a way to display the Contact information from a given Case.

That’s a lot of flexibility for development time that should be less than a coffee break.

Now before I get bombarded with questions about enhancements, I’ll emphasize that I’ve taken esthetics aside.  We’re accepting the UI of fully embedding screens within screens.  There will be color conflicts, there will be complaints since a form embedded in a form will have a separate menu navigation area in the embedded screen.  The benefit is that whatever functionality has been built to the views and forms (such as changing columns in Views or adding Menu items) will automatically appear without any further maintenance. 

This is only a demonstration of what’s possible with the very robust and flexible UI architecture we have.   It’s definitely an option worth keeping in mind as an easy way to add some complex UI to CRM.

Since I only get so much time in the spotlight here, I did want to give a shout out to all the bloggers and MVPs out there.  The greatest feature and strength of MS CRM is our community.  It’s been just a pleasure to hopefully contribute a little back to this great pool of knowledge that I know I’ve benefited from time and again.  In the immortal words of Snoop Dogg, “Until the Next Episode…”