CRUD Operation from Power Portal using Web API Methods

 Introduction

In this article, we are going to discuss to crud operation in dynamic 365 portals using web API.


We are going to cover:

  1. What is power portal ?
  2. How to create portal?
  3. How to perform crud operation in power portal using web API.

What are portals:

Portals are websites that you can customize to give your customers, partners and employees a tailored experience. Portals are integrated into Dynamics 365 for Customer Engagement so you can display data from the module directly on the portal.

How to create portal?

1.       Logging to https://make.powerapps.com/

2.       Navigate on Apps à New app à click ok portal

1.       Please enter required name and address of portal to be created and click on create.

 It will take few minutes of time to create portal.


How to perform crud operation in power portal using web API.

1.      Once power portal is create navigate to portal management and click on site settings and create three active        site setting with same Name, Value as show in below figure and select your web site in web site column. 


1.      Next Navigate to table permission and create contact table permission as show in below screen with read, write, create and delete privilege's.


1.       Next we need to create web role so that only users who have access can perform this operation.


1.      Once web role create navigate to related in web role and select entity for ex: select contact entity and add users.



1.       Next step we need to create web templates and add below completed.


<div class="container" style="margin:100px">

  {% fetchxml contactList %}

  <fetch version="1.0" output-format="xml-platform" mapping="logical" distinct="false">

    <entity name="contact">

      <attribute name="fullname" />

      <attribute name="telephone1" />

      <attribute name="emailaddress1" />

      <attribute name="contactid" />

      <attribute name="firstname" />

      <order attribute="fullname" descending="false" />

      <filter type="and">

        <condition attribute="statecode" operator="eq" value="0" />

      </filter>

    </entity>

  </fetch>

  {% endfetchxml %}

  <div style="float:right">

    <button id="createContactNew" class="btn btn-success btn-large" onclick="create();"><i class="glyphicon glyphicon-plus"></i>Create</button>

    <button id="updateContact" class="btn btn-success btn-large" onclick="update('U')"><i class="glyphicon glyphicon-inbox"></i>Update</button>

    <button id="deleteContact" value="Delete" class="btn btn-danger btn-large " style="margin-left:20px" onclick="update('D')">Delete</button>

    <button id="refreshcontact" value="Refresh" class="btn btn-danger btn-large " style="margin-left:20px" onclick="javascript:location.reload(true);"><i class="glyphicon glyphicon-refresh"></i>Refresh</button>

  </div>

  <div id="processingMsg" class="alert alert-warning" role="alert"><span class="glyphicon glyphicon-info-sign"></span>Power Portal Crud Operation Using Web API</div>

  <table id="tblData" class="table" style="border:1px solid">

    <thead class="thead-dark">

      <tr class="table-heading">

        <th><input type="checkbox" id="checkedAll" style="margin-left:30px" /></th>

        <th>First Name</th>

        <th>Email</th>

        <th>Business Phone</th>

      </tr>

    </thead>

    <tbody>

      {% for result in contactList.results.entities %}

      {% assign contactids  = result.contactid %}

      <tr>

        <td><input type="checkbox" id="{{ result.contactid }}" class="contactIDs" style="margin-left:30px" onchange="pushArrayCheckBox(this);" /></td>

        <td><input type="text" id="txtfullName|{{result.contactid}}" contactid="{{result.contactid}}" value="{{ result.firstname }}" onchange="pushArray(this);"></td>

        <td>{{ result["emailaddress1"] }}</td>

        <td><input type="number" id="txtBusinessPhone|{{result.contactid}}" contactid="{{result.contactid}}" value="{{ result.telephone1 }}" pattern="\d*" title="Please enter Numbers only..." onchange="pushArray(this);"></td>

      </tr>

      <tr class="no-records" style="display: none;">

        <td colspan='6'>No Record Found</td>

      </tr>

      {% endfor %}

    </tbody>

  </table>

</div>

