Update Related List after Deletion of child item from within the child item form

Hiya Plumsail

We have a form that has a related list within it.

When you open a child item, depending on what is chosen, that child item gets automatically deleted.
The problem we have is that the related list doesn't update when the child item is deleted.

Please can you inform us what we have to add to our code so that after deletion of the child item the related list updates?

We have tried the following strategies:

  1. Adding to the child form (so after saving the form it deletes it, deleteItem = true and the itemId is correct, the item isn't deleted but the child item is saved and the related list is updated):
fd.spSaved(function(result) {
    console.log('Item Id:' + fd.itemId + ' Delete? ' + deleteItem);
    if(deleteItem){
        //Delete this item
        var url = _spPageContextInfo.siteAbsoluteUrl + "/_api/web/lists('05907af9-5ea3-41b2-9f21-c3b22d8bac17')/items(" + 
        fd.itemId + ")/recycle"
        fetch(url, {
            method: 'POST',
            headers:{
            'Content-Type': 'application/json'
            }
        }).then(function(response) {
            console.log(response)
        });
    }
});

We also used
productLineItems.getById(fd.itemId).recycle()

We get a status cancelled:

  1. Within the fd.spBeforeSave, we have
    productLineItems.getById(fd.itemId).recycle()
    But this causes an error because the item is deleted before it is saved.

We are stuck! Please help!

Dear @Jamal_Smith-Graham,
I think you might need to move the code for deleting the item into the Parent form. For example, the following event can be triggered on change:

// displays an alert message with ID of the changed item
fd.control('SPDataTable1').$on('change', function(changeData) {
    if (changeData.type === 'edit') {
        alert(changeData.itemId);
    }
});

Instead of alert, you can use itemId to check some field value with pnp, and if the item is marked to be deleted, delete it with pnp and on success refresh the List or Library control.

It should work, at least in theory - let me know how it goes, we will try to reproduce the case if there are any difficulties.

Hiya @Nikita_Kurguzov

We thought of that, the only issue there is that the item is then restored, it will still have the field with deletion mark...But I guess we could use pnp to change that field back to the default before deleting. It is just alot code just to get a refresh of a list/library control!

The thing that would be awesome is if the fd.close() triggered a refresh on the parent list/library control like fd.save() does. Or if we could access the parent list/library control from the child form to force a refresh event after the deletion has happened but before the fd.close() on the child form in the fd.spBeforeSave. Is that possible?

Dear @Jamal_Smith-Graham,
The whole process is actually fairly straight-forward. Just add this line to parent form's JS editor:

window.fd = fd;

Then, use the following code in Child form to delete the item on close and refresh the List or Library control:

fd.spRendered(function(){
    //change click function
    fd.toolbar.buttons[1].click = function(){
        if (fd.field('Delete').value) {
            var list = sp.web.lists.getByTitle('DeleteChildList');
            list.items.getById(fd.itemId).delete().then(function(){
               window.top.fd.control('SPDataTable1').refresh();
               fd.close();
            });
        }
        else{
            fd.close();
        }
    }
});

This code uses the Close button, but if you're not - just ignore this part, you can still refresh parent and close the form after your request executes (the item is deleted).

1 Like

Thank you Nikita!

Will this code also work if the parent form was opened in a panel?

Dear @Jamal_Smith-Graham,
Should work just the same, make sure you add the following line to the parent form and it should all work:

window.fd = fd;
1 Like

Thank you soooooooo much!

It worked beautifully! :slight_smile:

1 Like