Create Custom Page Based on Custom/OOB Entity

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

Steps:

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

(Eg)

Create Two Configuration Record

(Eg)

Now Try open the Application you can able to view below screen

Please find the Link to Download Managed and Unmanaged Solutions