how do I create a button that allows the user to continue to the next tab

Lorraine, here are some ideas for making it easier for naive users to navigate tabs. I've been using them successfully for a public form ("everyone on the internet") where the users have no Quick Base account or experience, and the form they must complete is rather long.

First: Name the tabs in a way that makes the order of entry apparent. In my case, there are five tabs named "Start" (which collects the user's contact info); "Part 1", "Part 2", and "Part 3" (which collect the important data); and "Finish" which comfirms completion and tells them how we'll respond to their submission.

Second: On the form's Properties, check the box "Show save & keep working choice" but do NOT check the box "Show Save & close and Cancel buttons at the end of this form." The idea is to enable a save-as-you-go experience, so as to preserve partial input if the user abandons, but don't expect them to know the fine points of Quick Base's standard buttons. Instead ...

Third: Create a custom button with Javascript that displays as "Next" and place it at the bottom of each tabbed section. Conceptually, the button parses the page's HTML to find the clickable link that's inside the next tab, then clicks the "Save & keep working" button that's at the top of the page, and finally clicks the next tab link. In short, it emulates the clicking that an experienced Quick Base user would do. To create the button:

a) In the app's settings, create a Page called "SaveAndNextTab.js" that contains the following text:

    var nextTabLink=$("li.ui-tabs-selected").next().children("a");
    $("#saveAndKeepWorkingMenuOption").click();
    $(nextTabLink).click();

b) In the app's settings, create two Variables to handle the necessary quoting. One is going to precede the .js Page; the other will follow it.

customButtonScript1 contains:

    <a href='javascript:($.getScript("https://xxxx.quickbase.com/db/yyyyyyyyyy?a=dbpage&pagename=

where the URL is for your app's home page

customButtonScript2 contains:

    "));void(0);

c) Define a formula-rich-text button called "Go to Next Tab" (or whatever you like):

    [customButtonScript1]
    & "SaveAndNextTab.js"
    & [customButtonScript2]
    & "' class='Vibrant' style='color:white; background:#427cd8; white-space:nowrap;'>Next</a>"

In the last line above, note the double-quote, single-quote at the beginning, and change the style settings as you prefer. I like to use a background color on the button that is also set as the tab-color.

Fourth, optionally: It may be helpful to have a formula field that tracks which tabs your user has visited. I use it, together with Dynamic Form Rules, to require certain fields on the current tab. Thus the save-as-you-go strategy is coupled with require-as-you-go. But you could also use the formula field simply as a marker to tell you how far your user went. In my five-tab example, the formula field is:

If([Start Tab Completed],
    If([Part 1 Completed],
        If([Part 2 Completed],
            If([Part 3 Completed],
                "Finish",
                "Part 3"
                ),
            "Part 2"
            ),
        "Part 1"
        ),
    "Start"
    )

As you can see, it's actually a set of formula fields. For example, [Start Tab Completed] is true if certain fields on the initial tab are populated, etc.

Hi Alex, thank you for you very detailed reply.
I just have a few questions, especially about the FOURTH step.
How do I set up the formula fields? Do I need to somehow define [start tab completed] first before setting up the formula fields:
If([Start Tab Completed],
    If([Part 1 Completed],
        If([Part 2 Completed],
            If([Part 3 Completed],
                "Finish",
                "Part 3"
                ),
            "Part 2"
            ),
        "Part 1"
        ),
    "Start"
    )

Also, I can't seem to make the Next button to work....
customButtonScript1 contains:

    <a href='javascript:($.getScript("https://xxxx.quickbase.com/db/yyyyyyyyyy?a=dbpage&pagename= when you say the url, is it the page that's called SaveAndNextTab.js?

Thanks for the great info. Sorry if this is known, but seemed interesting:

If you use the above Next Tab technique on a form opened with "&ifv=1" at the end, it does not save and just goes to the next tab.

Hi Alex, thank you so much for this post, as it helped me to resolve part of my problem I have been having for several days.  However I am not yet a JAVA Guru yet, and I need some more assistance. I am left with two problems...just for some background, I am using your button to register a new record in a customer call centre. (I am also happy to share app with you to assist?)

