How to create tabs in a form for better navigation

Joe Acunzo at Soft Tech Experts has a Tab-solution.

Hi,

Are you looking for the same solution like this?



If yes, then, Nathan Thompson had posted this solution a few months ago on our QuickBase Network on LinkedIn. I have also tested this solution.

Here you go with the link:
https://azastudio.net/consulting-1/2016/12/26/creating-tabs-in-quickbase

This code is written by the Nathan Thompson.

Please let me know you have any questions or need any help in this.

Thanks,

Gaurav Sharma 

This is very easy to do with

1) 2 variables at the app level for style
2) a Formula-Text field with HTML enabled used at the top of the form.

"<span style="& [SpanEmpty] &">" & 
"<a>OPP: </a>"
&"</span>"
&"<span style="& [BtnDivStyle] &">" & 
"<a href='" & 
URLRoot() & "db/" & [_DBID_OPPORTUNITIES]  
& "?a=dr" 
& "&rid=" & [Opp ID]
& "&dfid=" & "11"
& "&z=" & Rurl() //Take user back
& "'style="& [BtnTextStyle] & ">Main</a>"
&"</span>"
&"<span style="& [BtnDivStyle] &">" & 
"<a href='" & 
URLRoot() & "db/" & [_DBID_OPPORTUNITIES]  
& "?a=dr" 
& "&rid=" & [Opp ID]
& "&dfid=" & "22"
& "&z=" & Rurl() //Take user back
& "'style="& [BtnTextStyle] & ">Scope</a>"
&"</span>"
&"<span style="& [BtnDivStyle] &">" & 
"<a href='" & 
URLRoot() & "db/" & [_DBID_OPPORTUNITIES]  
& "?a=dr" 
& "&rid=" & [Opp ID]
& "&dfid=" & "13"
& "&z=" & Rurl() //Take user back
& "'style="& [BtnTextStyle] & ">Estimate</a>"
&"</span>"
&"<span style="& [BtnDivStyle] &">" & 
"<a href='" & 
URLRoot() & "db/" & [_DBID_OPPORTUNITIES]  
& "?a=dr" 
& "&rid=" & [Opp ID]
& "&dfid=" & "24"
& "&z=" & Rurl() //Take user back
& "'style="& [BtnTextStyle] & ">Proposal</a>"
&"</span>"
&"<span style="& [BtnDivStyle] &">" & 
"<a href='" & 
URLRoot() & "db/" & [_DBID_OPPORTUNITIES]  
& "?a=er" 
& "&rid=" & [Opp ID]
& "&dfid=" & "12"
& "&z=" & Rurl() //Take user back
& "'style="& [BtnTextStyle] & ">Edit Proposal</a>"
&"</span>

Nice idea! Essentially, this creates a row of buttons that can be styled to look like tabs. If you're OK with ordinary buttons, the global variables for [BtnDivStyle] and [BtnTextStyle] become unnecessary.

Also, the code-length can be reduced substantially by adding three global variables for Part1, Part2 and Part3 of the text for each button (or tab). Thus, without the custom styling, you would have something like this:

[Part1] is this global variable: 
"<a href='" & 
URLRoot() & "db/" & [_DBID_OPPORTUNITIES]  
& "?a=dr" 
& "&rid=" & [Opp ID]
& "&dfid="

[Part2] is this global variable:
"&z=" & Rurl() & "' "
& "style='Vibrant;' >"

[Part3] is this global variable:
</a>"

Then the series of buttons becomes:

[Part1] & "11" & [Part2] & "Main" & [Part3] &
[Part1] & "22" & [Part2] & "Scope" & [Part3] & ... etc.

@lin:

BtnDivStyle

' padding:2px;
margin:2px;
border-style:solid;
border-width:3px 3px 3px 3px;
width:auto;
height:auto;
background:#2dab40;
color:#2dab40;
text-align:center;
text-decoration:none;

font-weight:700;'

BtnTextStyle

'text-decoration: none;color: white; font-weight: bold;'

And here's a space efficient way without putting too much in global variables (leveraging formula variables)

var text PartA = "<span style="& [BtnDivStyle] &">" & 
"<a href='" & 
URLRoot() & "db/" & [_DBID_OPPORTUNITIES]  
& "?a=dr" 
& "&rid=" & [Opp ID]
& "&dfid=";

var text PartB =  "&z=" & Rurl() & "'style="& [BtnTextStyle] & ">";

var text PartC = "</a></span>";


"<span style="& [SpanEmpty] &">" & 
"<a>OPP: </a>"
&"</span>"

& $PartA & "11" & $PartB & "Main" & $PartC 
& $PartA & "22" & $PartB & "Scope" & $PartC 
& $PartA & "13" & $PartB & "Estimate" & $PartC 
& $PartA & "24" & $PartB & "Proposal" & $PartC 
& $PartA & "12" & $PartB & "Edit Proposal" & $PartC

I like this layout and the fact that there is a CSS sheet that can be changed to add color or different fonts. Have you been able to come up with a way to make the code dynamic so new sections added are automatically added as a tab. The next question, as sections build out and more tabs are added, will a new row of tabs be added automatically.

This was very easy to setup other than having to add a field to the bottom of each section but was not a big deal

Forgive me, I am not a big code writer, but I can make changes and such in some of it.