Recently I have worked on arequirement where I had to write a service which was going to be used by different clients and had to call same service using HTML web resource in CRM 2015.To achieve this first of all I had to add a ribbon button on entity and call my web resource abc.htm
I was passing record id of entity in url to abc.html and from there I was calling wcf service using AJAX and displaying results and giving user an option to select a row and press submit button. Ob submitting button an other service was being called, again ajax but post method to create records.
Below is a full code of HTML Web Resource with some bootstrap, might help someone else.
<!DOCTYPE HTML>
<html lang=”en-us”>
<head>
<title>Create work order schedule</title>
<script src=”//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js”></script>
<script type=”text/javascript”>
var dataToBePosted;
$(document).ready(function () {
getDataParam();
selectedTableRow();
$(“#btnCreate”).on(‘click’, function (e) {
postCreateWOS();
});
});
function getDataParam()
{
var vals = new Array();
if (location.search != “”) {
vals = location.search.substr(1).split(“&”);
for (var i in vals) {
vals[i] = vals[i].replace(/\+/g, ” “).split(“=”);
}
//look for the parameter named ‘data’
var found = false;
for (var i in vals) {
if (vals[i][0].toLowerCase() == “id”) {
console.log(vals[i][1]);
getGetMyData(vals[i][1]);
found = true;
break;
}
}
if (!found)
{
noParams();
}
}
else {
noParams();
}
}
function noParams() {
$(“#divError”).text( “No data parameter was passed to this page”).removeClass(“hidden”);
}
function selectedTableRow() {
$(“#tableContainer”).on(‘click’, ‘tr’, function (event) {
$(“.active”).removeClass(“active”);
$(this).addClass(“active”);
var RLogName, RId, StartTime, EndTime, WOId, Distance;
$(this).find(‘td’).each(function () {
var dd = $(this).data(‘tdname’);
if (dd == ‘RLogName’) {
RLogName = $(this).html();
}
else if (dd == ‘RId’) {
RId = $(this).html();
}
else if (dd == ‘StartTime’) {
StartTime = $(this).html();
}
else if (dd == ‘EndTime’) {
EndTime = $(this).html();
}
else if (dd == ‘WOId’) {
WOId = $(this).html();
}
else if (dd == ‘Distance’) {
Distance = $(this).html();
}
});
dataToBePosted = ‘{“RLogName”: “‘ + RLogName + ‘”, “RId”: “‘ + RId + ‘”, “StartTime”: “‘ + StartTime + ‘”, “EndTime”: “‘ + EndTime + ‘”, “WOId”: “‘ + WOId + ‘”, “Distance”: “‘ + Distance + ‘”}’;
});
}
function postCreateWOS() {
url = “https://365rack.com/Services/MyService.svc/CreateWOS”;
$.post(url, dataToBePosted, function (data, textStatus) {
if (textStatus == “success”) {
$(“#divSuccess”).removeClass(“hidden”);
$(“#tableContainer”).addClass(“hidden”);
}
else {
$(“#divError”).removeClass(“hidden”);
}
}, “json”);
}
//TODO – get values from browser
function getGetMyData(WOId) {
wcfServiceUrl = “https://365rack.com/Services/MyService.svc/”;
$.ajax({
url: wcfServiceUrl + “GetMySlots/” + WOId + “/0/0”,
type: “GET”,
contentType: “application/javascript”,
dataType: “jsonp”,
error: function () {
$(“#divError”).text(“No data found. Please make sure record has a primary id and all other required data.”).removeClass(“hidden”);
},
success: function (data) {
var txt = “”;
if (data !== null) {
$.each(data, function (key, val) {
var formattedDate = new Date(val.StartTime);
var d = formattedDate.getDate();
var m = formattedDate.getMonth();
m += 1;
var y = formattedDate.getFullYear();
var startTime = d + “.” + m + “.” + y;
var distance = parseFloat(Math.round(val.Distance * 100) / 100).toFixed(2);
txt += “<tr class=\”myclass\”>”;
txt += “<td data-tdname=’RLogName’>” + val.RLogName + “</td>”;
txt += “<td data-tdname=’ResourceName’>” + val.ResourceName + “</td>”;
txt += “<td data-tdname=’RId’ class=\”hidden\”>” + val.RId + “</td>”;
txt += “<td data-tdname=’StartTime’>” + startTime + “</td>”;
txt += “<td data-tdname=’EndTime’ class=\”hidden\”>” + val.EndTime + “</td>”;
txt += “<td data-tdname=’WorkOrderSlot’>” + val.WorkOrderSlot + “</td>”;
txt += “<td data-tdname=’WOId’ class=\”hidden\”>” + val.WOId + “</td>”;
txt += “<td data-tdname=’Distance’>” + distance + “</td>”;
txt += “<td data-tdname=’BusinessUnitName’>” + val.BusinessUnitName + “</td>”;
txt += “<td data-tdname=’Telephone’>” + val.Telephone + “</td>”;
txt += “</tr>”;
});
if (txt != “”) {
$(“#tableContainer”).removeClass(“hidden”);
$(“#table”).append(txt).removeClass(“hidden”);
}
else {
$(“#divError”).text(“No data was found”).removeClass(“hidden”);
}
}
else {
$(“#divError”).text(“No data was found”).removeClass(“hidden”);
}
}
});
}
</script>
<style>
.hidden {
display: none;
}
</style>
<link rel=”Stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css” />
</head>
<body>
<div class=”panel panel-default”>
<div class=”panel-heading”><h3>List of available Slots</h3></div>
<div class=”panel-body hidden” id=”tableContainer”>
<div>
<h4 class=”text-primary”>Select a row below to create a WOS Schedule</h4>
</div>
<table id=”table” class=”table table-hover”>
<tr>
<th>Name</th>
<th>ID</th>
<th class=”hidden”>RId</th>
<th class=”hidden”>EndTime</th>
<th>Start Time</th>
<th>Slot</th>
<th class=”hidden”>WOSId</th>
<th>Distance</th>
<th>Business Unit</th>
<th>Telephone</th>
</tr>
</table>
<div>
<button id=”btnCreate” class=”btn-default btn-primary”>Create WOS Schedule</button>
</div>
</div>
<div id=”divSuccess” class=”alert alert-success hidden” role=”alert”>A new WOS schedule has been created</div>
<div id=”divErrorNoSlots” class=”alert alert-danger hidden” role=”alert”>No valid time slots found!</div>
<div id=”divError” class=”alert alert-danger hidden” role=”alert”>Error while creating a new WOS schedule!</div>
</div>
</body>
</html>