Using jQuery with MS CRM 4.0

Published 11/21/2008 by Henry in CRM | Javascript | jQuery

Doing a MS CRM 4.0 project, where the requirement is to create a toolbar button on a detailform.
This button needs to open a window (prefferably a modal window). In this window users can make some selections and when submitting, some processing will be done using these selections, this is not important for this post.

When thinking about this requirement, I really wanted to use something like the ASP.NET AJAX Control ToolKit's Modal Popup. Also I am really impressed by jQuery, a JavaScript library, that is an elegant and easy to use abstraction over JavaScript. It simplifies document traversing, event handling, animation and Ajax interactions. I knew about jqModal a jQuery plugin that simplifies display of dialogs and modal windows.

If you are a developer
working with MS CRM, you know that it is higly customizable, but within it's own boundries. An important matter on this project particularly is that customizations need to be supported by Microsoft. What I am about to explain is NOT FULLY SUPPORTED, because I will use external.js files, using a link element to import it in the page. But I want to explain also, that it is possible to do this without using external files, you could paste the contents of the 'jquery-1.2.6.min.js' file into the onload function of the detailform's property window.

I wanted to give it a try, because, well just think about the possibilities for a while. If you can use jQuery in CRM development, a lot of possibilities open up.

So the first thing to do is to put the 'jquery-1.2.6.min.js' file in a '_customscript' folder in the CRMWEB root folder. Next I need a way to reference the file, so it's contents can be called from the page. Like I already posted in my blogpost External js file and CRM, I like to do this using the Msxml2.XMLHTTP object. The function reads the contents of a file and imports all functions found into the current namespace, so they are accessible.

   1:  function load_script (url) 
   2:  { 
   3:      var x = new ActiveXObject("Msxml2.XMLHTTP"); 
   4:'GET', url, false); x.send(''); 
   5:      eval(x.responseText); 
   6:      var s = x.responseText.split(/\n/); 
   7:      var r = /^function\s*([a-z_]+)/i; 
   8:      for (var i = 0; i < s.length; i++) 
   9:      { 
  10:          var m = r.exec(s[i]); 
  11:          if (m != null) 
  12:              window[m[1]] = eval(m[1]); 
  13:      } 
  14:  } 
  16:  load_script("/_customscript/jquery-1.2.6.min.js"); 
  17:  load_script("/_customscript/jqModal.js"); 
  18:  load_script("/_customscript/jqDnR.js"); 
  19:  load_script("/_customscript/customscript.js"); 

Listing 1

As you can read in listing 1, the 'jqModal.js' file is also referenced, this holds the jqModal library, I also load 'jqDnR.js' a jQuery library that supports dragging and resizing. I also load 'customscript.js', this is a custom javascript file that will hold the function that is called when the button on the details window is clicked.

Because we do not want to mess with the stylesheets used by CRM we also need to add a stylesheet containig the modal window's styles to the filesystem. I made a css folder below the _customscript folder, the folder where I put the javascript libraries. You could add these styles through Dom manipulation in JavaScript also, to keep the customization supported by Microsoft!
I use the following code, you can do this in the OnLoad function of the details form, or in a separate function, that you call from the Onload function. I use the function that also checks if the reference exists already, but for simplicity put this in the On Load after listing 1.

   1:  var styleSheet = '/_customscript/css/modalWindow.css';
   2:  var head = document.getElementsByTagName("head")[0];
   3:  var linkElement = document.createElement('<link rel="stylesheet" type="text/css" href="'+ styleSheet +'" />');
   4:  head.appendChild(linkElement);

Listing 2

