Tabs in QuickBase

We have all been there, whether consulting or working with an internal client. There seems to be an issue, if they have to click more than once, they want nothing to do with it. I have consulted for three companies and made many of application for my current employer(among many departments). But they always return back to wanting ALL the data on one single page. The problem is when they add all that data, they begin to complain about the page getting too large. Now your reason for coming to this page maybe different, maybe you just like the way the tabs look, or maybe you mistyped, either way, understand one thing. You should have a good knowledge of javascript, and some of the code used is UGLY. This is because some things QuickBase does, have had to make us adapt. This won't be the last code revision, I am ALWAYS trying to clean it up and I will attach a GitHub as soon as possible.



Define the Global Variables:

Start off by creating two variables, this will allow calling to the page easier.

Name

Value

of

<img style='Display:None' src=' ' id='canTarget' onerror="javascript:$.getScript(gReqAppDBID+'?a=dbpage&pagename=

/of

');">


Creating the Pages:

Nav.css - create a new page called Nav.css

.wegBTN {
    background-color:transparent;
    cursor:pointer;
    font-family:Arial;
    text-decoration:none;
  color:#55a0ef;
  padding: 5px 5px 5px 5px;
}
.wegNav {
  text-align: left;
  list-style: none;
  margin: 0;
  padding: 0;
  line-height: 24px;
  position: relative;
}
.wegNav li {
  //margin: 0 10px;
  //padding: 0 10px;
  border: solid #AAA 2px;
  background: #ECECEC;
  display: inline-block;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  font-family: Arial;
  //padding: 2px 10px 2px 10px;
  position: relative;
  z-index: 0;
}

