Requirements
Let’s say we have requirement where user can put opportunity on hold but before doing he needs to enter comment which should be saved in the opportunity.
Details
Let’s say we want to implement this requirement using prompt dialog where user can provide comments before setting opportunity on hold. To implement this requirement we have to do following things:
1. Create Dialog page (I am building bootstrap dialog for demo)
2. Script to update opportunity
3. Script for calling our dialog page
4.Calling this dialog button from command button
In this post I am going to complete step 1 and 2 so let’s do it.
Create Dialog page
To build bootstrap dialog we can use following code, I am building a simple dialog with comment field and save button.
<html>
<head>
<title>On Hold Comment</title>
<script src="ClientGlobalContext.js.aspx" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">//place code here</script>
<style>
#AddNewType {
display: none;
}
#PanelOpportunity {
display: none;
}
#lookUpOpportunity {
display: none;
}
body {
min-height: 100%;
min-width: 100%;
}
.overView {
display: block;
min-height: 100% !important;
min-width: 100% !important;
background-color: slategrey;
position: absolute;
z-index: 5;
opacity: 0.7;
top: 0px;
left: 0px;
}
.right {
float: right;
}
.isModel {
background-color: goldenrod;
width: 25%;
height: 450px;
}
.requied::after {
content: " *";
color: orangered;
}
</style>
</head>
<body style="overflow-wrap: break-word;">
<div class="modal2" tabindex="-1" role="dialog">
<div class="modal-content">
<div class="modal-body">
<form id="my-form">
<div class="form-group">
<textarea class="form-control requied" id="comment" rows="3" size="250" maxlength="250" required=""></textarea>
<button type="submit" style="color: #fff; background: rgb(216, 59, 0);" onclick="UpdateOpportunity()" class="btn btn-default right">Save</button>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
In the first part of the code we are referencing dynamics script, CSS and other bootstrap libraries. above code will produce dialog like below:
Update Opportunity
Let’s say we have one boolean field on the opportunity which we will be setting if it is on hold. To update opportunity we need to get the opportunity id, comments that user will be entering into the comment dialog box. first to get the opportunity id we are going to parse the url parameter like below:
var param = null;
$(document).ready(function() {
param = getUrlParameter('data');
console.log(param);
});
function getUrlParameter(urlparam) {
var pageURL = window.location.search.substring(1),
urlVariables = pageURL.split('?'),
parameterName,
i;
for (i = 0; i < urlVariables.length; i++) {
parameterName = urlVariables[i].split('=');
if (parameterName[0] === urlparam) {
return parameterName[1] === undefined ? true : decodeURIComponent(parameterName[1]);
}
}
}
using above code we will get opportunity id which we are going to use in below code to update opportunity:
function UpdateOpportunity() {
var commentBox = document.getElementById("comment").value;
if (commentBox.length == 0)
return;
else {
debugger;
var data = {
"him_placeonhold": true,
"him_onholdcomment": document.getElementById("comment").value
}
parent.Xrm.WebApi.updateRecord("opportunity", param, data).then(
function success(result) {
parent.location.reload();
parent.$("button[data-id='dialogCloseIconButton']", parent.document).click();
},
function(error) {
console.log(error);
}
);
}
}
In above code I am using WebApi.updateRecord method and you can see as this is an html page so I have to use parent.Xrm to refer WebApi methods. parent.Xrm is supported for html page. Once opportunity update request is done I am closing the dialog button. We can place all java script methods under the script block.
Summary
In this post we discussed about creating prompt dialog and update opportunity based on the comment. In Next part we will discuss pending items so stay tuned !
Hope it will help someone !!
Keep learning and Keep Sharing !!