Custom buttons for tabbed forms: Save & Next Tab, Save & Same Tab

Here's a method to do variants of "Save & keep working" within a tabbed form. First, I'll explain how to create a "Save & next tab" button. Then, with slight modification, I'll show "Save & same tab".

[1] On the form properties, do not check "Show Save & close and Cancel buttons at the end of this form" and do check "Show save & keep working choice"

[2] Create a rich-text-formula field called, say, "Custom Save and Next Tab". Temporarily, you can fill it the text "Save & next tab". Eventually, after completing the steps below, it will contain a custom Page and several custom Variables, like this:

[customButtonScript1]
& "saveAndNextTab.js"
& [customButtonScript2]
& [customButtonStyleSKW]
& "Save & next tab"
& [customButtonEnd]

[3] In the settings for you app, click on Variables and add one called "customButtonScript1". You can use a different name, if you wish, but be sure to use that name in the first like of the rich-text-formula in step [2]. Whatever you call it, the variable should contains the following. The quotes are important. However, remove the spaces in h t t p s, use your company's setting for "yourdomain" and your app's id instead of "yyy999zzz"

<a href='javascript:($.getScript("h t t p s://yourdomain.quickbase.com/db/yyy999zzz?a=dbpage&pagename=

[4] Next, in the settings for you app, add a Page called "saveAndNextTab.js" (or another name you prefer, provided you use it in the second line of the rich-text-formula field"). The page should contains exactly this:

var nextTabLink=$("li.ui-tabs-selected").next("[style!='display:none']").children("a");
$("#saveAndKeepWorkingMenuOption").click();
var noErrorDialog=$('#qbDialog').length==0;
if( noErrorDialog ){
$(nextTabLink).click();
location.assign('#navTop');
};

In words, this script is (a) finding the currently selected tab, then the next that is not hidden, and it's name; then (b) clicking the standard "Save & keep working" button, emulating a user; and (c) checking for a pop-up error message, e.g., about failing to supply a required field; and finally (d) clicking the next non-hidden tab-name and scrolling up to where the tab-row will be visible.

[5] Back on your app's settings, add another Variable to close the script. Call it "customButtonScript2" if you are sticking to the naming in step [2]. It must contain exactly this:

"));void(0);

[6] Next you need to style the custom button. I prefer doing so as follow, to make it resemble the standard save buttons. Add another Variable in you app's settings called "customButtonStyleSKW" which contains this:

' class='Vibrant Tall' style='font-size:14px; color:white; background:#6BBD57; white-space:nowrap;'>

[7] Finally, in add one more Variable in your app's settings, called "customButtonEnd", containing simply:

</a>

Of course, you could just use "</a>" as the final line of your rich-text-formula field, but I prefer the additional Variable for readability ... and just in case I ever want to make some sort of global change for all my custom button's endings.

[8] Oh, and to get this button on your forms, add it at the end of every tab. (On the last tab, it will stay there, after not finding any next tab.) Naturally, you will want to use an empty "alternate label" for that row of the form, and set it for add and edit modes only.

To modify this method for "Save & same tab", the main change is in the first line of the script in step [4]. Use this:

var sameTabLink=$("li.ui-tabs-selected").children("a");

Also, later in the script, use:

$(sameTabLink).click();