Javascript to enhance the 'Warn on Unsaved Changes' UX with item-level call-outs

apex-detect-changed-items.js

//window.onbeforeunload = confirmExit;
/* The below will not run unless the above is uncommented.
 * The recommendation is to run the above command in a
 * dynamic action on page load of Page 0 with the Server
 * Side Condition of 'Rows returned' for the following query:
 * select 1
 *   from apex_application_pages
 *   where application_id = :APP_ID
 *   and page_id = :APP_PAGE_ID
 *   and warn_on_unsaved_changes = 'Yes'
 * This will have the result that the warning will respect the page
 * level attribute setting for 'Warn on Unsaved Changes'
 */

function warnOnItemLevel() {
  var errors = [];

  allItems = apex.page.forEachPageItem;
  allItems(
    $("#wwvFlowForm"),
    function (el, name) {
      if (
        apex.item(name).isChanged() &&
        !apex.item(name).element[0].classList.value.includes("js-ignoreChange")
      ) {
        errors.push({
          message: "This item has unsaved changes", //consider using a substitution
          location: "inline",
          pageItem: name,
        });
      }
    },
    true
  );

  apex.message.clearErrors();
  apex.message.showErrors(errors);
}

function confirmExit() {
  var pageRequest = "request" + $v("pRequest");
  if (apex.page.isChanged() && pageRequest == "request") {
    warnOnItemLevel();
    pageRequest = null;
    return ""; //will not actually be shown
  } else {
    pageRequest = null;
  }
}