{"id":4325,"date":"2022-08-31T15:39:33","date_gmt":"2022-08-31T15:39:33","guid":{"rendered":"https:\/\/himbap.com\/blog\/?p=4325"},"modified":"2022-09-01T05:27:11","modified_gmt":"2022-09-01T05:27:11","slug":"implementing-prompt-dialog-in-d365-part-1","status":"publish","type":"post","link":"https:\/\/himbap.com\/blog\/?p=4325","title":{"rendered":"Implementing Prompt dialog in D365 CE Part 1"},"content":{"rendered":"

Requirements<\/strong>
\nLet’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.<\/p>\n

Details<\/strong>
\nLet’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:<\/p>\n

1. Create Dialog page (I am building bootstrap dialog for demo)
\n2. Script to update opportunity
\n3. Script for calling our dialog page
\n4.Calling this dialog button from command button<\/p>\n

In this post I am going to complete step 1 and 2 so let’s do it.<\/p>\n

Create Dialog page<\/strong>
\nTo build bootstrap dialog we can use following code, I am building a simple dialog with comment field and save button.<\/p>\n

\r\n<html>\r\n   <head>\r\n      <title>On Hold Comment<\/title>\r\n      <script src="ClientGlobalContext.js.aspx" type="text\/javascript"><\/script>\r\n      <link rel="stylesheet" type="text\/css" href="https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/4.4.1\/css\/bootstrap.min.css">\r\n      <script type="text\/javascript" src="https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/3.4.1\/jquery.min.js"><\/script>\r\n      <script type="text\/javascript">\/\/place code here<\/script>\r\n\r\n<style>\r\n         #AddNewType {\r\n         display: none;\r\n         }\r\n         #PanelOpportunity {\r\n         display: none;\r\n         }\r\n         #lookUpOpportunity {\r\n         display: none;\r\n         }\r\n         body {\r\n         min-height: 100%;\r\n         min-width: 100%;\r\n         }\r\n         .overView {\r\n         display: block;\r\n         min-height: 100% !important;\r\n         min-width: 100% !important;\r\n         background-color: slategrey;\r\n         position: absolute;\r\n         z-index: 5;\r\n         opacity: 0.7;\r\n         top: 0px;\r\n         left: 0px;\r\n         }\r\n         .right {\r\n         float: right;\r\n         }\r\n         .isModel {\r\n         background-color: goldenrod;\r\n         width: 25%;\r\n         height: 450px;\r\n         }\r\n         .requied::after {\r\n         content: " *";\r\n         color: orangered;\r\n         }\r\n      <\/style>\r\n\r\n   <\/head>\r\n   <body style="overflow-wrap: break-word;">\r\n\r\n<div class="modal2" tabindex="-1" role="dialog">\r\n\r\n<div class="modal-content">\r\n\r\n<div class="modal-body">\r\n\r\n<form id="my-form">\r\n\r\n<div class="form-group">\r\n                     <textarea class="form-control requied" id="comment" rows="3" size="250" maxlength="250" required=""><\/textarea>\r\n                     <button type="submit" style="color: #fff; background: rgb(216, 59, 0);" onclick="UpdateOpportunity()" class="btn btn-default right">Save<\/button>\r\n                  <\/div>\r\n\r\n               <\/form>\r\n\r\n            <\/div>\r\n\r\n         <\/div>\r\n\r\n      <\/div>\r\n\r\n   <\/body>\r\n<\/html>\r\n\r\n<\/pre>\n
In the first part of the code we are referencing dynamics script, CSS and other bootstrap libraries. above code will produce dialog like below:
\n\"OnHolddialog\"<\/a><\/p>\n
Update Opportunity<\/strong>
\nLet’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:<\/p>\n
\r\nvar param = null;\r\n$(document).ready(function() {\r\n    param = getUrlParameter('data');\r\n    console.log(param);\r\n});\r\n\r\nfunction getUrlParameter(urlparam) {\r\n\r\n    var pageURL = window.location.search.substring(1),\r\n        urlVariables = pageURL.split('?'),\r\n        parameterName,\r\n        i;\r\n\r\n    for (i = 0; i < urlVariables.length; i++) {\r\n        parameterName = urlVariables[i].split('=');\r\n\r\n        if (parameterName[0] === urlparam) {\r\n            return parameterName[1] === undefined ? true : decodeURIComponent(parameterName[1]);\r\n        }\r\n    }\r\n}\r\n\r\n<\/pre>\n
using above code we will get opportunity id which we are going to use in below code to update opportunity:<\/p>\n
\r\nfunction UpdateOpportunity() {\r\n    var commentBox = document.getElementById("comment").value;\r\n    if (commentBox.length == 0)\r\n        return;\r\n    else {\r\n        debugger;\r\n        var data = {\r\n            "him_placeonhold": true,\r\n            "him_onholdcomment": document.getElementById("comment").value\r\n        }\r\n        parent.Xrm.WebApi.updateRecord("opportunity", param, data).then(\r\n            function success(result) {\r\n                parent.location.reload();\r\n                parent.$("button[data-id='dialogCloseIconButton']", parent.document).click();\r\n            },\r\n            function(error) {\r\n                console.log(error);\r\n            }\r\n        );\r\n    }\r\n}\r\n<\/pre>\n
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.<\/p>\n
Summary<\/strong>
\nIn 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 !<\/p>\n
Hope it will help someone !!
\nKeep learning and Keep Sharing !!<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"
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:… Read more »<\/a><\/p>\n","protected":false},"author":1,"featured_media":4331,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[21,402,522,7,492],"tags":[981,980,982,984,983,985],"_links":{"self":[{"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/4325"}],"collection":[{"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=4325"}],"version-history":[{"count":9,"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/4325\/revisions"}],"predecessor-version":[{"id":4353,"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/4325\/revisions\/4353"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=\/wp\/v2\/media\/4331"}],"wp:attachment":[{"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=4325"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=4325"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=4325"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}