Refreshing a details view on form submit / record delete

API & Customization Show & Tell
1

This solution listens for a form submit or record deletion, and refreshes a details view on the same page without refreshing the whole page, as these type of events don’t refresh other views on the same page.

Usually I would just refresh the whole page to update the details, but in this case I wanted a quick way of adding invoice items to an invoice page without waiting for that refresh.

In the below GIF, I add multiple invoice items with various amounts, and the total $ in the top details views automatically updates to reflect the new total. I then delete these invoice items from the grid, and the same occurs.

refresh-details-view

Prerequisites

  • A details view (view_aa)
  • A form view (view_bb)
  • A grid view with a delete action (view_cc)

Code

  1. Copy and paste the below code into your Knack JavaScript section.
  2. Update view_aa, view_bb, and view_cc with your respective details view, form view, and grid view.
$(document).on('knack-form-submit.view_bb', function (event, view, data) {
  refreshDetailsView('view_aa');
});

$(document).on('knack-record-delete.view_cc', function (event, view, data) {
  refreshDetailsView('view_aa');
});


// A function to refresh a specified details view
function refreshDetailsView(viewKey) {
  Knack.views[viewKey].model.fetch();
  setTimeout(() => {
    Knack.views[viewKey].render();
    Knack.views[viewKey].postRender();
  }, 2000);
}

Code explanation

  • There is both a form-submit and record-delete event handler to listen for those respective events on particular views that triggers our refreshDetailsView function
    Note that we don’t need to account for in-line cell edits, as this already refreshes all views on a scene when a cell is changed.

  • Knack.view[viewKey].model.fetch() - gets the up to date data for that details view.

  • setTimeout(() => { ... }, 2000) - delays the next steps by 2 seconds. This allows the view time to fetch the new data and can be adjusted based on app performance

  • Knack.views[viewKey].render() - Visually updates the details view, however it does not readjust the detail label widths

  • Knack.views[viewKey].postRender() - Adjusts the detail label widths as they should be

If this solution has been helpful, please like this post, and feel free to buy me a coffee!

6 Likes