<script>

  (function(webapi, $) {

    function safeAjax(ajaxOptions) {

      var deferredAjax = $.Deferred();

      shell.getTokenDeferred().done(function(token) {

        // add headers for AJAX                

        if (!ajaxOptions.headers) {

          $.extend(ajaxOptions, {

            headers: {

              "__RequestVerificationToken": token

            }

          });

        } else {

          ajaxOptions.headers["__RequestVerificationToken"] = token;

        }

        $.ajax(ajaxOptions).done(function(data, textStatus, jqXHR) {

          validateLoginSession(data, textStatus, jqXHR, deferredAjax.resolve);

        }).fail(deferredAjax.reject);

        //AJAX            

      }).fail(function() {

        deferredAjax.rejectWith(this, arguments);

        // on token failure pass the token AJAX and args          

      });

      return deferredAjax.promise();

    }

    webapi.safeAjax = safeAjax;

  })(window.webapi = window.webapi || {}, jQuery)

  //custom code

  var globalArray = [];

  function pushArray(currentObject) {

    var str = currentObject.id;

    var res = str.split("|");

    var contId = res[1];

    var checkbox = document.getElementById(contId).checked;

    var fullname = document.getElementById("txtfullName|" + contId).value;

    var phonenumber = document.getElementById("txtBusinessPhone|" + contId).value;

    let objIndex = globalArray.findIndex((obj => obj.id == contId));

    if (objIndex == -1) {

      globalArray.push({

        id: contId,

        fullname: fullname,

        phone: phonenumber,

        checkboxval: checkbox

      })

    } else {

      globalArray[objIndex].fullname = fullname;

      globalArray[objIndex].phone = phonenumber;

      globalArray[objIndex].checkboxval = checkbox;

    }

  }

  function pushArrayCheckBox(currentObject) {

    var contId = currentObject.id;

    var checkbox = document.getElementById(contId).checked;

    var fullname = document.getElementById("txtfullName|" + contId).value;

    var phonenumber = document.getElementById("txtBusinessPhone|" + contId).value;

    let objIndex = globalArray.findIndex((obj => obj.id == contId));

    if (objIndex == -1) {

      globalArray.push({

        id: contId,

        fullname: fullname,

        phone: phonenumber,

        checkboxval: checkbox

      })

    } else {

      globalArray[objIndex].fullname = fullname;

      globalArray[objIndex].phone = phonenumber;

      globalArray[objIndex].checkboxval = checkbox;

    }

  }

  function update(flag) {

    var i;

    for (i = 0; i < globalArray.length; i++) { //update checked row changes

      alert(globalArray[i].fullname + "-" + globalArray[i].phone + "-" + globalArray[i].checkboxval);

      if (globalArray[i].checkboxval == 1) //true

      {

        document.getElementById("processingMsg").innerHTML = "Processing....";

        try {

          let value = {

            "firstname": globalArray[i].fullname,

            "telephone1": globalArray[i].phone

          };

          if (flag == "U") {

            webapi.safeAjax({

              type: "PATCH",

              url: "/_api/contacts(" + globalArray[i].id + ")",

              contentType: "application/json",

              data: JSON.stringify(value),

              success: function(res) {

                document.getElementById("processingMsg").innerHTML = "Records updated successfully.";

              }

            });

          } else if (flag == "D") {

            webapi.safeAjax({

              type: "DELETE",

              url: "/_api/contacts(" + globalArray[i].id + ")",

              contentType: "application/json",

              success: function(res) {

                document.getElementById("processingMsg").innerHTML = "Records deleted successfully. Refresh the page.";

              }

            });

          }

        } catch (e) {

          alert(e.message);

        }

      }

    }

  }

// To create new contact

  function create() {

    var fname = prompt("Please enter your first name", "First Name");

    var lname = prompt("Please enter your last name", "Last Name");

    var email = prompt("Please enter your email", "Email");

    var phone = prompt("Please enter your phone number", "Phone Number");

    var recordObj = {

      "firstname": fname,

      "lastname": lname,

      "emailaddress1": email,

      "telephone1": phone

    };

    document.getElementById("processingMsg").innerHTML = "Creating record...";

    webapi.safeAjax({

      type: "POST",

      url: "/_api/contacts",

      contentType: "application/json",

      data: JSON.stringify(recordObj),

      success: function(res, status, xhr) {

        document.getElementById("processingMsg").innerHTML = "Records created successfully. Refresh the page. ID:" + xhr.getResponseHeader("entityid");

      }

    });

  }

  $(document).ready(function() {

    $('#checkedAll').on('click', function() {

      if (this.checked) {

        $('.contactIDs').each(function() {

          this.checked = true;

          $(this).parent().parent().css({

            "color": "red",

            "background-color": "#faffd6"

          });

        });

      } else {

        $('.contactIDs').each(function() {

          this.checked = false;

          $(this).parent().parent().css({

            "color": "black",

            "background-color": "#ffffff"

          });

        });

      }

    });

    $('.contactIDs').on('click', function() {

      if ($('.contactIDs:checked').length == $('.contactIDs').length) {

        $('#checkedAll').prop('checked', true);

        $('.contactIDs').each(function() {

          $(this).parent().parent().css({

            "color": "red",

            "background-color": "#faffd6"

          });

        });

        $(this).parent().parent().css({

          "color": "black",

          "background-color": "#ffffff"

        });

      } else {

        $('#checkedAll').prop('checked', false);

        $(this).parent().parent().css({

          "color": "black",

          "background-color": "#ffffff"

        });

      }

    });

  });

</script>

1.     Next we need to create page template to display web content, navigate to page   template and click on new and New.

2.     Enter the required fields information in  type field select the web template and in web template field select your template when you have created, table name we need to select entity and click on Save.



1.       Navigate to https://make.powerapps.com/ click on edit portal and create new sub page, refer below screen.




1.        In web component give the required information and select the your template.


Final screen.


1.       Once click on create record pop will display, enter the details and click ok.





























Comments

Popular posts from this blog

How to implement approval in Teams using Adaptive Cards

Open canvas app with Customize the command bar using command designer

HTTP Request Methods

Create email templates in dynamic 365 and send email using Power Automate

Duplicate Detection in Dynamics 365 using power apps.