Refresh an Entity List Dynamically

[jothivels]

Is there a way to refresh an Entity List dynamically?

Thank you !

[OliverRodrigues]

Hi, can you give more details of your requirement?
Technically you can trigger the "sort" twice via JavaScript from the List component and this would normally refresh the data. (I haven't tested though, but that would be my first attempt) 

[jothivels]

Hello, 

I have an entity list as shown below. If User A is viewing this request and User B makes a change to the request and the status changes to "completed". The change needs to be reflected for User A on the list. Hope this explains it . 

Thank you for your help !

[OliverRodrigues · Accepted solution]

It does, but I wouldn't recommend forcing any refresh programmatically as I personally see very little business value to be gained here. The user should just refresh the page to get the data refreshed, they might face a caching issue, as the data was already loaded on the page, but I still would think this is very unlikely to be a real world scenario issue.

You can still try the approach of injecting a JavaScript and try to sort (twice) the list, but also what's the listener here? would you do a refresh every X seconds? this wouldn't be the best experience to the user and would also slow down performance of your site

[Sahil]

Hello @OliverRodrigues ,

I had the similar need for a Subgrid, thanks for posting the above suggestion. 

I am able to refresh the subgrid by sorting a column thru JS.

[AndrewElans]

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