.wegNav li:hover,
.wegNav li.attention:hover,
.wegNav li.required:hover{
  //background: #2980b9;
  background-image: -webkit-linear-gradient(top,#f0feff 3%,#eefdfa 30%,#cdf8fa 90%,#c0f5fa 100%);
  background-image: -moz-linear-gradient(top,#f0feff 3%,#eefdfa 30%,#cdf8fa 90%,#c0f5fa 100%);
  background-image: -ms-linear-gradient(top,#f0feff 3%,#eefdfa 30%,#cdf8fa 90%,#c0f5fa 100%);
  background-image: -o-linear-gradient(top,#f0feff 3%,#eefdfa 30%,#cdf8fa 90%,#c0f5fa 100%);
  text-decoration: none;
}
.wegNav li.attention{

  background-image: -webkit-linear-gradient(top,#FFF 3%,#fdfaee 30%,#faf2cd 90%,#faddc0 100%)
  background-image: -moz-linear-gradient(top,#FFF 3%,#fdfaee 30%,#faf2cd 90%,#faddc0 100%)
  background-image: -ms-linear-gradient(top,#FFF 3%,#fdfaee 30%,#faf2cd 90%,#faddc0 100%)
  background-image: -o-linear-gradient(top,#FFF 3%,#fdfaee 30%,#faf2cd 90%,#faddc0 100%)
}
.wegNav li.required{

  background-image: -webkit-linear-gradient(top,#f7ebeb 3%,#fdeeee 30%,#facdcd 90%,#fac0c0 100%);
  background-image: -moz-linear-gradient(top,#f7ebeb 3%,#fdeeee 30%,#facdcd 90%,#fac0c0 100%);
  background-image: -ms-linear-gradient(top,#f7ebeb 3%,#fdeeee 30%,#facdcd 90%,#fac0c0 100%);
  background-image: -o-linear-gradient(top,#f7ebeb 3%,#fdeeee 30%,#facdcd 90%,#fac0c0 100%);
}
.wegNav li.selected {
  color:#457ed5;
  background: #FFF;
  //color: #000;
  font-weight:bold; 
  z-index: 2;
  border-bottom-color: #FFF;
}

.wegNav:after {
  position: absolute;
  content: "";
  width: 100%;
  bottom: 0;
  left: 0;
  border-bottom: 2px solid #AAA;
  z-index: 1;
}
.wegNav:before {
  z-index: 1;
}
.wegNav li:before,
.wegNav li:after {
  position: absolute;
  bottom: -1px;
  width: 6px;
  height: 6px;
  content: " ";
}
.wegNav li:before {
  left: -8px;
}
.wegNav li:after {
  right: -8px;
}
.wegNav li:after, .wegNav li:before {
  border: 1px solid #AAA;
}
.wegNav li {
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}
.wegNav li:before {
  border-bottom-right-radius: 6px;
  border-width: 0 1px 1px 0;
}
.wegNav li:after {
  border-bottom-left-radius: 6px;
  border-width: 0 0 1px 1px;
}
.wegNav li:before {
  box-shadow: 1px 0.5px 1px 0 #AAA;
}
.wegNav li:after {
  box-shadow: -1px 0.5px 1px 0 #AAA;
}
.wegNav li.selected:before {
  box-shadow: 3px 2px 0 #FFF;
}
.wegNav li.selected:after {
  box-shadow: -3px 2px 0 #FFF;
}
.wegNav li {
  //background: linear-gradient(to bottom, #ECECEC 50%, #D1D1D1 100%);
  background-image: linear-gradient(to bottom, #EEF5fd , #C0DDFA );
  background-image: -webkit-linear-gradient(top,#FFF 3%,#EEF5fd 30%,#CDE3FA 90%,#C0DDFA 100%);
  background-image: -moz-linear-gradient(top,#FFF 3%,#EEF5fd 30%,#CDE3FA 90%,#C0DDFA 100%);
  background-image: -ms-linear-gradient(top,#FFF 3%,#EEF5fd 30%,#CDE3FA 90%,#C0DDFA 100%);
  background-image: -o-linear-gradient(top,#FFF 3%,#EEF5fd 30%,#CDE3FA 90%,#C0DDFA 100%);
  //box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), inset 0 1px 0 #FFF;
  text-shadow: 0 1px #FFF;
  margin: 0 -5px;
  padding: 0 20px;
}

sectionNav.js

(function(){
    $(document).ready(function () {
        //weg nav holders
        var navlist = "";
        var count=0;
        var selectedGlobal="";
        var done=false;

        //call wegNav.css
        var link = document.createElement("link");
        link.href = "https://wegelectric.quickbase.com/db/bme8y924p?a=dbpage&pagename=Nav.css";
        link.type = "text/css";
        link.rel = "stylesheet";
        document.getElementsByTagName("head")[0].appendChild(link);

        //Grab Nav Div move into position
        var navDiv = $('#wegNavDiv').detach();
        $('.wegSections').closest('.sectionDiv').prev().append(navDiv);

        //wait for qb to say page is done
        setInterval(function(){
            if(gPageLoadComplete==true && done==false){

                //build initial html block
                navlist += " \n<div id='wegNavWrapper' name='wegNavWrapper' style='position:relative; top:-100px; left:0px;'></div> \n<nav role='navigation'  class='main-navigation'> \n<ul id='wegNav' class='wegNav'>\n";    
        
        
                //building table
                $('.wegSections').each(function() {
                    var base = $(this).closest('.sectionDiv');
                    var html = "<li id='" + $(this).attr('id') + "TAB' class='wti ";
            
                    //Hide title
                    base.children().closest('.Title').hide(); 
    
                    if(base.attr('style') != "display: none;"){
                        navlist += html + "'> \n";
                    }else{
                        navlist += html + "hideNav'> \n";
                    }

            
                    navlist += "<a class='wegBTN'  onclick=\"javascript:"
                        + "$('.wegSections').closest('.sectionDiv').hide(); $('#" + $(this).attr('id') + "').closest('.sectionDiv').show();"
                        + "$('#wegNav').children().removeClass('selected');"
                        + "$(this).parent().addClass('selected');\">"
                        + "<span id='" + $(this).attr('id') + "NavTar'>" + $(this).attr('name') + "</span> \n";
                    navlist += " \n</a> \n</li> \n";
                    count++;
                });
                navlist += "  \n</ul>\n</nav>";
                $('#wegNavDiv').html(navlist);
                $('#wegNavDiv').show();

                //preps page
                $('.wegSections').closest('.formRow').hide();
                $('.wegSections').closest('.sectionDiv').hide();
                $('.wti:not(.hideNav):first').addClass('selected');
                //$('#' + $('.selected').first().attr('id').replace('TAB','')).closest('.sectionDiv').show();
                //$('.wti').each(function(){$(this).hasClass('hideNav')?$(this).hide() : $(this).show();});
                done=true;

            }else{
                if(done==true){
                    $('.wegSections').each(function(){
                            $(this).data('show')==1 ?
                                $('#' + $(this).attr('id') + "TAB").attr('Class').includes('hideNav') ? 
                                    $('#' + $(this).attr('id') + "TAB").removeClass('hideNav') : '' :                       
                                    $('#' + $(this).attr('id') + "TAB").addClass('hideNav')
                    });
                    
                    $('.wegSections').each(function(){
                        $('#' + $(this).attr('id') + "TAB").attr('Class').includes('hideNav') && $('#' + $(this).attr('id') + "TAB").attr('class').includes('selected') ? 
                            $('.wti').removeClass('selected') + 
                            $('.wti:not(.hideNav):first').addClass('selected') :''
                    });
                
                    $('.wti').each(function(){$(this).hasClass('hideNav') ? $(this).hide() : $(this).show();});
                    $('.wegSections').closest('.sectionDiv').hide();
                    $('#' + $('.selected').first().attr('id').replace('TAB','')).closest('.sectionDiv').show();
                }               
            }
        },0);
        //$.getScript(gReqAppDBID + '?a=dbpage&pagename=requirements.js');
        //if(gViewIsModified){console.log('gViewIsModified true')};

    });
})();

Creating the Form Setup

Go into the settings of your form, go to the Properties section, and de-check the first option which reads Display horizontal rules between sections (I will add a section to the code to clean up this oversight).

de-check hr.PNG

Create a field for your javascript and base navigation, I called it js, make sure to select formula text and select the Allow some HTML tags to be inserted in the field.

Add your code, right now the code is written for the company I work for, I am going to clean it up, and repost it if you would rather wait.

[of] & "sectionNav.js" & [/of] &

"<div id='wegNavDiv' name='wegNavDiv' style='Display:None; position:relative; top:0px; left:0px;'></div>"

Defining your sections

I want to make a little statement here, the goal is usability, this is the part where you need to think about what you are putting behind a tab. QuickBase doesn't support the tabs, nor should they. While we have another module for detecting required fields in the section and notifying the user via the tabs, that isn't tested enough to share. So I recommend, if it is a key field or a required field, it should be in a section that isn't tabulated. So now each section that you want a tab to appear, create a new Formula Text field, I like to give it a name, so the agent section is called agent section. Make sure to check the box to allow for HTML. Change the id and the name accordingly, the id should have no spaces, while the name can be spaced.

var text id = "agents";
var text name = "Agents";
var bool show = true;

"<div id=" & $id & " class=wegSections name='" & $name & "' data-show=" & $show & "></div>"

That's it, if you did it correctly, a section should be tabulated, now you might ask what is the bool show, this javascript was done with two things in mind, it has to follow the form rules, and it has to extend the form rules. We add a lot of additional rules, so the bool show allows you to programatically show that tab based off of changing variables.