After in-line table edit force database update and quickly update table content in web app

Ask the community
1

Hi everyone,

I am working with a Softr Database connected to a Softr app. In the app the user can interact with a table object, which is a filtered view of a database table.

I use the in-line table edit feature for several fields (beta feature). It is super useful for my use case, where many rows and columns need to be edited (Dropdown select). Next to the editable fields are two fields which are functions of the editable fields (inputs). No matter if these “function fields” are formula or updated via an automated workflow, it takes about 10 seconds for the GUI to refresh its content. So, a user updated a column and see the result 10 seconds later. That is slow!

I timed the process as follows, the start time is the time when the cell is edited, then we have:

  • Formula update field: 1 sec
  • Workflow update fields: 3 sec (in parallel with formula)
  • Table GUI fetches information: refreshes every 10 sec (independ[ent] of formula or workflow)

I wrote some custom code to cut down the refresh time to 4.5 sec. The trick is that I need to leave enough time (3500 ms minimum) for the database to compute the new results, otherwise I will update the table with the old values and need for the 10 sec refresh to take place.

In the following example, my table is called “the-table-id” (id tag of the table div container).

What the following code does:

  1. I observe the #table-bd-qualifications container for DOM changes.
  2. When a <button> is added (indicating edit mode), I log the event and set buttonWasPresent = true.
  3. When the <button> is removed (indicating edit completion), I schedule a reload after 3500 ms.
<script>
window.addEventListener('block-loaded-the-table-id', function () {
  const container = document.getElementById('the-table-id');
  if (!container) return;

  let reloadTimer = null;
  let editorOpen = false;

  const observer = new MutationObserver((mutations) => {
    for (const m of mutations) {
      for (const node of m.addedNodes) {
        if (node.nodeType === 1 && node.tagName === 'BUTTON' &&
            m.target.closest?.('[role="gridcell"]')) {
          editorOpen = true;
        }
      }
      for (const node of m.removedNodes) {
        if (node.nodeType === 1 && node.tagName === 'BUTTON' && editorOpen) {
          editorOpen = false;
          if (reloadTimer) clearTimeout(reloadTimer);
          reloadTimer = setTimeout(() => {
            window.dispatchEvent(
              new CustomEvent('reload-block-the-table-id')
            );
            reloadTimer = null;
          }, 3500);
        }
      }
    }
  });

  observer.observe(container, { childList: true, subtree: true });

  if (window.SOFTR_PAGE?.beforeUnload) {
    window.SOFTR_PAGE.beforeUnload(() => {
      observer.disconnect();
      if (reloadTimer) clearTimeout(reloadTimer);
    });
  }
});
</script>

Question

  1. Is there another way to force the refresh via the no-code setting (but avoiding a Edit Detail modal + workflow) ?
  2. Is there a way to properly get an event notification when the database is done updating its content and would require no (or very little) maintenance ?