Tag Archives: HTML Web resource in MS CRM 2011

Creating html web resource to show image attached in Notes Part 2

In our previous post we explained how we can get image from notes using OData endpoints, in this post we are going to explain how we can create html web resource and use our java script method to get and display image. We need to implement two steps:

  •   Create html page
  •   Deploy html page and SDK.REST.js using web resource

Create html page

Create html page using any html editor, use following code for html page

<html lang=”en-us”><head>
<script src=”../ClientGlobalContext.js.aspx”></script>
<script type=”text/javascript” src=”SDK.REST.js”></script>
<script type=”text/javascript”>
//check if document is loaded or not
var imgControl = document.createElement(“IMG”);
//Check if documented loaded fully
document.onreadystatechange = function () {
if (document.readyState == “complete”) {
getnotesImages();
}
}
//this function is used to get image from notes
function getnotesImages()
{ //get regarding object id
var regardingObjectId=window.parent.Xrm.Page.data.entity.getId();
//assign notes entity name
var entitySchemaName=”Annotation”;
var odataQuery = “?$top=1&$select=AnnotationId,DocumentBody,MimeType&” +
“$filter=ObjectId/Id eq guid'” + regardingObjectId +
“‘ and IsDocument eq true and startswith(MimeType,’image/’) “;
//call retrieveMultipleRecords method in SDK.REST javascript script library
SDK.REST.retrieveMultipleRecords(entitySchemaName, odataQuery, getnotesImagesCallback, function (error) { alert(error.message); }, function(){});
}
//process callbanck result
function getnotesImagesCallback(resultSet)
{
if (resultSet.length > 0) {
var mimeType = resultSet[0].MimeType;
var body = resultSet[0].DocumentBody;
imgControl.src=”data:” + mimeType + “;base64,” + body;
document.getElementById(‘imagediv’).appendChild(imgControl);
}
}
</script>
<meta charset=”utf-8″></head><body style=”zoom: 1;”>
<div style=”width: 100px;” id=”imagediv”></div>
</body></html>

Deploy html page and SDK.REST library using web resource

Using following steps to deploy html page and SDK.REST library in MS CRM.

  •       Navigate to Settings -> Customization-> Customize the System from top navigation bar
  •       Navigate to Components -> Web Resources-> New
  •       Fill details like following screen

saveimg

  • Click on browse button and select your html web resource.
  •        Click on Save and then Publish
  •        Navigate to Components -> Web Resources-> New
  •        Fill details like following screen

sdk.rest

  • Click on browse and select SDK.REST.js from MS CRM SDK

Note: Please refer previous post for SDK.REST.js location.

Now we can place our html web resource in the account entity form by navigating Insert  -> Web Resource options. Save your changes and then publish account entity form.

form

When you will try to open your account record you should be able to see attached images loaded into html web resource.

img

HIMBAP | Need any help in Microsoft CRM 2015 Contact US !!

2 Comments

Filed under MS CRM 2011, MS CRM 2013, MS CRM 2013 Web Resource, MS CRM 2015

Step by Step creating Quick Entity View in MS CRM 2011

During one of our projects we got a requirement to show related entity fields, based on the lookup selection, just like the Quick Entity View feature that we have in Microsoft CRM 2013, so I thought of replicating that for Microsoft CRM 2011. In this article I am sharing code and how to do that so that it can help someone with similar requirements.

Let’s say we want to show contact fields in an account entity form based on the primary lookup selection. To implement this requirement we can use a HTML web resource and use the rest of the endpoints to get contact data based on the contact id selected. So mainly we have the following three steps:

  • Create HTML web resource to get data from child entity and create a html table on the fly.
  • Add HTML web resource in the parent entity form.
  • Create an onchange handler to refresh a HTML web resource when the lookup value is changed.

So let’s create a HTML web resource and name it “/ContactQuickView.html” as in the following.

htmlwebresource

Click on Text Editor and paste below code:-

