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

  • 3
  • 2
  • Question
  • Updated 7 months ago
  • Answered
We are creating a public form with multiple sections. Using the new tab section makes the form looks a lot neater, which is great, but there doesn't seem to be a way for us to indicate to the user where they are in the form and direct them to the next tab. 
Does anyone know how to create a button where the user can be redirected to the next tab? Or save and redirect to the next tab, or a field that is in the next tab? 

Also, this is a very noob question, but where can I find the url for my form which removes the Quickbase header and tabs? 
And how do I embedd the form into an iframe? 

If it's embedded in an iframe, when I look at it on a mobile, does it default to the QB mobile view? 

Thanks in advance
Photo of Lorraine Chung

Lorraine Chung

  • 160 Points 100 badge 2x thumb
  • frustrated

Posted 1 year ago

  • 3
  • 2
Photo of Alex Wilkinson

Alex Wilkinson

  • 1,166 Points 1k badge 2x thumb
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.