Save & Redirect to a Tab or a Specific Field on the Same Form

Forms SharePoint Online
1

I’d like to create a Button that does the following:

  1. Save Form (do not close form)
  2. Redirect to a specific Tab and/or a Field on the same form
  3. Even when not using Tabs, I’d like to do this where users can jump to another location (e.g., field or control) on the current form
2

This post relates somewhat to another topic I posted and that still does not work: Scroll To Top of Page Button - #11 by shedev

3

Add Click to Button:

// --- Remember where to land after the reload ---
sessionStorage.setItem('ps_jump_tabControl', 'HeaderTab');  // Tabs control name
sessionStorage.setItem('ps_jump_tab', '0');                 // destination tab (0-based)
sessionStorage.setItem('ps_jump_field', 'testingpoint');    // field Internal Name

// --- Belt & suspenders: swallow default close/redirect for THIS click only ---
var _origClose     = fd.close;
var _origRedirect  = fd.redirect;
var _origCloseDlg  = fd.closeDialog;

fd.close        = function () { /* swallow */ };
fd.redirect     = function () { /* swallow */ };
fd.closeDialog  = function () { /* swallow */ };

// Helper: build a guaranteed EditForm URL for this item
function buildEditUrl(itemId) {
  // _spPageContextInfo is present in SharePoint full-page forms
  var ctx = window._spPageContextInfo || {};
  var webUrl  = ctx.webAbsoluteUrl;                 // e.g., https://tenant.sharepoint.com/sites/Site
  var listId  = ctx.pageListId || ctx.listId;       // {GUID}
  if (!webUrl || !listId || !itemId) return null;

  // PageType=6 → Edit form
  var url = webUrl +
    '/_layouts/15/listform.aspx?PageType=6' +
    '&ListId=' + encodeURIComponent(listId) +
    '&ID=' + encodeURIComponent(itemId) +
    '&IsPlumsailForms=1';

  return url;
}

// --- Save and then force-open the explicit Edit form URL for THIS item ---
return fd.save(true).then(function () {
  try { fd.notify('Saved. Reopening the form…', 'success'); } catch (e) {}

  var id      = fd.itemId;                 // works for Edit; for New it's set after save
  var editUrl = buildEditUrl(id) || window.location.href;

  // Restore originals before navigating
  fd.close       = _origClose;
  fd.redirect    = _origRedirect;
  fd.closeDialog = _origCloseDlg;

  // Navigate to the explicit EditForm URL (bypasses any Source/view redirects)
  window.location.replace(editUrl);

}).catch(function (e) {
  // On failure, restore originals and rethrow
  fd.close       = _origClose;
  fd.redirect    = _origRedirect;
  fd.closeDialog = _origCloseDlg;

  console.error('Save failed', e);
  try { fd.notify('Save failed. See console for details.', 'danger'); } catch (ex) {}
  throw e;
});

Add JavaScript:

////>>>>>>>>>>>>>> Redirect to TAB 1 via Button
//
fd.spRendered(function () {
  var tabControl  = sessionStorage.getItem('ps_jump_tabControl');
  var tabIndexStr = sessionStorage.getItem('ps_jump_tab');
  var fieldName   = sessionStorage.getItem('ps_jump_field');

  if (tabIndexStr === null) return;

  // Clear so it runs once
  sessionStorage.removeItem('ps_jump_tabControl');
  sessionStorage.removeItem('ps_jump_tab');
  sessionStorage.removeItem('ps_jump_field');

  // 1) Open requested tab
  var tabs = fd.control(tabControl || 'HeaderTab');
  var idx  = parseInt(tabIndexStr, 10);
  if (tabs && typeof tabs.select === 'function' && !isNaN(idx)) {
    tabs.select(idx);
  }

  // 2) After a brief tick, scroll & focus the field
  setTimeout(function () {
    if (!fieldName) return;

    var fld = fd.field(fieldName);
    if (!fld) return;

    var hostEl = (fld.$el && fld.$el[0]) ? fld.$el[0] : null;
    if (hostEl) {
      hostEl.scrollIntoView({ behavior: 'smooth', block: 'start' });
      // If a sticky header hides the field, use this instead:
      // var offsetPx = 80; var rect = hostEl.getBoundingClientRect();
      // window.scrollTo({ top: window.pageYOffset + rect.top - offsetPx, behavior: 'smooth' });
    } else {
      try { fd.scrollTo(fld); } catch (e) {}
    }

    var focusEl = null;
    try { if (fld.$editor && typeof fld.$editor === 'function') focusEl = fld.$editor(); } catch (e) {}
    if (!focusEl && fld.$input) focusEl = fld.$input;
    if (!focusEl && fld.$el) {
      var q = fld.$el[0].querySelector('input, textarea, [contenteditable="true"], select');
      if (q) focusEl = q;
    }
    if (focusEl && typeof focusEl.focus === 'function') {
      setTimeout(function () { focusEl.focus(); }, 60);
    }
  }, 150);
});
1 Like