Add a custom Verification/Notification Box for MSCRM using Javascript

Create your own Comment box using Bootstrap html and javascript with Jquery for MSCRM.

This examples also explains how to pass query and how to open a dialog box.

Steps to follow:

  1. Create a web-resource or add it to your form web resource to call the HTML box.

     
function onReject() {
 var title = "Chapter Rejection Reason";
 var placeholder = "Enter the reason";
 var CallbackFunction = chapterCallbackFunction;
 openRejectBox(title, placeholder, CallbackFunction);
 setLoggedInUserAndCurrentDate("mo_rejectedby", "mo_rejectedon");
 Xrm.Page.data.entity.save();

}

function openRejectBox(title, placeholder, CallbackFunction) {
 var addParams = "Title=" + title + "&LabelText=" + placeholder + "";
 var webresourceurl = "/WebResources/mo_/Htmls/RejectionReasonBox.Html?Data=" + encodeURIComponent(addParams);
 var DialogOption = new Xrm.DialogOptions;
 DialogOption.width = "530";
 DialogOption.height = "260";
 DialogOption.backgroundColor = "#00FFFF";
 Xrm.Internal.openDialog(webresourceurl, DialogOption, null, null, CallbackFunction);
}
  2. Create an HTML web resource add the following line of code. Also add JSON, Jquery, Service toolkit and bootstrap library in your solution.

 

<html>
<head>
<title></title>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link href=”../Common/CSS/bootstrap.min.css” rel=”stylesheet”>
http://../Common/Scripts/jquery.min.js
http://../Common/Scripts/jquery.ui.min.js
http://../Common/Scripts/bootstrap.min.js
http://../Common/Scripts/json.min.js
http://../Common/Scripts/XrmServiceToolkit.js
http://../../ClientGlobalContext.js.aspx

<style>

#lbConfirm {
font-weight: lighter;
font-size: 27px;
margin: 0 0 1px;
}

#lblRemarks {
padding-top: 2px;
font-family: Segoe UI,Tahoma, Arial;
margin-left: 0px;
margin-right: 0px;
font-size: 12px;
}

#comment {
padding-left: 20px;
}

.custom {
width: 78px !important;
}
</style>

document.onreadystatechange = function () {
if (document.readyState == “complete”) {
getDataParam();
$(‘#comment’).keypress(function () {
$(‘#divMessage’).text(“”);
$(‘#divMessage’).removeClass(“alert alert-danger”);
});
}
}

function onSave() {
//var reason = document.getElementById(“comment”).innerHTML;
var reason = $(‘#comment’).val();
if (reason == “”) {
$(‘#divMessage’).html(“Please provide the reason. “);
$(‘#divMessage’).addClass(“alert alert-danger”);
}
else {
$(‘#divMessage’).html(“”);
$(‘#divMessage’).removeClass(“alert alert-danger”);
Mscrm.Utilities.setReturnValue(reason);
try {
closeWindow(true); //Close the dialog box
}
catch (e) { }
}

 

}

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(“=”);
}

var found = false;
for (var i in vals) {
if (vals[i][0].toLowerCase() == “data”) {
var title = parseDataValue(vals[i][1]);
found = true;
break;
}
}

}
else {

}
}

function parseDataValue(datavalue) {
if (datavalue != “”) {
var vals = new Array();
vals = decodeURIComponent(datavalue).split(“&”);
for (var i in vals) {
vals[i] = vals[i].replace(/\+/g, ” “).split(“=”);
if (i == 0) {
$(“#lblRemarks”).text(vals[0][1]);

}
else if (i == 1) {
$(“#comment”).attr(“placeholder”, vals[1][1]);
}
}
}
}

</head>


<div class="container">

<div class="col-xs-12">
<div class="col-xs-12 col-sm-12">
<div class="col-xs-12 col-sm-12">
<p id="lbConfirm" style="color:Black;">Confirm!</p>
<p id="lblRemarks" style="color:Black;">Hi</p>

<div class="col-xs-12 col-sm-12">

</div>
<div class="col-xs-12 col-sm-12" style="margin-top:8px;">
<div class="pull-right">


</div>
&lt;/div</div>
</div>
</div>

</div>
<div class="container" style="font-family:undefined;">
<div class="modal-body">
&lt;!-- --&gt;
<div class="alert alert-info">
<strong id="lblMessage">Info!</strong>
</div>
</div>
</div>