Quick Base Junkie Blog

Short videos and posts to skyrocket your Quickbase skills!

Get tips in your inbox

Join the Quick Base Junkie Community email list!

Simple Solutions: Toggle Switch for New/Old Forms in Quickbase

forms formulas html simple solutions Jul 12, 2023

I'm sure you're familiar with the handy toggle that allows you to switch between new and old style reports.

That handy toggle, proudly adorned with a green check mark and the words "New Style," allows you to switch to the old style of a report whenever needed. Which can come in handy if you need to access something not available in the new style.

Reports Toggle On

It's like having a Quickbase time machine for your reports!

Once you switch to the old style report, the toggle becomes light gray as a gentle reminder that you are stepping back in time. 🦕

Reports Toggle Off

Fast forward to June 2023, when Quickbase released a bombshell... Next Gen forms are available on all accounts!

But wait, where's the "New Style" toggle switch for forms? 😱

Panic not, my friend!

I've got a clever solution that will have you toggling like a pro. 😎

And once you've added your toggle using the formulas below and want to unlock even more awesomeness, I have 2 courses and a shortcut tool that perfectly complement your journey that I'll share in a bit.

Step #1: Prep Work

To make your own toggle, it's Rich Text Formulas to the rescue!

I've concocted two brilliant formulas – one for the "on" toggle and another for the "off" toggle.

You'll place one of these fields on the old form and one on the new form.

And like magic 🪄, you've created a familiar switch experience for toggling back and forth as needed.

Prep Work:

Create a new Next Gen form if you haven't yet. It's easy, just click on "new form' from your form list and add your fields. Need more help? Check out this video from Empower
Identify the ID #s of both the old and new forms by looking at the ID column in your form list.
Create two new Formula - Rich Text fields, one for the new form that will navigate to the old and one for the old form that will navigate to the new.
You'll place the "New to Old" field on the new form and the "Old to New" field on the old form. Try to put them in similar locations. They won't line up in exactly the same spot due to the difference in the form layouts, but make it as close as you can.
Set the field labels on both forms to be hidden.

Step #2: Toggle formula for the 'New' form

If you haven't used much HTML in Rich Text formulas, this toggle formula can be a bit overwhelming... which is why I've provided it with literally only one number (the form ID) that needs to be updated.

Easy peasy! 🍋

The form ID for the "Old" form goes on the first line in the formula below.

The result is a toggle that displays a white slider on the right of a green track with the word "ON" next to the words "New Style" on the right.

This toggle also serves as a button to the old form displaying the same record.

Example:

Form Toggle On

Rich Text Formula (Toggle - New to Old):

var text OLD = "2"; // old form ID

