Create/ Update/ Delete operations using WebApi from PowerApps portals

This is a blog series which utilize the concept from the previous blogs. If you have directly landed here on this blog, I suggest to start from the beginning to get the context.

So I am on the third post of this series and in this blog, I am going to discuss on how we can perform create, update and delete operation using WebApi from portals.

Things are always interesting when it is related to portals. WebApi operations are no exception. Just like with so many other things, to perform WebAPI operations from portal, we need to create few site settings. Create the below site settings not in any specific order.

Setting 1

The first setting is to enable webapi support for an entity in the portal. To do that, create the below site setting

Setting 2

This setting is to enable fields which will be used by WebApi. Please note that only the field of the entity mentioned in the setting can be used in the payload during create or update. If a field is not mentioned in this list and you try to interact with the field in WebApi during create or update, you will get an error.

Setting 3

While not mandatory, this setting is required to allow innererrors to be passed in exceptions when an error happen while interacting with WebApi from portals.

Good stuff. We are done with all the settings. And you may be thinking – “Now comes the code”. But have a little patience till I get to the code. The next step is is to configure entity permissions. Remember entity permissions are required to perform WebApi operations. So if you are working for contacts, there should be an entity permission for contact. If you are working with multiple entities during WebApi operation, make sure you have entity permissions for all the participating entities.

Here we are retrieving all fields of contact and also the lookup field “new_Account“. Hence the logged in user should have entity permissions to both the account and contact entity. I have created entity permissions for both the contact and account entity. I have provided global access but you can modify the access level as per your business need.

All set and done, it’s time to play with the code now.

Create code snippet

shell.getTokenDeferred().done(function (s) {
   debugger;
   //create record
   var inputJson = {};
   inputJson.firstname = "Test 2";
   inputJson.lastname = "Web API 2";
   inputJson["new_Account@odata.bind"] = "https://xrm202010.powerappsportals.com/_api/accounts(a7c5ccfe-c9dc-ea11-a814-000d3a0a7552)";
   var inputstring = JSON.stringify(inputJson);
   var url = "https://xrm202010.powerappsportals.com/_api/contacts";
   var xmlHttp = new XMLHttpRequest();
   xmlHttp.open("POST", url, true); 

   xmlHttp.onreadystatechange = function () {
      if (this.readyState === 4) {
         if (this.status === 201) {//created
            // perform your logic here.
         }
      }
   };

   xmlHttp.setRequestHeader('Content-Type', 'application/json');
   xmlHttp.setRequestHeader('__RequestVerificationToken', s);

   xmlHttp.send(inputJson);
});

Update code snippet

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

   var inputJson = {};
   inputJson.firstname = "Test 2";
   inputJson.lastname = "Web API 2 - Updated";

   var inputstring = JSON.stringify(inputJson);

   var url = "<your_portal_url>/_api/contacts(520c7efd-24de-ea11-a814-000d3a0a7552)"; // the guid is the contactid
   var xmlHttp = new XMLHttpRequest();
   xmlHttp.open("PATCH", url, true); 
   xmlHttp.setRequestHeader('Content-Type', 'application/json');
   xmlHttp.setRequestHeader('__RequestVerificationToken', s);

   xmlHttp.onreadystatechange = function () {
      if (this.readyState === 4) {
         if (this.status === 204) { // successful update
            // perform your logic here.
         }
      }
   };

   xmlHttp.send(inputstring);
});

Delete code snippet

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

   //delete record
   var url = "<your_portal_url>/_api/contacts(520c7efd-24de-ea11-a814-000d3a0a7552)"; // guid is the contactid to delete
   var xmlHttp = new XMLHttpRequest();
   xmlHttp.open("DELETE", url
      , true);
   xmlHttp.setRequestHeader('Content-Type', 'application/json');
   xmlHttp.setRequestHeader('__RequestVerificationToken', s);
  
   xmlHttp.onreadystatechange = function () {
      if (this.readyState === 4) {
         if (this.status === 204) { // successful update
            // perform your logic here.
         }
      }
   };

   xmlHttp.send();
});

So we explore create update and delete. In the final blog of this series we will explore on how we can call a custom action from WebAPI in PowerApps portals.

Hope this helps!
Debajit Dutta
(Business Solutions MVP)