In listing 2 I create a link element with a reference to a style sheet and append this element to the head element of the html page (CRM's detail form).

Listing 3 will display the contents of the css style sheet:

   1:  .jqmWindow  
   2:  { 
   3:  	display: none; 
   4:  	position: fixed; 
   5:  	top: 17%; 
   6:  	left: 50%; 
   7:  	margin-left: -300px; 
   8:  	background-color: #E4EEF9; 
   9:  	border-width: 1px; 
  10:  	border-style: solid; 
  11:  	border-color: #0a6cce; 
  12:  	padding: 0px; 
  13:  	width: 374px; 
  12:  	height: 264px; 
  13:  } 
  15:  .jqmOverlay { filter: alpha(opacity=70); opacity: 0.7; }
  17:  .jqmTitle 
  18:  { 
  19:  	cursor: move; 
  20:  	background-color: #6793CC; 
  21:  	border: solid 1px #6793CC; 
  22:  	color: #FFFFFF; 
  23:  	font-weight: bold; 
  24:  	width: 100%; 
  25:  } 
  27:  .jqmTitleText { float: left; position: relative; }
  29:   /* Fixed posistioning emulation for IE6  
  30:      Star selector used to hide definition from browsers other than IE6  
  31:      For valid CSS, use a conditional include instead */  
  32:  * html .jqmWindow 
  33:  { 
  34:    position: absolute; 
  35:    top: expression((document.documentElement.scrollTop || document.body.scrollTop) + 
  36:         Math.round(17 * (document.documentElement.offsetHeight || document.body.clientHeight) / 100) + 'px'); 
  37:  } 
  39:  .jqmIFrame { width: 100%; height: 100%; }
  41:  .jqmClose 
  42:  {  
  43:    width: 20px; 
  44:  	font-weight: bold; 
  45:    float: right; 
  46:  	cursor: pointer; 
  47:    color: #FFFFFF; 
  48:  	background: #6793CC; 
  49:    border: 1px solid #6793CC; 
  50:  }  

Listing 3

Next we need to add the div to CRM's details page. I wanted to this using the DOM, but for some reason it would not work. If anybody knows the reason why, please let me know!
Instead i used  the following approach, again: you can do this in the OnLoad function of the details form, or in a separate function, that you call from the Onload function.
In the real world project I use the function, but for simplicity in this example, I just put this in the On Load after listing 2.

   1:  // Not using dom to add new elements, because for some reason that does not work!
   2:  var body = document.getElementsByTagName("body")[0];
   3:  var modalDiv = document.createElement('<div id="dialog" class="jqmWindow" ></div>');
   4:  var titleDiv = document.createElement('<div id="jqmTitle" class="jqmTitle"></div>');
   5:  var modalTitle = document.createElement('<span id="jqmTitleText" class="jqmTitleText"></span>');
   6:  modalTitle.innerText = 'Documentenuitvoer';
   8:  var modalButton = document.createElement('<button class="jqmClose" ></button>');
   9:  modalButton.innerText = 'X';
  11:  var modalIFrame = document.createElement('<iframe id="jqmContent" class="jqmIFrame" frameborder="0" scrolling="no"></iframe>');
  12:  titleDiv.appendChild(modalButton);
  13:  titleDiv.appendChild(modalTitle);
  15:  modalDiv.appendChild(titleDiv);
  16:  modalDiv.appendChild(modalIFrame);  
  18:  body.appendChild(modalDiv);

Listing 4

As you can read in listing 4 first I get the body element and assign it to the 'body' variable. Than I create two div elements, the reason I do not create a div element and use setAttribute to set the attributes, but create the element in one line using a string containing the whole tag is that I could not get it to work, again let me know if you do! The first div will be our modal window. The second with id 'jqmTitle' is the header. Next I Create a span that will contain the text for the header, a (close) button that will be placed in the header on the right side.
And an iframe, in this iframe any (custom) page can be loaded.

To initialize the modal window, we have to add listing 5 to the OnLoad function of the details form in CRM after listing 4.

   1:  $().ready(function() {
   2:    $('#dialog').jqm();
   3:    $('#dialog').jqm().jqDrag('#jqmTitle'); 
   4:  });

Listing 5

In Listing 5 we use jQuery syntax. We attach the code to the OnReadyState eventhandler of the document. when the document is fully loaded the element with id 'dialog' will be registered as a jqModal window by line 2. Line 3 registers the dragging functionality of the element with id 'jqmTitle' inside the modal window (our header div).

Now we only have to do two more things, the first is that we have to change isv.config.xml to create the button on our detail form, I use the contact and need the modal window functionality on the contact entity's form. I made the following change to the isv.config.xml:

   1:  <!-- Microsoft Customer Relationship Management Entities (Objects) -->
   2:  <Entities>
   3:      <Entity name="contact">
   4:        <MenuBar>
   5:          <CustomMenus>
   6:            <Menu>
   7:              <Titles>
   8:                <Title LCID="1043" Text="Documenten" />
   9:              </Titles>
  10:              <MenuItem JavaScript="ShowModalWindow();">
  11:                <Titles>
  12:                  <Title LCID="1043" Text="Plaats document in DocumentUitvoer" />
  13:                </Titles>
  14:              </MenuItem>
  15:            </Menu>
  16:          </CustomMenus>
  17:        </MenuBar>
  18:      </Entity>
  19:  </Entities>

Listing 6

Listing 6 displays part of the xml, the IsvConfig element holds an element configuration , which holds the Entities element. I need the contact Entity. The MenuBar element holds CustomMenus, which holds Menu. I added a Menu element with Title "Documenten" (LCID="1043" which means dutch). The Menu element holds MenuItem elements. I added a MenuItem element With a dutch Title and a JavaScript attribute that has the value 'ShowModalWindow()'. When we import the isv.config.xml and publish the customization changes, we see the menuitem is added.

In listing 1 on line 19 we saw that the external javascript file 'customscript.js' is loaded in the OnLoad function of the details form. 'customscript.js' is a custom  javascript file that holds the 'ShowModalWindow()' function.
As I mentiod earlier we had to do 2 more things, the first was the customization of the isv.config.xml and the second is to create this function: 

   1:  var customPagesVirtualDir = 'Custompages';
   3:  function ShowModalWindow()
   4:  {
   5:      var contactId = crmForm.ObjectId;
   6:      var popUpUrl = '/' + customPagesVirtualDir + '/Popup.aspx?contactid=' + contactId;
   7:      $('#jqmContent').html('').attr('src', popUpUrl);
   8:      $('#dialog').jqmShow({modal: true});
   9:  }

Listing 7


I added line 1 after Imane pointed out the variable customPagesVirtualDir was not declared, thanks for telling me!

Listing 7 displays the 'ShowModalWindow()' function, the crmForm.ObjectId is assigned to a variable contactId. A variable popupUrl is filled with the url to a custom aspx page. Line 7 is jQuery syntax and assigns the url to the src attribute of the iframe inside the modal window. Line 8 opens the modal window and assigns true to the modal property, So the behaviour of the dialog will be like a modal dialog.


CRM's detail form contact entity
Picture 1: Contact details form

In the menu a button is added:

Picture 2: Menu item

 When a user clicks on the menu-item, the function ShowModalDialog is called in the external js file that is referenced in the OnLoad function of the page where the jQuery plugin loads the modal window (client-side!) and the users sees picture 3:

jQuery and jqModal in action on a contact details form
Picture 3: jQuery and jqModal in action on a contact details form

Personally I think this is awsome, jQuery is real easy to use and complex matters seem simple. It is a joy to use jQuery with CRM. This combination opens up a world of possibilities. Ofcourse CRM is a web application and customizable, so you could expect external libraries targeted to web applications to work with it. But for me the experience to open a modal dialog like this on a CRM details window without hacking CRM code...
Well I will stop rambling, you can judge yourself.

Henry Cordes
My thoughts exactly...

While creating and editing a database in SQL server 2008 I soon ran into a brick wall, or a 'by design' feature of the Database Management Studio.
When you design a table in a database and then try to make a change to a table structure that requires the table to be recreated, the Database Management Studio will not allow you to save the changes.
This is caused by a configuration setting that default results in the following dialog:

Error dialog

This dialog states: "Saving changes is not permitted. The changes you have made require the following tables to be dropped and re-created. You have either made changes to a table that can't be re-created or enabled the option Prevent saving changes that require the table to be re-created."

You can only react clicking the Cancel button.
And than Management Studio shows this dialog:


So what you want to do to configure the setting with the value you want (IMHO should be the default setting!).
Go to: Tools > Options

Tools menu choose Options

Select the tab Designers and choose Tables and designers

And uncheck the option: "Prevent saving changes that require table re-creation".
Once you now save changes it will work.

Henry Cordes
My thoughts exactly...

SQL Server 2008 install error

Published 11/2/2008 by Henry in SQL

I wanted to start using SQL server 2008 on my dev machine.

Microsoft SQL Server 2008 logo

I removed all sql server 2005 installations and Visual Studio 2005 (BI Tools).
I am running vista 64 bit, so I install SQL Server 2008 64 bit.
I needed to install sql server 2008 on another drive than the default suggested 'C:\Program Files\Microsoft Sql Server\'. The drive and path I wanted to use was 'D:\Program Files\Microsoft Sql Server\'.
During setup (when selecting features), I received the following error : "The INSTANCESHAREDWOWDIR command line value was not specified. This value must be specified when the INSTANCESHAREDDIR value is specified."
Yeah, I know this is really helpfull, don't you agree...
It appears that this error only occurs if I select an install dir different from the default one (C:\Program Files\Microsoft Sql Server).

I found a work-around:

  1. Run the setup, select all the features you want to install. DO NOT change the install folder, press next 
  2. When you see the screen displaying the configuration summary (just continue the setup untill you can copy the ConfigurationFile.ini path)
  3. Copy/paste the  ConfigurationFile.ini file on the drive/folder you want to use for installation
  4. Edit this file to set correct values for INSTALLSHAREDDIR & INSTALLSHAREDWOWDIR (for my case I set D:\Program Files\Microsoft Sql Server and D:\Program Files\Microsoft Sql Server (x86))
  5. This step was neccesary because I want to use mixed mode authentication, if you also want to use mixed mode authentication you have to add the sa password to the ini file:
     If you have: SECURITYMODE="SQL"
     Add this entry to the file:
  6. Run setup from the command line : setup.exe /q /action=Install /configurationfile=<Path to your custom .ini>
     In my case, I first did a 'G:' and than an '<ENTER>' in the command prompt to navigate to the SQL Server 2008 installation Drive, than I entered:
     setup.exe /q /action=Install /configurationfile="D:\Program Files\Microsoft Sql Server\ConfigurationFile.ini"
     Note : the /q stands for silent mode. I didn't try without this switch.

The setup build I used was:  10.00.1600.22.

In the end I succesfully installed SQL server 2008 on my dev machine, but it took me a lot longer than initially was the plan.

Henry Cordes
My thoughts exactly...