var text URL = URLRoot() & "db/" & Dbid() & "?a=er&rid=" & [Record ID#] & "&dfid=" & $OLD & "&NextURL=" & URLEncode(URLRoot() & "db/" & Dbid() & "?a=td");

var text TRACK =
 "display:inline-block;" &
 "font-size: 14px;" &
 "margin: auto;" &
 "text-decoration: none;" &
 "padding: 1.5px 0px 0px 6px;" &
 "color: white;" &
 "position: relative;" &
 "width: 52px;" &
 "height: 22px;" &
 "border-radius: 16px;" & 
 "background: rgb(39, 136, 11);"; //Green
 
var text SLIDE = 
 "display:inline-block;" &
 "position: absolute;" &
 "top: 50%;" &
 "transform: translate(0, -50%);" &
 "width: 16px;" &
 "height: 16px;" &
 "border-radius: 50%;" &
 "background: white;" &
 "left: 32px;"; // switch right

If(IsNull([Record ID#]),"",
"<div style='white-space:nowrap;'>" &
"<a class='SaveBeforeNavigating' href='" & $URL & "' style='" & $TRACK & "'>ON<span style='" & $SLIDE & "'>&nbsp</span></a>" &
"<span style='font-size:14px; vertical-align:top; padding-left: 5px;'>New Style</span>" &
"</div>")

Step #3: Toggle formula for the 'Old' form

Now on to formula number 2.

This formula is quite similar, only the toggle slide is on the left side of the track and the track is light gray with the word "OFF".

The form ID for the "New" form goes on the first line in the formula below.

Example:

Form Toggle Off

Rich Text Formula (Toggle - Old to New):

var text NEW = "10"; //new form ID
var text URL = URLRoot() & "db/" & Dbid() & "?a=er&rid=" & [Record ID#] & "&dfid=" & $NEW & "&NextURL=" & URLEncode(URLRoot() & "db/" & Dbid() & "?a=td");

var text TRACK =
 "display:inline-block;" &
 "font-size: 14px;" &
 "margin: auto;" &
 "text-decoration: none;" &
 "padding: 4.5px 0px 0px 22px;" &
 "color: white;" &
 "position: relative;" &
 "width: 52px;" &
 "height: 22px;" &
 "border-radius: 16px;" & 
 "background: rgb(215, 214, 217);"; //Gray
 
var text SLIDE = 
 "display:inline-block;" &
 "position: absolute;" &
 "top: 50%;" &
 "transform: translate(0, -50%);" &
 "width: 16px;" &
 "height: 16px;" &
 "border-radius: 50%;" &
 "background: white;" &
 "left: 3px;"; // switch left

If(IsNull([Record ID#]),"",
"<div style='white-space:nowrap;'>" &
"<a class='SaveBeforeNavigating' href='" & $URL & "' style='" & $TRACK & "'>OFF<span style='" & $SLIDE & "'>&nbsp</span></a>" &
"<span style='font-size:14px; padding-left: 5px;'>New Style</span>" &
"</div>")

That's it! You've added new/old toggles to your forms. 🤩

Now that you've conquered the art of toggling and dived into Quickbase's rich text formulas, why not learn how these types of buttons are built and much much more?

Quick Base Junkie has courses & tools that will supercharge your journey to Quickbase mastery:

The Button Masterclass: Buttons are an invaluable asset to any Quickbase workflow. This course teaches you how to build buttons using the rich text formula field. With the use of a little HTML & CSS code, builders will learn to create attractive custom navigation and action buttons.
HTML Formula Crash Course: The missing piece for optimizing the display of information, driving focus for action, and creating visually pleasing user experiences! This course takes the complex topic of HTML & CSS coding and makes it approachable for any Quickbase builder looking to take their apps to the next level.
Super Fast HTML Formula Converter Tool: A must-have for anyone using a lot of HTML in Quickbase. This tool instantly converts any block of HTML text into a Rich Text Formula friendly text string. Don't believe me? Watch the demo

These courses are designed to empower you with the knowledge and skills to become a Quickbase HTML legend.

Visit Quick Base Junkie Training to learn more and start today!

Additional Notes

You now have the power to toggle between the new and old style forms and it's time to start toggling like nobody's watching. 🕺

But, with great power comes great responsibility.

So, before I wrap up...

This formula may appear flawless, but it does have some drawbacks:

Modifications may throw off the design. The exceptions are the colors, the second to last line starting and ending with <span> which can be removed if you don't want to see the words "New Style" next to the toggle, and replacing the words "New Style" with any words you want.
This toggle is not "sticky", meaning you will have to click it each time you open a record to navigate to the old or new style. Note: the default form that initially opens is based on the table's form setting by user role.
Navigational "cookie crumbs" are lost. This means that if you make edits to the record after toggling you won't necessarily be brought back to the location prior to using the toggle. These formulas are programmed to take you to the table's home page after toggling and saving the record.
The part of the formula that controls this is in the second variable and looks like this:
```
& "&NextURL=" & URLEncode(URLRoot() & "db/" & Dbid() & "?a=td")
```
If you want to change it to go to the home page after saving, replace Dbid() & "?a=td" with AppID(). Learn more about navigation options
Depending on where exactly you click on the toggle it may not open the other form, these instances are few and far between, just try clicking again.

🥂 Cheers to Quickbase for their commitment to innovation and user experience!

While the new style forms may not come with a native toggle, we've cracked the code with these toggle formulas.

So go forth, my fellow Quickbase junkies, and embrace the toggling adventure, and remember, with Quickbase, even the absence of a native toggle can't stop us when we have rich text formulas at our disposal!

As you continue your Quickbase journey, remember that learning is a never-ending process.

Keep expanding your skills, experimenting with new techniques, and tapping into the vast potential of Quickbase.

And if you're hungry for more, don't forget to check out Quick Base Junkie training, The Button Masterclass and the HTML Formula Crash Course cover the elements used in these formulas (and much more) taking your Quickbase game to the next level.

Happy toggling!