MSCRMBLOG.NET - Microsoft CRM & Sharepoint Blog

Looks cool doesn’t it. well here goes nothing..

to achieve the above you will need the following (click read more link..)

// the following code is for the hover over lookup window

function OnCrmPageLoad()
{
 /*
  Reference the to Lookup, Provide the lookup (control) id.
 */
  var PrvToLui = new LookupPreview("new_primarycontactid");
 /*
  Add Account Preview Information ,
  returns an account entity wrapper object
 */
 var accountEntity = PrvToLui.AddEntity("account");

 /*
  Add Account Preview Attributes,
  Provide lable and schema name for each attribute
 */
  accountEntity.AddAttribute("Business Phone","address1_line1");
  accountEntity.AddAttribute("Mobile Phone","address1_city");
  accountEntity.AddAttribute("Fax","address1_stateorprovince");
  accountEntity.AddAttribute("E-mail","address1_postalcode");
 /*
  Add Related Entity (Primary Contact) Information
  AddLinked requires the entity name and
  lookup field schema name on the account.
 */
 var contactEntity = accountEntity.AddLinked("contact","primarycontactid");
  contactEntity.AddAttribute("Primary Contact","fullname");
  contactEntity.AddAttribute("Contact Phone","telephone1");

 /* ------------------------------------------------------------------ */

 //Contact Entity Preview
 var contactEntity = PrvToLui.AddEntity("contact");
  contactEntity.AddAttribute("Business Phone","telephone1");
  contactEntity.AddAttribute("Mobile Phone","mobilephone");
  contactEntity.AddAttribute("Fax","fax");
  contactEntity.AddAttribute("E-mail","emailaddress1");

 var accountEntity = contactEntity.AddLinked("account","parentcustomerid");
   accountEntity.AddAttribute("Parent Company", "name");
   accountEntity.AddAttribute("Parent Street","address1_line1");
   accountEntity.AddAttribute("Parent Suburb","address1_line2");
   accountEntity.AddAttribute("Parent State","address1_stateorprovince");
   accountEntity.AddAttribute("Parent Postcode","address1_postalcode");
   accountEntity.AddAttribute("Parent Website","websiteurl");
 /* ------------------------------------------------------------------ */

}

