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

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 pagecustomButtonScript2 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?

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.

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

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

27 Replies

AlexWilkinson
Qrew Assistant Captain
6 years ago
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.
MichaelHalbrein
Qrew Cadet
6 years ago
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?!
- AlexWilkinson
  Qrew Assistant Captain
  6 years ago
  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.
- AlexWilkinson
  Qrew Assistant Captain
  6 years ago
  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");
  };
CaroleVandenbe1
Qrew Cadet
5 years ago
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!!!
- ChrisSwirtz3
  Qrew Member
  2 years ago
  Does this method still work with new Java Script rules?
  
  ------------------------------
  Chris Swirtz
  ------------------------------
GiuseppeMacri
Qrew Captain
5 years ago
This code is broken as of 11/5/19

------------------------------
GMacri
------------------------------
- EverettPatterso
  Qrew Captain
  5 years ago
  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
  ------------------------------
  - GiuseppeMacri
    Qrew Captain
    5 years ago
    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
    ------------------------------

Forum Discussion

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

27 Replies

Related Content

New Form - Show Create Record button

Innovation: The Smart Builder Journey Continues

Create a formula duration over 5 years

Create Child Record, Save and then Edit button

Button: save the new record and edit the new record

Recent Discussions

Save & Redirect in a Formula URL Using API_GenAddRecordForm

Many to Many too Many...

Selecting which fields to display from Formula URL searches

Bulk create child records from selection list

(Pipelines) Get Users in Role / Process XML from HTTP API