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

  • 2
  • 2
  • Question
  • Updated 3 days 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 7 months ago

  • 2
  • 2
Photo of Alex Wilkinson

Alex Wilkinson

  • 1,006 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.
Photo of Lorraine Chung

Lorraine Chung

  • 160 Points 100 badge 2x thumb
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"
    )
Photo of Alex Wilkinson

Alex Wilkinson

  • 996 Points 500 badge 2x thumb
Exactly right. You would need, for example, a formula field called "Start Tab Completed" which might be something like this:
[Name]<>"" and [Address]<>"" and [Item]<>" 
where those are three required fields on the Start tab.
Photo of Lorraine Chung

Lorraine Chung

  • 160 Points 100 badge 2x thumb
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?
Photo of Alex Wilkinson

Alex Wilkinson

  • 996 Points 500 badge 2x thumb
Go to the Home tab on your app. Copy the URL that's in your browser. It will start with https:// and have your company instead of xxx, and your app ID instead of yyyyyyyyy. Paste that URL between the double-quote and the ? in the text for customButtonScript1
Photo of Gary Boyd

Gary Boyd

  • 800 Points 500 badge 2x thumb
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.
Photo of Alex Wilkinson

Alex Wilkinson

  • 936 Points 500 badge 2x thumb
With "&ifv=1" in the URL that opens the form, the standard Quick Base buttons to save and cancel don't get displayed, and are not in the HTML of the page. Consequently, this part of the javascript does nothing, because the reference is not in the HTML:

$("#saveAndKeepWorkingMenuOption").click();

Thanks for catching it!
(Edited)
Photo of Gary Boyd

Gary Boyd

  • 800 Points 500 badge 2x thumb
Really liked the info you gave.
Found this trying to figure out how to hide the header rows in the browser that take a lot of space & still keep functionality.
https://community.quickbase.com/quickbase/topics/best-way-to-frame-app-and-remove-all-headers?rfm=1&...
Photo of Paul Vorster

Paul Vorster

  • 546 Points 500 badge 2x thumb
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
Photo of Michael Halbreiner

Michael Halbreiner

  • 170 Points 100 badge 2x thumb
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

Photo of Alex Wilkinson

Alex Wilkinson

  • 1,006 Points 1k badge 2x thumb
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");
Photo of Alex Wilkinson

Alex Wilkinson

  • 1,006 Points 1k badge 2x thumb
#2 is wrong. See below ...
Photo of Michael Halbreiner

Michael Halbreiner

  • 170 Points 100 badge 2x thumb
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.  
Photo of Alex Wilkinson

Alex Wilkinson

  • 1,006 Points 1k badge 2x thumb
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");
};
(Edited)
Photo of Michael Halbreiner

Michael Halbreiner

  • 170 Points 100 badge 2x thumb
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");
};




Photo of Alex Wilkinson

Alex Wilkinson

  • 1,006 Points 1k badge 2x thumb
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.
(Edited)
Photo of Michael Halbreiner

Michael Halbreiner

  • 170 Points 100 badge 2x thumb
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?!


Photo of Alex Wilkinson

Alex Wilkinson

  • 1,006 Points 1k badge 2x thumb
Very helpful. I was able to create a test form (modified from one of my production apps) with settings that exactly match those you described. And, yes, the test form reproduced exactly the behavior you described. I'd like your scenario to work for my own apps, so I will start debugging the test form. I'll post a solution here, if I am able to find one.
Photo of Alex Wilkinson

Alex Wilkinson

  • 1,006 Points 1k badge 2x thumb
Modifying just the first line of the script seems to solve the problem. Here's the full script:

var nextTabLink=$("li.ui-tabs-selected").nextAll(":visible").children("a:first");
$("#saveAndKeepWorkingMenuOption").click();
var noErrorDialog=$('#qbDialog').length==0;
if( noErrorDialog ){
$(nextTabLink).click();
location.assign("#mainBodyDiv");
};