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(' <input type="button" value="C" onclick="CreateOffice();" style="color:orange; border-style: none;" />');
nameCol.append(' <input type="button" value="R" onclick="RetrieveOffice(\''+ recId +'\');" style="color:orange; border-style: none;" />');
nameCol.append(' <input type="button" value="U" onclick="UpdateOffice(\''+ recId +'\');" style="color:orange; border-style: none;" />');
nameCol.append(' <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!
