I have a button on a tabbed form that edits the form and reloads the page. Is it possible to reload the page back to the same tab?

  • 0
  • 1
  • Question
  • Updated 1 year ago
  • In Progress
I have a button on a tabbed form that edits the form and reloads the page. When the page reloads, I'd like to be taken back to the same tab, rather than tab 1. Is that possible?
Photo of Justin Robinson

Justin Robinson

  • 70 Points
  • Hopeful

Posted 1 year ago

  • 0
  • 1
Photo of QuickBaseCoach App Dev./Training

QuickBaseCoach App Dev./Training, Champion

  • 51,256 Points 50k badge 2x thumb
Can we see the code for the button?
Photo of Matthew Neil

Matthew Neil

  • 31,438 Points 20k badge 2x thumb
The new tabs, and the function that returns to the previous tab is based on the native buttons and the browser caching.  They did it a little gimmicky so the standard reload /refresh button wont return you to the tab.

One of these days I'll dissect how they are doing on the form side... 
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 26,372 Points 20k badge 2x thumb
You have to use script in the form to save the state of the active tab and restore it when the form reopens. Typically the state like this is saved in localStorage or sessionStorage and is unique to the browser instance and is keyed off of the (a) table dbid, (b) form id, and  (c) user.

In a similar fashion QuickBase saves your open sections on a form in sessionStorage on a per browser instance, per user, per table  and per form basis as indicated below:



It may sound complicated but it isn't.
(Edited)
Photo of Troy Maharg

Troy Maharg

  • 216 Points 100 badge 2x thumb

I've had a request from an app manager today for this feature.  Since this feature has not been incorporated into Tabs, (no clue why QB wouldn't...) I pretty much refuse to use Tabs due to user complaints (it's good for viewing but not editing or new records, users love to use save and keeping working and hate having to click back on the tab they were on).  I decided to spend some time looking into it today and this what I have come up with.  I am still new to JavaScript and I know there are more elegant ways but this is what I have to get this issue kick started, I have only done minor testing but it’s a starting point and looks to work...so far...still working on it.

Create a field, I called mine "Tab Location", name doesn't matter (just need the fid).  You probably want to set a form rule to hide in not administrator (the field needs to be present on the form, visible or not).   

Not sure what your skills are with JavaScript (so going step by step) but you need to create another field (Name it whatever but needs to be formula-text, set html) for image on load.  If you don't know what Image On Load I highly suggest looking into it, I use it in almost all my apps/tables...lookup Dan Diebolt image onload, guy is genius!

So now go to app home page and create a new code page, (name it LoadTab.js), this name will go into your image on load text box mentioned above.

formula field should read [iol] & "LoadTab.js" & [/iol] or what ever name you name the code page.

Paste this code into the code page (first time posting code so hope this works)

the fid should be the fid of the field you created for Tab Location, mine was 10

the #tbl_"table ID" (mine is bm532wzjr), this is optional depending on user preference, when you click on the table it will reset to tab 1.

If you have more tabs just add to the if statment.

(function(){

var mytab = $("#_fid_10").val(); //get current tab slection    


loadTab();   

editTabSelection(myTab);    


   

$('#tbl_bm532wzjr').click(function() {

    

    //when table is clicked set default back to Tab 1, Omit if you want to load last saved tab

    // remove href from tabel selection to avoid save popup

    $("a").removeAttr("href");

    $("#_fid_10").val("Tab 1");

    

   //this will save the default selection to Tab 1 and bypass the save type to Save & Close

    $('#saveButton').html('Save & Close'); 

    $('#saveButton').trigger('click'); 

});


 })();


function loadTab(myTab) {


// ignore if Tab 1 QB default

if(mytab == "Tab 2") {

    

 //remove tab class from Tab 1 and change status to inactive

 $("#tab_t1_link").removeClass( "ui-state-default ui-corner-top ui-tabs-selected ui-state-active" );

 $("#tab_t1_link").addClass( "ui-state-default ui-corner-top" );

 

 //remove tab class from Tab 2 and change status to active

 $("#tab_t2_link").removeClass( "ui-state-default ui-corner-top" );

 $("#tab_t2_link").addClass( "ui-state-default ui-corner-top ui-tabs-selected ui-state-active" );

 

 //this is div for Tab 1 change status to hide

 $("#tab_t1").removeClass( "ui-tabs-panel ui-widget-content ui-corner-bottom" );

 $("#tab_t1").addClass( "ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide" );

 

 //this is div for Tab 2 change status to visible

 $("#tab_t2").removeClass( "ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide" );

 $("#tab_t2").addClass( "ui-tabs-panel ui-widget-content ui-corner-bottom" );

 

} else if (mytab == "Tab 3") {

    

//remove tab class from Tab 1 and change status to inactive

 $("#tab_t1_link").removeClass( "ui-state-default ui-corner-top ui-tabs-selected ui-state-active" );

 $("#tab_t1_link").addClass( "ui-state-default ui-corner-top" );

 

 //remove tab class from Tab 3 and change status to active

 $("#tab_t3_link").removeClass( "ui-state-default ui-corner-top" );

 $("#tab_t3_link").addClass( "ui-state-default ui-corner-top ui-tabs-selected ui-state-active" );

 

 //this is div for Tab 1 change status to hide

 $("#tab_t1").removeClass( "ui-tabs-panel ui-widget-content ui-corner-bottom" );

 $("#tab_t1").addClass( "ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide" );

 

 //this is div for Tab 3 change status to visible

 $("#tab_t3").removeClass( "ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide" );

 $("#tab_t3").addClass( "ui-tabs-panel ui-widget-content ui-corner-bottom" );  


}

    

}

function editTabSelection() {

    

$('li a').click(function(e) {

    if(selectedTab == "Tab 1") {

        $("#_fid_10").val("Tab 1");

    } else if(selectedTab == "Tab 2"){ 

        $("#_fid_10").val("Tab 2");

    } else if (selectedTab == "Tab 3"){

        $("#_fid_10").val("Tab 3");

    }    

});

}

(Edited)