Microsoft CRM 4.0 Look and Feel Kit

I notice confusion out there about CSS styles to achieve a native CRM look and feel, for reasons I’m not sure of many folks can’t find the CSS template provided in the CRM SDK which can be downloaded here. Additionally the CSS template that is included by Microsoft doesn’t have much in it, for example there aren’t any CSS styles for grids.

For those of you new to CRM what were really discussing here is iFrames embedded in to your CRM entity form page so the need to match up to CRM to present seamless integration and a clean user interface is important.

I’m going to post the CSS template and images I use in my projects and as I add more styles to it I will update it from time to time.

Click here to download the CRM Look and Feel Kit

Advertisements

Attaching Javascript code to a CRM Toolbar Button

Attaching Javascript code to a tool bar button can be very ugly.  Generally the code needs to be included within the CRM, ISV Config  XML file.  It’s pretty easy to add a button via the ISV Config.  Click Here for more information on adding custom buttons to a Microsoft Dynamics CRM Entity form, toolbar.

The red highlighted Javascript tag below shows you where you would typically place your JavaScript or JavaScript function call but this isn’t the best place for the JavaScript.  I have seen huge JavaScript routines embedded in to the tag whci makes debugging and readability a painful exercise.  Even if you call a JavaScript function and leave the tag nice and cleas as shown here that Javascript function has to be maintained outside of the CRM Model.

<Entities>
        <Entity name=”new_customentity”>
          <ToolBar ValidForCreate=”0″ ValidForUpdate=”1″>
            <ToolBarSpacer></ToolBarSpacer>
            <Button Icon=”/_imgs/ico_18_debug.gif” JavaScript=”
DuplicateRecord (10016);”>
              <Titles>
                <Title LCID=”1033″ Text=”Duplicate Record” />
              </Titles>
              <ToolTips>
                <ToolTip LCID=”1033″ Text=”Copies a record based on this open record.” />
              </ToolTips>
            </Button>
            <ToolBarSpacer />
          </ToolBar>
        </Entity>
      </Entities>
 

The solution is pretty simple.

If we change the structure of our JavaScript function a bit we can simply place it in a Entity’s form OnLoad Event.  The key syntax is simply  MyFunction = function() .

Here is a working example of a function I wrote which calls a web service to copy the  current open record and create a new one based on it,

The CRM Form OnLoad Event JavaScript

DuplicateRecord = function() {

    try {
        var oXmlHTTP = new ActiveXObject(“Msxml2.XMLHTTP”);
       oXmlHTTP.Open(“POST”, “/somepath/ DuplicateRecord Service.asmx/ DuplicateRecord?mso-spacerun: yes”>      + crmForm.ObjectId, false);
        oXmlHTTP.setRequestHeader(“Content-Type”, “application/x-www-form-urlencoded”)
        oXmlHTTP.Send(‘jobId=’ + crmForm.ObjectId);
        var newId = oXmlHTTP.responseXML.selectSingleNode(“string”).text;
   }
    catch (e) {
        debugger;
        return null;
    }
}

 

The ISV Config  XML Tag

<Button Icon=”” Url=”” PassParams=”1″ WinParams=”” WinMode=”0″ JavaScript=” DuplicateRecord ();”>
              <Titles>
                <Title LCID=”1033″ Text=” Duplicate This Record ” />
              </Titles>
              <ToolTips>
                <ToolTip LCID=”1033″ Text=”Copy Record” />
              </ToolTips>
            </Button>
 

Conclusion

I like this approach because now all our JavaScript is still maintained within the CRM Entity’s and for a number of good reasons that’s where a Microsoft Dynamics CRM  application should store the JavaScript.  Because its with the entity it will get exported with your model and other customizations.

How to remove the help menu’s from CRM 4.0

crmlogo1

The standard Microsoft CRM 4.0 help menu’s offer a lot more than help, they offer upgrade information, links to partners and solution providers and many other options that might not be suitable for many ISV’s or partners creating custom CRM 4.0 applications.  Since Microsoft doesn’t provide an option to remove these menus’s I came up with the following solutions.  Please consider  this is an unsupported modification.

There are two main areas that the help menu’s are presented to the user, the 1st is in the main CRM work area (shown below).

CRM Main Page

CRM Main Page

To remove or alter this menu we must alter one of the CRM 4.0 base pages, bar_Top.aspx, the default location is  \Program Files\Microsoft Dynamics CRM\CRMWeb\_root\.   Take note your CRMWeb folder might be installed elswhere depending on your virtual directory structure.
Since we will be overloading the menu’s we need to place the new code in a location that executes after the menu elements have been rendered.  I recommend just after the closing body tag.

The JavaScript to hide a menu is very simple:
var helpMenu = document.getElementById(‘mnu_helpUpdates’);
helpMenu.style.display = ‘none’;

The code above will hide the Update Help menu.  I recommend not making dramatic edits to the base CRM pages, a better approach is to use a global JavaScript file and include it in to the base page bar_Top.aspx.

So far all we have done is remove a menu from the main CRM page, each entity edit page contains it’s own help menu’s.  Most of the edit pages can be found at \Program Files\Microsoft Dynamics CRM\CRMWeb\sfa\  within the SFA folder the subfolders are named after the standard entity’s for example the Accounts entity’s path is \\dev1\c$\Program Files\Microsoft Dynamics CRM\CRMWeb\SFA\accts and the pages are almost always named edit.aspx.   We can use the same code as before and again I recommend placing the include after the closing body tag.
The good new is you don’t have to handle all your custom entity pages  one by one, by editing the edit.aspx page located at \Program Files\Microsoft Dynamics CRM\CRMWeb\UserDefined\  all your custom entity pages  will be taken care of.
You might be wondering if there is a centtral place that you could place your code to handle all the standard entity pages but I haven’t found such a location that works consitantly across the board.

The other menu ID’s are found here in the completed script:
<script language=”JavaScript”>
var helpMenu = document.getElementById(‘mnu_about’);
helpMenu.style.display = ‘none’;
var helpMenu = document.getElementById(‘mnu_helpUpdates’);
helpMenu.style.display = ‘none’;
var helpMenu = document.getElementById(‘mnu_crmLive’);
helpMenu.style.display = ‘none’;
var helpMenu = document.getElementById(‘mnu_helpOn’);
helpMenu.style.display = ‘none’;
var helpMenu = document.getElementById(‘mnu_troubleShoot’);
helpMenu.style.display = ‘none’;
var helpMenu = document.getElementById(‘mnu_helpContent’);
helpMenu.style.display = ‘none’;
var helpMenu = document.getElementById(‘mnu_adminGuide’);
helpMenu.style.display = ‘none’;
</script>

Good luck!
Brenden