Hello everyone we are working on the power pages data verse table customization for that we are using the below code snippet but we are struct in the API data fetching and the update and the delete .
we already give the permission for the table operations like CRUD operations and column permissions.
Regards,
Pramod.
Code:-
<div
class="row sectionBlockLayout text-left"
style="min-height: auto; padding: 8px;"
>
<div class="container" style="display: flex; flex-wrap: wrap;">
<div
class="col-md-12 columnBlockLayout"
style="padding: 16px; margin: 60px 0px;"
>
<style>
#processingMsg {
width: 150px;
text-align: center;
padding: 6px 10px;
z-index: 9999;
top: 0;
left: 40%;
position: fixed;
-webkit-border-radius: 0 0 2px 2px;
border-radius: 0 0 2px 2px;
-webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
display: none;
}
table td[data-attribute] .glyphicon-pencil {
margin-left: 5px;
opacity: 0;
}
table td[data-attribute]:hover .glyphicon-pencil {
opacity: 0.7;
}
</style>
<script>
$(function () {
(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 notificationMsg = (function () {
var $processingMsgEl = $("#processingMsg"),
_msg = "Processing...",
_stack = 0,
_endTimeout;
return {
show: function (msg) {
$processingMsgEl.text(msg || _msg);
if (_stack === 0) {
clearTimeout(_endTimeout);
$processingMsgEl.show();
}
_stack++;
},
hide: function () {
_stack--;
if (_stack <= 0) {
_stack = 0;
clearTimeout(_endTimeout);
_endTimeout = setTimeout(function () {
$processingMsgEl.hide();
}, 500);
}
},
};
})();
var webAPIExampleTable = (function () {
var trTpl =
"<% _.forEach(data, function(data){ %>" +
'<tr data-id="<%=data.id%>" data-name="<%=data.fullname%>">' +
"<% _.forEach(columns, function(col){ %>" +
'<td data-attribute="<%=col.name%>" data-label="<%=col.label%>" data-value="<%=data[col.name]%>">' +
'<%-data[col.name]%><i class="glyphicon glyphicon-pencil"></i>' +
"</td>" +
"<% }) %>" +
"<td>" +
'<button class="btn btn-default delete" type="submit" style="margin-left: 17%;"><i class="glyphicon glyphicon-trash" aria-hidden="true"></i></button>' +
"</td>" +
"</tr>" +
"<% }) %>";
var tableTpl =
'<table class="table table-hover">' +
"<thead>" +
"<tr>" +
"<% _.forEach(columns, function(col){ %>" +
"<th><%=col.label%></th>" +
"<% }) %>" +
"<th>" +
'<button class="btn btn-default add" type="submit">' +
'<i class="glyphicon glyphicon-plus" aria-hidden="true"></i> Add Event' +
"</button>" +
"</th>" +
"</tr>" +
"</thead>" +
"<tbody>" +
trTpl +
"</tbody>" +
"</table>";
function getDataObject(rowEl) {
var $rowEl = $(rowEl),
attrObj = {
id: $rowEl.attr("data-id"),
name: $rowEl.attr("data-attribute"),
};
$rowEl.find("td").each(function (i, el) {
var $el = $(el),
key = $el.attr("data-attribute");
if (key) {
attrObj[key] = $el.attr("data-value");
}
});
return attrObj;
}
function bindRowEvents(tr, config) {
var $row = $(tr),
$deleteButton = $row.find("button.delete"),
dataObj = getDataObject($row);
$.each(config.columns, function (i, col) {
var $el = $row.find('td[data-attribute="' + col.name + '"]');
$el.on("click", $.proxy(col.handler, $el, col, dataObj));
});
$deleteButton.on(
"click",
$.proxy(config.deleteHandler, $row, dataObj)
);
}
function bindTableEvents($table, config) {
$table.find("tbody tr").each(function (i, tr) {
bindRowEvents(tr, config);
});
$table
.find("thead button.add")
.on("click", $.proxy(config.addHandler, $table));
}
return function (config) {
var me = this,
columns = config.columns,
addHandler = config.addHandler,
deleteHandler = config.deleteHandler,
$table;
me.render = function (el) {
$table = $(el)
.html(
_.template(tableTpl)({
columns: columns,
data: me.data,
})
)
.find("table");
bindTableEvents($table, {
columns: columns,
addHandler: addHandler,
deleteHandler: deleteHandler,
});
};
me.addRecord = function (record) {
$table.find("tbody tr:first").before(
_.template(trTpl)({
columns: columns,
data: [record],
})
);
bindRowEvents($table.find("tbody tr:first"), config);
};
me.updateRecord = function (attributeName, newValue, record) {
$table
.find(
'tr[data-id="' +
record.id +
'"] td[data-attribute="' +
attributeName +
'"]'
)
.text(newValue);
};
me.removeRecord = function (record) {
$table
.find('tr[data-id="' + record.id + '"]')
.fadeTo("slow", 0.7, function () {
$(this).remove();
});
};
};
})();
function appAjax(processingMsg, ajaxOptions) {
notificationMsg.show(processingMsg);
return webapi
.safeAjax(ajaxOptions)
.fail(function (response) {
if (response.responseJSON) {
alert("Error: " + response.responseJSON.error.message);
} else {
alert("Error: Web API is not available... ");
}
})
.always(notificationMsg.hide);
}
function loadRecords() {
return appAjax("Loading...", {
type: "GET",
contentType: "application/json",
});
}
function addSampleRecord() {
var recordObj = {
cree4_name: "Type your name",
cree4_address: "Type your address",
cree4_age: "Type your number"
};
appAjax("Adding...", {
type: "POST",
contentType: "application/json",
data: JSON.stringify(recordObj),
success: function (res, status, xhr) {
recordObj.id = xhr.getResponseHeader(
"SiteNumber2 - site-3iqg1"
);
// recordObj.fullname =
// recordObj.firstname + " " + recordObj.lastname;
table.addRecord(recordObj);
// loadRecords();
},
});
return false;
}
function deleteRecord(recordObj) {
var response = confirm(
'Are you sure, you want to delete "' + recordObj.name + '" ?'
);
if (response == true) {
appAjax("Deleting...", {
type: "DELETE",
url:
recordObj.id +
")",
contentType: "application/json",
success: function (res) {
table.removeRecord(recordObj);
},
});
}
return false;
}
function updateRecordAttribute(col, recordObj) {
var attributeName = col.name,
value = recordObj[attributeName],
newValue = prompt('Please enter "' + col.label + '"', value);
if (newValue != null && newValue !== value) {
appAjax("Updating...", {
type: "PUT",
url:
recordObj.id +
")/" +
attributeName,
contentType: "application/json",
data: JSON.stringify({
value: newValue,
}),
success: function (res) {
table.updateRecord(attributeName, newValue, recordObj);
loadRecords();
},
});
}
return false;
}
var table = new webAPIExampleTable({
columns: [
{
name: "cree4_name",
label: "Name",
handler: updateRecordAttribute,
},
{
name: " cree4_address",
label: "Address",
handler: updateRecordAttribute,
},
{
name: "cree4_age",
label: "age",
handler: updateRecordAttribute,
}
],
data: [],
addHandler: addSampleRecord,
deleteHandler: deleteRecord,
});
loadRecords().done(function (data) {
table.data = _.map(data.value, function (record) {
record.id = record.cr240_kycid;
return record;
});
table.render($("#dataTable"));
});
});
</script>
<div id="processingMsg" class="alert alert-warning" role="alert"></div>
<div id="dataTable"></div>
</div>
</div>
</div>
22
Share
Report
All responses (
Answers (
