Refresh List or Listitem via Field Customizer or Command Set

[OliverZeiser]

Category

• Question
• Typo
• Bug

Expected or Desired Behavior

When using a Field Customizer (e.g. a slider or toggle...) to quickly update a fields value directly from within the listview, the changes are not picked up by the ootb list control. The value gets updated just fine, but if you click on view or edit item after that, the changes are not reflected there.
Is there a way to refresh the list? We used to be able to do this in classic like this:
// Set Ajax refresh context var evtAjax = { currentCtx: ctx, csrAjaxRefresh: true }; // Initiate Ajax Refresh on the list AJAXRefreshView(evtAjax, SP.UI.DialogResult.OK);

Observed Behavior

Currently the list is in the wrong state if updating the list via field customizer or command set. Changes done to the item/items via spfx customization are not picked up by the list until we do a full page refresh.

Steps to Reproduce

Look at those examples, edit a value using the field customizer and then click on view or edit item. You will see the changes are not reflected in the list control, although the values get correctly updated.
https://github.com/SharePoint/sp-dev-fx-extensions/tree/master/samples/react-field-toggle
https://github.com/SharePoint/sp-dev-fx-extensions/tree/master/samples/react-field-slider

Thanks for your contribution! Sharing is caring.

[patmill]

Hi @OliverZeiser , unfortunately updating fields isn't currently supported. While parts of it may work (as you found), you will run into issues. There is a future work item to support editing of fields, but there isn't a specific timeline I can share with you. I'm marking this as an enhancement. If you wish, you can enter your request at https://sharepoint.uservoice.com/.

[jusper-dk]

Hi @OliverZeiser ! Basically, it looks like a hack, but you can trigger the following code in a list view to update it without refreshing the whole page:

var listEl = document.querySelector('.sp-App-root');
var listVM = __ko.dataFor(listEl);
var ii = listVM.resources.consume(require.s.contexts._.defined.eR.itemInvalidator);
ii.invalidateCurrentItemSet();

The only concern is that the require module will be renamed in a future version of SharePoint, so instead of retrieving it by the name, you'd better iterate through all loaded modules and take the first one containing the 'itemInvalidator' property:

var modules = window.require.s.contexts._.defined;
for (var p in modules) {
    if (modules.hasOwnProperty(p) && modules[p] && modules[p].itemInvalidator) {
        var itemInvalidatorKey = modules[p].itemInvalidator;
        var rootEl = document.getElementById('appRoot');
        var rootVM = window.__ko.dataFor(rootEl);
        var itemInvalidator = rootVM.resources.consume(itemInvalidatorKey);
        itemInvalidator.invalidateCurrentItemSet()
        break;
    }
}

[vladyslav571]

Hi @OliverZeiser ! Basically, it looks like a hack, but you can trigger the following code in a list view to update it without refreshing the whole page:

var listEl = document.querySelector('.sp-App-root');
var listVM = __ko.dataFor(listEl);
var ii = listVM.resources.consume(require.s.contexts._.defined.eR.itemInvalidator);
ii.invalidateCurrentItemSet();

The only concern is that the require module will be renamed in a future version of SharePoint, so instead of retrieving it by the name, you'd better iterate through all loaded modules and take the first one containing the 'itemInvalidator' property:

var modules = window.require.s.contexts._.defined;
for (var p in modules) {
    if (modules.hasOwnProperty(p) && modules[p] && modules[p].itemInvalidator) {
        var itemInvalidatorKey = modules[p].itemInvalidator;
        var rootEl = document.getElementById('appRoot');
        var rootVM = window.__ko.dataFor(rootEl);
        var itemInvalidator = rootVM.resources.consume(itemInvalidatorKey);
        itemInvalidator.invalidateCurrentItemSet()
        break;
    }
}

this worked for me for few days, but stopped days ago. Does it still work for you?

[vladyslav571]

rootVM.resources became an empty object @jusper-dk

[msft-github-bot]

Issues that have been closed & had no follow-up activity for at least 7 days are automatically locked. Please refer to our wiki for more details, including how to remediate this action if you feel this was done prematurely or in error: Issue List: Our approach to locked issues