1. My first problem is, the current next button (your solution) does not redirect me to the correct Tab, it redirects to another form?  (I am using your solution to basically authenticate user)
2. secondly, I need to add another button, which will redirect to dashboard (when the user fails authentication, it needs to select the "Reject button", and return to dashboard?

Furthermore, have you got the same solutions for mobile button?

Looking forward to your reply and assistance.

Regards
Paul

This works great Alex. Thank you for this.  I have a follow up question.  I have the button on the first tab that will take me to the second tab.  However, the second tab is hidden by a dynamic rule based on a selection in the first tab.  If it remains hidden, when the user click "save and next tab" I need them to be directed to the 3rd tab, as the second tab does not show because it does not apply to them.  Is there a way to do this? 

Thanks.
Scott

Michael, two ideas. Without knowing a few details about your app, I am not sure which of the two would work better. Possibly, they both would.

1) Suppose that tab 2 is hidden by your rule, then you might adapt the navigational formula field in my original post to work something like this:

If([Start Tab Completed],
    If([Part 1 Completed] and [Part 2 Shown],
        If([Part 2 Completed] or not [Part 2 Shown] ,
            If([Part 3 Completed],
                "Finish",
                "Part 3"
                ),
            "Part 2"
            ),
        "Part 1"
        ),
    "Start"
    )

Then you would need to create a formula-checkbox field [Part 2 Shown] that evaluates to true when you want that tab to be visible. I often do this to avoid having to create complex show-hide rules within a form. On the form, I put a section that is shown only if the user is an Admin, and add the [Part 2 Shown] field in that section. Finally, the form rule is then very simple: When [Part 2 Shown] is checked, show tab "Part 2". (Disclaimer: I have not actually tried this option, though I am pretty sure it would work.)

2) Somewhat more powerful (but also less transparent!) is a second option, which involves a modification of the script "saveAndNextTab.js". Essentially, the revised script, instead of finding the next tab, finds the next one that is not hidden. Here's the modified script; notice the first line. (Also, as a bonus, I've added a fourth line that scrolls to a place where that tabs will be near the top of the page, which is handy if you have fixed fields above the tab-ribbon and a lot of fields under the selected tab.)

var nextTabLink=$("li.ui-tabs-selected").next("[style!='display:none']").children("a");
$("#saveAndKeepWorkingMenuOption").click();
$(nextTabLink).click();
location.assign("#mainBodyDiv");

Thanks for the help Alex.  I like the second method and tried this.  However, it did not work to move to the next tab that is not hidden.  it stayed at the first tab.  

Michael, apologies for flubbing #2. In a rush, I copied the wrong script. Below is the right one. You might want to save as something like "saveAndNextNotHiddenTab.js" to be extra clear when you later wonder what on earth you were thinking! If so, you need to use that same page-name in the body of the rich-text formula for the "Save and Next Tab" button.

- line 1 finds the next displayed tab
- line 2 clicks the standard save-and-keep-working button
- line 3 checks to be sure there is no pop-up error message, e.g., about a required field
- the rest says if there's no error, click the next unhidden tab and scroll to a good point.
- also, note in earlier comments that none of this works if you use &ifv= in your URL to hide Quick Base headers and other stuff.

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("#mainBodyDiv");
};

I tried this and still can't get it to work.  It stays on the 1st tab when the 2nd tab is hidden and doesn't advance to the 3rd tab.  

Here is my field code:

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

here is my code page:

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("#mainBodyDiv");
};

Can you screenshot or copy-paste how you are hiding the 2nd tab? I am trying to find out if your scenario hides the 2nd tab before or after the "Save & next tab" button gets clicked. The button click should happen after the tab is hidden, not before. Conceptually, you need something like this:

• Button is hidden when tab 1 is visited.
• User enters data. When they have entered enough so that you know tab 2 should be hidden, hide it.
• Then show the button.

Referring to an earlier comment above, one part of this solution is probably a formula-checkbox field called "Show Tab2" that controls whether tab should be visible.

having trouble getting image uploaded.  to try to describe the scenario ... on tab 1, the button sits at the bottom of the form from the beginning (e.g. it is always shown).  The user answers multiple questions on the form.  The last MC question (Yes or No) sits just above the button.  If the user selects yes, the 2nd tab shows up (the 2nd tab is otherwise hidden).  The 2nd tab is hidden from the start and only shows when Yes is selected to that question.  If the user selects No then it remains hidden.  In this latter scenario, the button, when clicked, should go to the 3rd tab that is always shown.  I hope this helps?!

This is an excellent write-up and solved a problem for me.  Thank you!

And of course, I do have a question - is there a way to have a Save button at the end of the completion of the fields on the various tabs?  

I want to proceed this way:
In the Add form, the user fills out tab 1, 2 and 3 and then saves the record by hitting a Save button somewhere which takes them either to completed record or back out to dashboard.  .

In the Edit form (it is a different form), they can edit anywhere and save from anywhere - not sure I'll need the Next buttons on that form. 

Thanks!!!

This code is broken as of 11/5/19

------------------------------
GMacri
------------------------------