HTML Web Resource - Open as Dialog using NavigateTo and pass data from Form to HTML and back to Form

HTML Web Resource – Open as Dialog using NavigateTo and pass data from Form to HTML and back to Form

Sanjaya Pradhan Dynamics 365 CRM February 28, 2024 | 0

Post Views: 1,755

In this post you can understand how to open a html web resource as a dialog using NavigateTo client API and pass data between HTML and FORM.

Step 1 : Create a HTMl Web Resource and Add the Web resource on Form.

Use below code for HTML Web resource.

HTML


    <!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <style>
    * {box-sizing: border-box}
    body {font-family: Verdana, sans-serif; margin:0}
    .mySlides {display: none}
    img {vertical-align: middle;}
    
    
    /* On smaller screens, decrease text size */
    @media only screen and (max-width: 300px) {
      .prev, .next,.text {font-size: 11px}
    }
    
    input[type=text], select {
      width: 100%;
      padding: 12px 20px;
      margin: 8px 0;
      display: inline-block;
      border: 1px solid #ccc;
      border-radius: 4px;
      box-sizing: border-box;
    }
    
    input[type=submit] {
      width: 100%;
      background-color: #4CAF50;
      color: white;
      padding: 14px 20px;
      margin: 8px 0;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
    
    input[type=submit]:hover {
      background-color: #45a049;
    }
    
    div {
      border-radius: 5px;
      background-color: #f2f2f2;
      padding: 20px;
    }
    
    </style>
    </head>
    <body onload="onload()">
        <script src="../WebResources/ClientGlobalContext.js.aspx" type="text/javascript"></script>
    <script>

function onload()
{
    GetSelectedRecord();               
}
  
function GetSelectedRecord()
{
    var comment = "";
    var req = "";
    var rid ="";
    if (location.search != null) {

        if (location.search.split("=")[1] != null) {
            comment = JSON.parse(decodeURIComponent(location.search.split("=")[1]))["Comment"];
            req = JSON.parse(decodeURIComponent(location.search.split("=")[1]))["SPecReq"];
            rid = JSON.parse(decodeURIComponent(location.search.split("=")[1]))["recordID"]; 
        }
    }
    document.getElementById("name").value = comment;
    document.getElementById("desc").value = req;
    document.getElementById("reid").value = rid;

}      
 
function updateFormData() {

    // define the data to update a record
    var data =
        {
            "sanjay_comment": document.getElementById("name").value,
            "sanjay_specialrequirements": document.getElementById("desc").value
        }
        
    // update the record
    Xrm.WebApi.updateRecord("sanjay_sanjayhdfcinvestment", document.getElementById("reid").value, data).then(
        function success(result) {
            alert("Record updated");
            // perform operations on record update
        },
        function (error) {
            console.log(error.message);
            // handle error conditions
        }
    );
    
}
    
    </script>
    <div>
        <label for="desc">Special Requirement</label>
        <input type="text" id="desc" name="desc">
    
         <label for="name">Comment</label>
        <input type="text" id="name" name="name">
        <input type="text" id="reid" name="reid">
        <button onclick="updateFormData()" class="btn btn-primary">Submit</button>
    </div>
    </body>
    </html>

HTML

Step 2 : Add script on command button click to open web resource as dialog and pass data as JSON

call the below script on page load ans pass execution context parameter.

JavaScript


function openWS(primaryControl)
{
    var formContext = primaryControl;

    let recID = formContext.data.entity.getId().replace("{","").replace("}","");

    var comment = formContext.getAttribute("sanjay_comment").getValue(); 
    var specialreq = formContext.getAttribute("sanjay_specialrequirements").getValue(); 

    var CommentSpeReq =
    {
        Comment: comment,
        SPecReq: specialreq,
        recordID:recID
    };

    var pageInput = {
        pageType: "webresource",
        webresourceName: "sanjay_htmlws2",  // Web-Resource Schema name
        data: JSON.stringify(CommentSpeReq)   // pass parameter here
    };

    var navigationOptions = {
        target: 2,
        width: 400, 
        height: 400, 
        position: 1    // Open in Center
    };

        Xrm.Navigation.navigateTo(pageInput, navigationOptions).then(
        function success() {
            // Run code on success         
        },
        function error(error) {
            Xrm.Utility.alertDialog(error.message);
        }
    );
}