<html lang=”en-us”><head>
<title>Contact Quick View</title>
<style type=”text/css”>
body
{
font-family: segoe ui;
background-color: #F6F8FA;
}
table
{border-spacing:8px;
width=”100%”;
}
td  { width: 130px;
background-color: #F6F8FA;
font-size: 13px;
}
</style>
<script src=”../ClientGlobalContext.js.aspx”></script>
<script type=”text/javascript”>
//check if document is loaded or not
document.onreadystatechange = function () {
if (document.readyState == “complete”) {
parseEntityID();    }  }
function parseEntityID() {
var queryParam = GetGlobalContext().getQueryStringParameters().data;
var fields = queryParam.split(“,”);
var TabName=fields[1];
var SectionName=fields[2];
if ((window.parent.Xrm.Page.data.entity.attributes.get(fields[0])!= null) && (window.parent.Xrm.Page.data.entity.attributes.get(fields[0]).getValue()!=null))  {
var ContactID = window.parent.Xrm.Page.data.entity.attributes.get(fields[0]).getValue()[0].id;
//change tab and section name here
window.parent.Xrm.Page.ui.tabs.get(TabName).sections.get(SectionName).setVisible(true);
RetrieveContactRecord(ContactID);    }
else
{   window.parent.Xrm.Page.ui.tabs.get(TabName).sections.get(SectionName).setVisible(false);   }  }
//Read contact information
function RetrieveContactRecord(id) {
var ServerURL=window.parent.Xrm.Page.context.getClientUrl();
var ServiceURL=ServerURL+”/xrmservices/2011/organizationdata.svc”;
var req = new XMLHttpRequest();
req.open(“GET”, ServiceURL + “/Contact” + “Set(guid'” + id + “‘)”, true);
req.setRequestHeader(“Accept”, “application/json”);
req.setRequestHeader(“Content-Type”, “application/json; charset=utf-8”);
req.onreadystatechange = function () {
if (this.readyState == 4 /* complete */) {
if (this.status == 200) {   successCallback(JSON.parse(this.responseText).d);                }
else {  alert(‘Error while reading contact information’);  }  }
};
req.send();     }
//Added for cross browser support.
function setText(element, text) {
if (typeof element.innerText != “undefined”) {
element.innerText = text;
}
else {  element.textContent = text;    }  }
//Generate html table to show records
function successCallback(ResultSet)
{
//store lables
var lbs=new Array();
lbs[0]=”Business Phone”;
lbs[1]=”Email”;
lbs[2]=”City”;
lbs[3]=”ZIP/Postal Code”;
lbs[4]=”State/Province”;
lbs[5]=”Country/Region”;

//store values
var vals=new Array();
vals[0]=(ResultSet.Telephone1!=null)?ResultSet.Telephone1:” “;
vals[1]=(ResultSet.EMailAddress1!=null)?ResultSet.EMailAddress1:” “;
vals[2]=(ResultSet.Address1_City!=null)?ResultSet.Address1_City:” “;
vals[3]=(ResultSet.Address1_PostalCode!=null)?ResultSet.Address1_PostalCode:” “;
vals[4]=(ResultSet.Address1_StateOrProvince!=null)?ResultSet.Address1_StateOrProvince:” “;
vals[5]=(ResultSet.Address1_Country!=null)?ResultSet.Address1_Country:” “;

//Create a table and header using the DOM
var oTable = document.createElement(“table”);
var oTBody = document.createElement(“tbody”);

for(var i=0; i<6; i++)
{
var oTRow = document.createElement(“tr”);
var oTRowBlank = document.createElement(“td”);
var oTRowTDBlank1= document.createElement(“td”);
var oTRowTDBlank2= document.createElement(“td”);
j=i;
var oTRowTD1 = document.createElement(“td”);
oTRowTD1.style.color=’003DB2′;
setText(oTRowTD1, lbs[i]);
var oTRowTD2 = document.createElement(“td”);
setText(oTRowTD2, vals[j]);
oTRow.appendChild(oTRowTD1);
oTRow.appendChild(oTRowTD2);
oTRow.appendChild(oTRowBlank);
oTRow.appendChild(oTRowTDBlank2);

if(i+1<lbs.length)
{
var oTRowTD3 = document.createElement(“td”);
oTRowTD3.style.color=’003DB2′;
setText(oTRowTD3, lbs[i+1]);
var oTRowTD4 = document.createElement(“td”);
setText(oTRowTD4, vals[j+1]);
oTRow.appendChild(oTRowTD3);
oTRow.appendChild(oTRowTD4);
oTRow.appendChild(oTRowTDBlank1);
}
i++;
oTBody.appendChild(oTRow);
}
oTable.appendChild(oTBody);
document.body.appendChild(oTable);   }
</script>
<meta charset=”utf-8″></head><body>
</body></html>

Note: Please make sure to change quotations sign if you are copying code.

Now we have html web resource ready, place it under the parent entity form, while placing web resource we need to pass three parameters:

  • Name of the lookup field for child entity.
  • Name of the tab and section where we have placed web resource like below

htmlwebresourceparameter

Now we need to create a JS webresource and need to use below code. We have to call this function on primary contact  lookup field onchange on account entity form to refresh web resource once value will be changed.
function reloadTerrtoryQuickView()

{ var wrControl = Xrm.Page.ui.controls.get(“WebResource_TerritoryQuickView”);

wrControl.setSrc(wrControl.getSrc()); }

And once we will open account form it will show related information based on the primary contact selected like below

contactviewImageEnjoy !!!

Leave a comment

Filed under MS CRM 2011, Step By Step MS CRM 2011