How to create tabs in a form for better navigation

  • 1
  • 3
  • Question
  • Updated 1 year ago
  • Answered
I need to create several tabs in one table form that would function in the following way:
Tab 1 - will cover one area of table information (eg basic information)
Tab 2 - will cover other
etc

So idea is to group table sections per groups in tabs.

Is it possible to create this types, and how?
Photo of Nenad Ilic

Nenad Ilic

  • 120 Points 100 badge 2x thumb
  • anxious

Posted 1 year ago

  • 1
  • 3
Photo of QuickBasePros_IDS

QuickBasePros_IDS, Champion

  • 2,266 Points 2k badge 2x thumb
Joe Acunzo at Soft Tech Experts has a Tab-solution.
Photo of Gaurav Sharma

Gaurav Sharma

  • 5,756 Points 5k badge 2x thumb
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 
Photo of Gaurav Sharma

Gaurav Sharma

  • 5,756 Points 5k badge 2x thumb
What's your timezone?
Photo of Nenad Ilic

Nenad Ilic

  • 734 Points 500 badge 2x thumb
CEST - Central Europe Standard Time
Photo of Gaurav Sharma

Gaurav Sharma

  • 5,756 Points 5k badge 2x thumb
Ok Let's meet tomorrow and send me a WebEx invite on my mail id at gaurav.sharma@elevateservices.com

Thanks,
Gaurav
Photo of QuickBaseCoach App Dev./Training

QuickBaseCoach App Dev./Training, Champion

  • 51,096 Points 50k badge 2x thumb
Gaurav,
I suggest that you take your secheduling conversations off the forum and onto email as it clutters up for forum with extraneous postings.
Photo of Gaurav Sharma

Gaurav Sharma

  • 5,756 Points 5k badge 2x thumb
>Mark

Yes, you are right. I'll take care next time. :)

Thanks,
Gaurav
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>"
Photo of @lin

@lin

  • 820 Points 500 badge 2x thumb
Any way you can share the two app variables with us?
@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;'
Photo of QuickBaseCoach App Dev./Training

QuickBaseCoach App Dev./Training, Champion

  • 51,086 Points 50k badge 2x thumb
.. or wait for the July 23rd release where tabbed forms become native  https://www.quickbase.com/quickbase-blog/july-2017-release-notes
Photo of Alex Wilkinson

Alex Wilkinson

  • 1,006 Points 1k badge 2x thumb
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.
Photo of @lin

@lin

  • 820 Points 500 badge 2x thumb
Thanks Alex!
@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
Photo of @lin

@lin

  • 800 Points 500 badge 2x thumb
I'll go ahead and try it.
Thanks Susco!
Photo of Joey Zint

Joey Zint

  • 1,508 Points 1k badge 2x thumb
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.