I have custom input elements placed in a bootstrap modal which user fills in to submit a new request. Input values are sent to a dataverse table/entity through webapi. The modal has also entity list which shows all requests of the user. The challenge was to update the entity list with user's request he has just done without reloading the page.
I solved it with one click which doesn't change the selected sort order. User fills in the form, clicks "Add" and sees the added request immediately in the table.
Short answer to topic starter:
let targetA = $("<yourContainerWithEntityList>").find(".view-grid span.fa").parent("a")
let sortDir = targetA.closest("th").data("sort-dir")
sortDir == "ASC" ? sortDir = "DESC" : sortDir = "ASC"
targetA.closest("th").data("sort-dir", sortDir)
targetA.trigger("click")
Elaborate code with comments.
function requestAddTest() {
// function is being tested and not finalized
let idKey, idValue
let requestData = {}
// All input elements have class ".requestAdd"
// example of requestData = {"wb_requestid": "xxx", "wb_requestname": "xxx", "wb_requestdescription": "xxx"}
// wb_requestid, wb_requestname, wb_requestdescription are fields of table wb_requesttracker
$('.requestAdd').each(function() {
idKey = $(this).attr('name');
idValue = $(this).val();
requestData[idKey] = idValue;
});
// function safeAjax is taken from here https://learn.microsoft.com/en-us/power-pages/configure/web-api-http-requests-handle-errors#example-wrapper-ajax-function-for-the-csrf-token
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();
}
safeAjax({
type: "POST",
url: "/_api/wb_requesttrackers",
contentType: "application/json",
data: JSON.stringify(requestData),
success: function (res, status, xhr) {
// #requestEntityList is a div which contains entity list from wb_requesttracker
// targetA is the entity list column header button (element a),
// the one you click to sort a column in desc or asc order
// span.fa is the selected sorting column with up or down arrow
let targetA = $("#requestEntityList").find(".view-grid span.fa").parent("a")
// data("sort-dir") of "th" indicates how to sort column next time the header is clicked
// i.e. if column is in ASC, next click will make it DESC
let sortDir = targetA.closest("th").data("sort-dir")
// sortDir is reversed so that next click it remains visually unchanged
sortDir == "ASC" ? sortDir = "DESC" : sortDir = "ASC"
targetA.closest("th").data("sort-dir", sortDir)
// column click is triggered which causes update of the entity list not changing the previously selected sort order
targetA.trigger("click")
}
});
UPDATE
Easier method to update entitylist is found in "app.bundle-1c3eb4f558.js" - file behind functionality to sort columns in entity list. That is the bit:
In my case the code to refresh the entity list after insert:
$("#requestEntityList").find(".entitylist").trigger("refresh")
