Discussions

 View Only
Expand all | Collapse all

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

Alex Wilkinson

Alex Wilkinson11-07-2018 19:22

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

    Posted 04-06-2018 01:19
    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


  • 2.  RE: how do I create a button that allows the user to continue to the next tab

    Posted 04-06-2018 10:19
    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.


  • 3.  RE: how do I create a button that allows the user to continue to the next tab

    Posted 04-30-2018 00:37
    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"
        )


  • 4.  RE: how do I create a button that allows the user to continue to the next tab

    Posted 04-30-2018 09:53
    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.


  • 5.  RE: how do I create a button that allows the user to continue to the next tab

    Posted 04-30-2018 01:05
    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?


  • 6.  RE: how do I create a button that allows the user to continue to the next tab

    Posted 04-30-2018 10:10
    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


  • 7.  RE: how do I create a button that allows the user to continue to the next tab

    Posted 06-16-2018 10:14
    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.


  • 8.  RE: how do I create a button that allows the user to continue to the next tab

    Posted 06-18-2018 12:40
    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!


  • 9.  RE: how do I create a button that allows the user to continue to the next tab



  • 10.  RE: how do I create a button that allows the user to continue to the next tab

    Posted 07-04-2018 20:02
    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


  • 11.  RE: how do I create a button that allows the user to continue to the next tab

    Posted 11-07-2018 16:19
    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



  • 12.  RE: how do I create a button that allows the user to continue to the next tab

    Posted 11-07-2018 18:47
    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");


  • 13.  RE: how do I create a button that allows the user to continue to the next tab

    Posted 11-07-2018 19:22
    #2 is wrong. See below ...


  • 14.  RE: how do I create a button that allows the user to continue to the next tab

    Posted 11-07-2018 19:05
    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.  


  • 15.  RE: how do I create a button that allows the user to continue to the next tab

    Posted 11-07-2018 19:32
    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");
    };


  • 16.  RE: how do I create a button that allows the user to continue to the next tab

    Posted 11-07-2018 20:03
    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");
    };






  • 17.  RE: how do I create a button that allows the user to continue to the next tab

    Posted 11-07-2018 20:20
    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.


  • 18.  RE: how do I create a button that allows the user to continue to the next tab

    Posted 11-09-2018 00:57
    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?!




  • 19.  RE: how do I create a button that allows the user to continue to the next tab

    Posted 11-09-2018 17:57
    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.


  • 20.  RE: how do I create a button that allows the user to continue to the next tab

    Posted 11-09-2018 21:33
    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");
    };


  • 21.  RE: how do I create a button that allows the user to continue to the next tab

    Posted 07-12-2019 18:07
    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!!!


  • 22.  RE: how do I create a button that allows the user to continue to the next tab

    Posted 06-16-2022 16:48
    Does this method still work with new Java Script rules?

    ------------------------------
    Chris Swirtz
    ------------------------------



  • 23.  RE: how do I create a button that allows the user to continue to the next tab

    Posted 11-05-2019 09:20
    This code is broken as of 11/5/19

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



  • 24.  RE: how do I create a button that allows the user to continue to the next tab

    Posted 11-05-2019 10:38
    Quick Base can change the page elements anytime as updates are released. This may affect custom code and may require updates to the custom code.

    It appears they updated a CSS class for the tabs, you will need to update the part of code that calls on the li.class

    (Change li.ui-tabs-selected to li.ui-tabs-active)
    var nextTabLink=$("li.ui-tabs-active").next("[style!='display:none']").children("a");​


    ------------------------------
    Everett Patterson
    ------------------------------



  • 25.  RE: how do I create a button that allows the user to continue to the next tab

    Posted 11-05-2019 10:41
    So when i tried the code in the console, worked no problem. When i tried to migrate it to a JS page, it no longer works.

    Thoughts?>

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



  • 26.  RE: how do I create a button that allows the user to continue to the next tab

    Posted 11-05-2019 10:47
    Post the full code and what you are trying to accomplish. I have no idea what setup you have and I was addressing the class update for one part of the code. It's also better to start a new thread instead of replying to years old threads.

    ------------------------------
    Everett Patterson
    ------------------------------



  • 27.  RE: how do I create a button that allows the user to continue to the next tab

    Posted 11-05-2019 10:51
    No need for the original code. I was referencing the wrong page. Thank you for the help!

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



  • 28.  RE: how do I create a button that allows the user to continue to the next tab

    Posted 11-05-2019 10:49
    Am idiot. Kids always remember to make sure youre referencing the correct table in your code.

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