Lesson611 - Power Pages - CRUD using WebAPI- Power Apps 1000 Videos

Description- This video covers Power Pages - CRUD using WebAPI - 611/1000 Power Apps Videos

[@PowerAppsVideos-eb3pt]

Power Pages - WebAPI - CRUD
Switch To Environment
PowerPagesDeveloper-052024-201122
Portal management
From left click Site Settings
Add
Name - Webapi/contact/enabled
Value - true
Add
Name - Webapi/contact/fields
Value - *
Add
Name - Webapi/error/innererror
Value - true
add permissons
contact - Permisson1
select contact

[@PowerAppsVideos-eb3pt]

create web template
CRUD_WebTemplate
{% fetchxml contactList %}













{% endfetchxml %}


Create


Update


Delete


Refresh



Power Portal Crud Operation Using Web API





First Name
Email
Business Phone



{% for result in contactList.results.entities %}
{% assign contactids = result.contactid %}



{{ result["emailaddress1"] }}



No Record Found

{% endfor %}

[@PowerAppsVideos-eb3pt]

(function(webapi, $) {
function safeAjax(ajaxOptions) {
var deferredAjax = $.Deferred();
shell.getTokenDeferred().done(function(token) {
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);
}).fail(function() {
deferredAjax.rejectWith(this, arguments);
});
return deferredAjax.promise();
}
webapi.safeAjax = safeAjax;
})(window.webapi = window.webapi || {}, jQuery)
var globalArray = [];
function pushArrayData(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 updateRecord(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 createRecord() {
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"
});
}
});
});
create page template
CRUD_pageTemplate
create Page
Page_CRUD_WebTemplate