How to create tabs in a form for better navigation

  • 1
  • 3
  • Question
  • Updated 2 years 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 2 years ago

  • 1
  • 3
Photo of QuickBasePros (Laura Thacker)

QuickBasePros (Laura Thacker), Champion

  • 5,416 Points 5k badge 2x thumb
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 
Yes, its great and super simple to implement.  I use it all the time now :)
Photo of Nenad Ilic

Nenad Ilic

  • 734 Points 500 badge 2x thumb
it seems good, I'll test it and get back to you if I have any questions.

Thank you very much for this.

Nenad
Photo of QuickBasePros (Laura Thacker)

QuickBasePros (Laura Thacker), Champion

  • 5,224 Points 5k badge 2x thumb
@Guarav Sharma, thanks for sharing this - Nathan wrote a good post making it super simple to follow.
Photo of Nenad Ilic

Nenad Ilic

  • 734 Points 500 badge 2x thumb
@Guarav Sharma, @Michael Graham, 
I believe I would need your help (I'm not a programmer so maybe i've skipped something.... these are the steps that I've taken:
1. Created variables as defined with "of" and "/of" with values as in the formula.

2. I have also created a new "code page" and pasted the formula from the link above, changing only site code, to our company site code

3. de-checked the first option which reads Display horizontal rules between sections

4. Created a new field, that I've names "js" as presented above (for testing purpose) checked allow some HTML tags, and pasted the code:
[of] & "sectionNav.js" & [/of] &
 
"<div id='wegNavDiv' name='wegNavDiv' style='Display:None; position:relative; top:0px; left:0px;'></div>"

5. After that I've created a new field (Formula Text), checked the box to allow HTML and pasted: 
var text id = "agents";
var text name = "Agents";
var bool show = true;
 
"<div id=" & $id & " class=wegSections name='" & $name & "' data-show=" & $show & "></div>"


when I open the form it doesn't work....it doesn't work....

could you provide some assistance, if we should change anything (apart from the company site from the code), or if I messed up
Photo of Nenad Ilic

Nenad Ilic

  • 734 Points 500 badge 2x thumb
is sectionNav.js a completely new page, or just should be pasted into Nav.css
No, you have to create a separate page for sectionNav.js
Once you created a new formula text field for a particular section (suppose that you named it 'Action'. Now, you have to place this formula field after the section name.

If you have followed the articles well then, you would be able to see the tabs.

Please let me know if you need any assistance. I would be happy to schedule a call with you.

Thanks,

Gaurav
Photo of Nenad Ilic

Nenad Ilic

  • 734 Points 500 badge 2x thumb
Gaurav, 

I will try this tomorrow, and if by any chance I fail, I will organize a short call with you.

Thank you very much for everything it really means a lot.

Kind regards, 

Nenad
Sure! I would love to assist you.

All the best :)

Gaurav
Photo of Nenad Ilic

Nenad Ilic

  • 734 Points 500 badge 2x thumb
Hi Gaurav,
I believe it would be for the best if we scheduled a call/meeting, either via skype/webex (no success again).

Which time suits you best (I'll adapt to your time zone, whatever it is). 

Kind regards, 

Nenad
HI Nenad,

No problem. I am in IST time zone.

What about tomorrow 7:00 PM IST? is that work for you?

Thanks,

Gaurav
Photo of Nenad Ilic

Nenad Ilic

  • 734 Points 500 badge 2x thumb
Hi Gaurav,

Perfect, you couldn't have chosen better timeslot.

My skype nickname is budassj, you may add me there, then we'll see if via skype is easier, or if we're to create webex.

Kind regards, 

Nenad
Photo of Nenad Ilic

Nenad Ilic

  • 734 Points 500 badge 2x thumb
CEST - Central Europe Standard Time
Ok Let's meet tomorrow and send me a WebEx invite on my mail id at gaurav.sharma@elevateservices.com

Thanks,
Gaurav
Gaurav,
I suggest that you take your secheduling conversations off the forum and onto email as it clutters up for forum with extraneous postings.
>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

  • 840 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;'
.. 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,166 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

  • 840 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

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

Joey Zint

  • 1,870 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.