function LookupPreview( lookupId )
{
   var Instance = this;
  Instance.Lookup = document.getElementById( lookupId );

   if(  isNullOrEmpty(Instance.Lookup) )
  return;

   //Public
   Instance.Entities = [];

   Instance.AddEntity = function(entityName){
  var Entity = new Object();
   Entity.Name = entityName;
   Entity.AddAttribute = function( labelName , attrName ){
    var Attributes = Instance.Entities[entityName].Attributes;
    var attribute  = new Attribute(entityName , attrName , labelName , attrName);
     Attributes[Attributes.length] = attribute;
     DisplayAttributes[DisplayAttributes.length] = attribute;
      }
   Entity.Attributes  = [];
   Entity.LinkedByName  = [];
   Entity.LinkedByIndex = [];
   Entity.AddLinked = function( lnkEntityName , referencingAttribute )
   {
    var LinkEntity = new Object();
     LinkEntity.Name = lnkEntityName;
     LinkEntity.Attributes = [];
     LinkEntity.RefAttribute = referencingAttribute;
     LinkEntity.AddAttribute = function( labelName , attrName )
     {
      var attribute = new Attribute(entityName , attrName , labelName , LinkEntity.RefAttribute + "." + attrName);
       LinkEntity.Attributes[LinkEntity.Attributes.length] = attribute;
       DisplayAttributes[DisplayAttributes.length] = attribute;
     }
     Entity.LinkedByIndex[Entity.LinkedByIndex.length] = Entity.LinkedByName[name] = LinkEntity;
    return LinkEntity;
   }
   Instance.Entities[entityName] = Entity;
  return Entity;
   }

   Instance.Show = function(dataElement)
   {
  var control   = Instance.Lookup;
  var DataValue = control.DataValue;

  if( isNullOrEmpty(DataValue) )
   return;
  if( isNullOrEmpty(Instance.Entities[DataValue[dataElement.Index].typename]) )
   return;

  TooltipPopup = window.createPopup();            

  if( !dataElement.PreviewHTML )
  {
   var ToolTipHTML = "<fieldset style='width:100%;height:100%;border:1px solid gray;background-color: #d8e8ff;filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#eff3ff,EndColorStr=#c6dfff);padding-left:2px;'><legend style='background-color:#eff3ff;width:100;padding-left:13px;border:1px solid gray;font-size:12px;font-family:tahoma'>Preview</legend>";
   var xmlHttp = CreateXmlHttp();
   var xml = "<soap:Envelope xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/"";
    xml += " xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"";
    xml += " xmlns:xsd="http://www.w3.org/2001/XMLSchema">";
    xml += GenerateAuthenticationHeader();
    xml += "<soap:Body>";
    xml += "<Fetch xmlns="http://schemas.microsoft.com/crm/2007/WebServices">";
    xml += "<fetchXml>";

   var fetchxml = "<fetch version='1.0' output-format='xml-platform' mapping='logical' distinct='false'>";
   var DataVal  = control.DataValue[dataElement.Index];
   var entity   = DataVal.typename;
    fetchxml += "<entity name='" + entity + "'>";
   var attributes = Instance.Entities[entity].Attributes;
    for( var i = 0 ; i < attributes.length ; i++ )
      fetchxml += "<attribute name='" + attributes[i].Name + "'/>";
    fetchxml += "<filter type='and'>";
    fetchxml += "<condition attribute='" + entity + "id' operator='eq' value='" + DataVal.id + "'/>";
    fetchxml += "</filter>";

    for( var i = 0 ; i < Instance.Entities[entity].LinkedByIndex.length ; i++ )
    {
     var linked = Instance.Entities[entity].LinkedByIndex[i];
     fetchxml += "<link-entity name='" + linked.Name + "' from='" + linked.Name + "id' to='" + linked.RefAttribute+ "' visible='false' link-type='outer'>";
     for( var j = 0 ; j < linked.Attributes.length ; j++ )
      fetchxml += "<attribute name='" + linked.Attributes[j].Name + "'/>";
     fetchxml += "</link-entity>";
    }
    fetchxml += "</entity>";
    fetchxml += "</fetch>";

    xml += _HtmlEncode(fetchxml);
    xml += "</fetchXml>";
    xml += "</Fetch>";
    xml += "</soap:Body>";
    xml += "</soap:Envelope>";

    xmlHttp.open("POST", "/mscrmservices/2007/crmservice.asmx", false );
    xmlHttp.setRequestHeader("Content-Type", "text/xml; charset=utf-8");
    xmlHttp.setRequestHeader("SOAPAction", "http://schemas.microsoft.com/crm/2007/WebServices/Fetch");
    xmlHttp.send(xml);

   var resultDoc   = loadXmlDocument(xmlHttp.responseXML.text);
   var previewHtml = "<br style='line-height:2px'/><table width='100%' style='font:12 px tahoma'>";
    dataElement.Width = 0;
    //debugger
    for( var i = 0 , j = 1; i < DisplayAttributes.length ; i++ )
    {
     var attribute = DisplayAttributes[i];
     if( attribute.Entity != entity ) continue;

     var attrNode  = resultDoc.selectSingleNode("//" + attribute.XPathName );
     var attrValue = (attrNode)? attrNode.text:"";

      dataElement.Height = (j++) * 22;
      var maxLength  = ( attrValue.length + attribute.Label.length ) * 9;
      if( dataElement.Width < maxLength )
       dataElement.Width = maxLength;
      previewHtml += "<tr><td style='padding:3px 0px 0px 0px;color:brown'><nobr>" + attribute.Label + "</nobr></td><td><nobr>" + attrValue  + "</nobr></td></tr>";

    }

    dataElement.Height += 20;

    ToolTipHTML += previewHtml;
    ToolTipHTML += "</table></fieldset>";
    dataElement.PreviewHTML = ToolTipHTML;
   }

   TooltipPopup.document.body.innerHTML = dataElement.PreviewHTML;      

  var Position = getControlPostion();
  var Left   = Position.X + 1;
  var Top    = Position.Y + 5;

   TooltipPopup.show( Left , Top - dataElement.parentElement.scrollTop , dataElement.Width, dataElement.Height , null );
   }

   Instance.Hide = function()
   {
  if( TooltipPopup )
   TooltipPopup.hide();
   }

   Instance.OnLookupChange = function()
   {
  var jump = 0;
  if( Instance.Lookup.DataValue != null )
     {
   var DataElementsLen = Instance.Lookup.parentElement.previousSibling.childNodes[0].childNodes.length;
   var DataValuesLen   = Instance.Lookup.DataValue.length;
    jump = (DataElementsLen == DataValuesLen)? 1:2;

     for( var i = 0 ; i < DataValuesLen*jump ; i+=jump )
     {
    var DataValueElemet = Instance.Lookup.parentElement.previousSibling.childNodes[0].childNodes[i];
    if( !isNullOrEmpty(DataValueElemet.onmouseover) ) continue;

    DataValueElemet.Preview = Instance;
    DataValueElemet.Index = i/jump;
    DataValueElemet.onmouseover = function(){
     this.Preview.Show(this);
    }
    DataValueElemet.onmouseout = function(){
     this.Preview.Hide();
    }
     }
     }
   }

   //Private
   var TooltipPopup;
   var DisplayAttributes;

   function Init()
   {
  DisplayAttributes = [];
  Instance.Lookup.attachEvent( "onchange" , Instance.OnLookupChange );
  Instance.OnLookupChange();  //First Time
   }

   function Attribute(entityName,attrName,attrLabel,attrXpathName)
   {
  this.Name = attrName;
  this.Entity = entityName;
  this.Label = attrLabel;
  this.XPathName = attrXpathName;
   }

   function getControlPostion()
   {
  control = event.srcElement;
  var Position = new Object();
  var controlHeight = control.offsetHeight;
  var iY = 0, iX = 0;
  while( control != null )
  {
   iY += control.offsetTop;
   iX += control.offsetLeft;
   control = control.offsetParent;
  }
  Position.X = iX + screenLeft;
  Position.Y = iY + screenTop + controlHeight;
  return Position;
    }

 function isNullOrEmpty( obj ){
  return obj == null || typeof(obj) == "undefined" || obj == "";
 }

   Init();
}

OnCrmPageLoad();

OK, this is what needs to be edited if you need custom attributes listed in the preview window.

you may edit the following code block:

  contactEntity.AddAttribute("Business Phone","telephone1");
  contactEntity.AddAttribute("Mobile Phone","mobilephone");
  contactEntity.AddAttribute("Fax","fax");
  contactEntity.AddAttribute("E-mail","emailaddress1");

“Business Phone” represents the label on the preview form
“telephone1″ is the attribute on the contact entity

I have uploaded a text file with all the code at: http://mscrmblog.net/downloads/previewWindow.txt

This code is pretty self explanatory.. however if you need some help, email me or post a comment

MSCRM-Admin CRM 4.0, JavaScript crm, crm4, field, JavaScript, preview, preview window