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:
-
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); }
- 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> </div</div> </div> </div> </div> <div class="container" style="font-family:undefined;"> <div class="modal-body"> <!-- --> <div class="alert alert-info"> <strong id="lblMessage">Info!</strong> </div> </div> </div>