Hi All,
Today we got a Requirement to Create a Custom Page that
should fetch data from Custom Entity and it should display the same in HTML
As per our Requirement we need to show page like below
screen shots.
For this we need to have
1.
Name Field
2.
Url Field
3.
Image Field
4.
Description Field
5.
Order Field
Create a Custom Entity and name it as new_CustomEntity, and
create the fields
è
New_name(String)
è
New_URL(String)
è
New_EntityImageUrl(Create as an OOB Entity
Image)
è
New_Description(Multi Line String)
è
New_Order(Whole Nubmer)
Open Visual Studio and Add New HTML Page to the Solutions
Add the below Scripts
<script type="text/javascript" src="new_/SDK.REST.js"></script>
<script type="text/javascript" src="new_SDK.Metadata.js"></script>
<script type="text/javascript" src="new_GetOptionSetSDK.js"></script>
<script type="text/javascript" src="ClientGlobalContext.js.aspx"></script>
<script type="text/javascript" src="new_jquery1.4.1.min"></script>
<script type="text/javascript" src="new_FetchXMLQueries.js"></script>
<script type="text/javascript" src="new_XrmServiceToolkit"></script>
Above mentioned Scripts Used to load the JS
into the Current page where the HTML page is loaded
new_FetchXMLQueries – we are Using
FetchXML in this js file
new_XrmServiceToolkit – XRM tool KIT
<script type="text/javascript">
var getSplit;
var getallValuespagingValues =
[];
var relatedAccounts = [];
var getCollectionRecords = new Array();
function getRMWorkbenchValues() {
context = GetGlobalContext();
serverUrl = context.getClientUrl();
userid = context.getUserId();
ODataPath = serverUrl + "/xrmservices/2011/OrganizationData.svc/new_?$select=new_Order,new_URL,new_Description,new_name,EntityImage_URL&$orderby=CreatedOn%20asc";
GetRecords(ODataPath);
}
function GetRecords(ODataPath) {
jQuery.ajax({
type: "GET",
contentType: "application/json;
charset=utf-8",
datatype: "json",
url: ODataPath,
async: false,
beforeSend: function (XMLHttpRequest) {
XMLHttpRequest.setRequestHeader("Accept", "application/json");
},
success: function (data, textStatus,
XmlHttpRequest) {
if (data && data.d != null && data.d.results !=
null) {
AddRecordsToArray(data.d.results);
FetchRecordsCallBack(data.d);
}
},
error: function (XmlHttpRequest, textStatus,
errorThrown) {
alert("Error : has occured during retrieval of the records
");
}
});
}
function AddRecordsToArray(records) {
for
(var i = 0; i <
records.length; i++) {
var Generatetable = "<td>"
Generatetable += "<table
tabindex='0' style='cursor: hand;' id='_L" + records[i].new_Order + "' cellpadding='12'
cellspacing='0' width='100%'>"
Generatetable += "<tbody>"
Generatetable += "<tr>"
Generatetable += "<td
width='48'>"
Generatetable += "<img alt=''
src=" + serverUrl +
records[i].EntityImage_URL + " height='50'
width='54'></a></td>"
Generatetable += "<td
style='padding-left: 2px;'><a target='_blank' class='linktitle
ms-crm-Link' href='"
+ records[i].new_URL + "' id='_A" + records[i].new_Order + "'>" + records[i].new_name + "<br>"
Generatetable += "</a>"
Generatetable += "<div
class='linkhelp' id='_I" + records[i].new_Order + "'>" + records[i].new_Description + "<a onclick='return
false;' href='#'></a>"
Generatetable += "</div>"
Generatetable += "</td>"
Generatetable += "</tr>"
Generatetable += "</tbody>"
Generatetable += "</table>"
Generatetable += "</td>"
relatedAccounts.push(Generatetable);
}
}
function
FetchRecordsCallBack(records) {
if
(records.__next != null) {
var ODataPathh = records.__next;
GetRecords(ODataPathh);
}
}
function Getheader() {
var
head = GetHeader();
document.getElementById("demo").innerHTML = head;
}
function GenerateTable() {
getRMWorkbenchValues();
//Create a HTML Table element.
var
table = document.createElement("TABLE");
table.style = 'table-layout: fixed;';
table.cellpadding = '0';
table.cellspacing = '0';
table.width = '100%';
//Get the count of columns.
var
columnCount = relatedAccounts.length;
//Add the data rows.
for
(var i = 0; i <
relatedAccounts.length; i++) {
var row = table.insertRow(-1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
cell1.innerHTML =
relatedAccounts[i];
if (columnCount > i + 1) {
cell2.innerHTML =
relatedAccounts[i + 1];
i++;
}
}
var
dvTable = document.getElementById("dvTable");
dvTable.innerHTML = "";
dvTable.appendChild(table);
document.getElementById("getheader").innerHTML =
(GetHeaderValue("Header"))[0].attributes.new_value.value;
document.getElementById("getsubheader").innerHTML =
(GetHeaderValue("SubHeader"))[0].attributes.new_value.value;
}
</script>
Import the
HTML and attached JS and
Map the HTML
in Sitemap.
Then Right Click Select Add Tile --> LCID = 1033 Title = Application then click Save and Update the Site Map
Create a
Record in Custom Entity
Create Two Configuration
Record
