Adding CRUD operations to a List in a Portal

Here I am discussing one of the main customizations you may need when developing a Power Apps Portal. That is adding CRUD (Create, Read, Update and Delete) operation on items in a list. 

There are two pre-requisites to proceed with this exercise;

1. A list should have configured already.

2. Below 2 entries should have added to the Site Settings entity that gives permission to nominated entity (in my case so_office) to be accessed through API.

All my JS codes will go in Options tab of the list.

Consider below JS, where I have embedded some extra lines to a standard code of doing something for each item in the list.

Block 1 - Change some fonts styles through CSS

Block 2 - Give different color for the lines where No of Clients are greater than 100

Block 3 - Call CRUD functions by introducing 4 new buttons.

$(document).ready(function (){
$(".entitylist.entity-grid").on("loaded", function () {
$(this).children(".view-grid").find("tr").each(function (){
// do something with each row

// Block 1
$(this).css("font-family","Sans-serif");
$(this).css("font-size","10px");

// Block 2
if ($(this).find('[data-attribute="so_noofclient"]').attr("data-value")) {
    var noOfclients = $(this).find('[data-attribute="so_noofclient"]').attr("data-value");   
    if (noOfclients >100) {
    $(this).css("background-color", "#E49C9C");
    }
    else {
    $(this).css("background-color", "#F6F5F5");
    }
}

// Block 3
   if ($(this).closest('tr').attr("data-id") != null)
   {
     var recId = $(this).closest('tr').attr("data-id");   
     var nameCol = $(this).find('[data-attribute="so_name"]');
         nameCol.append('&nbsp;&nbsp;<input type="button" value="C" onclick="CreateOffice();" style="color:orange; border-style: none;" />');
	 nameCol.append('&nbsp;&nbsp;<input type="button" value="R" onclick="RetrieveOffice(\''+ recId +'\');" style="color:orange; border-style: none;" />');
	 nameCol.append('&nbsp;&nbsp;<input type="button" value="U" onclick="UpdateOffice(\''+ recId +'\');" style="color:orange; border-style: none;" />');
	 nameCol.append('&nbsp;&nbsp;<input type="button" value="D" onclick="DeleteOffice(\''+ recId +'\');" style="color:orange; border-style: none;" />');
   }

});
});
}); 

Above steps resulted below. You may notice four buttons to trigger the operations.

Now we have below four functions those do the respective operations.

function CreateOffice(RecId)
{
    alert("Creating Office..");
    webapi.safeAjax({
        type: "POST",
        url: "/_api/so_offices",
        contentType: "application/json",
        data: JSON.stringify({
        "so_name": "Created Office"
        }),
        success: function (res, status, xhr) {
        console.log("entityID: "+ xhr.getResponseHeader("entityid"));
        document.location.reload(true);
        }
    });
}

function RetrieveOffice(RecId)
{
    alert("Retrieving.." + RecId);
    webapi.safeAjax({
	   type: "GET",
	   //url: "/_api/so_offices?$select=so_type,so_revenue",
           url: "/_api/so_offices("+ RecId +")?$select=so_type,so_revenue", 
		contentType: "application/json",
		success: function (res) {
			console.log(res);
            //alert(res.value[0].so_revenue);
            alert("Type :" + res.so_revenue);
		}
	});
}

function UpdateOffice(RecId)
{
    alert("Updating Office..XX" + RecId);
    webapi.safeAjax({
        type: "PATCH",
        url: "/_api/so_offices("+ RecId +")",
        contentType: "application/json",
        data: JSON.stringify({
        "so_name": "Office Updated"
        }),
        success: function (res) {
        console.log(res);
        document.location.reload(true);
        }
    });
}

function DeleteOffice(RecId)
{
    alert("Deleting Office.." + RecId);
    webapi.safeAjax({
        type: "DELETE",
        url: "/_api/so_offices("+ RecId +")",
        contentType: "application/json",
        success: function (res) {
        console.log(res);
        document.location.reload(true);
        }
    });
}

None of the above will work unless we add below Wrapper AJAX function. So added this as well.

(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)

Hope this code snippet helps!