Remember Users Tab on Reload, but Not On Initial Page Load

Questions
1

We have a situation where we have a tab set that displays a profile for a record, and then many other tabs that give details.  

The users want to be able to hit the browser refresh and have it stay on the last tab.   That functions perfectly, however, when the user first loads the profile from another page, they want the “Last Tab” ignored and to always start at the Main Tab.

I was thinking of trying something around looking for where the users came from and then setting the Tab, or a parameter I could change, but I wasn’t sure if someone else had a potential solution to this need.

Thanks!


2

This is probably a case for the ‘document ready’ function.

This may help: https://community.skuid.com/t/set-tab-in-javascript

3

Joseph.  There is not going to be a straight forward way to do this. 

1. The remember tab feature is a cookie that gets set on every session.  We don’t have a mechanism to conditionally set it. 

2. You can create a link that goes to a particular tab  ( give the tab a unique ID in the advanced tab and then add “#IdName” to the end of the link)   but when you refresh that page,  it reads the #IdName item on the end of the URL and goes back to the designated tab.

Sorry.  

4

I believe that document ready functions only run on initial page load, but don’t run if a page include is reloaded. You may be able to set something up where your tabset is inside a page include, and have your users reload the page include instead of the browser window.

May I ask why the browser refresh is necessary?

5

I’ll look into the document ready functions.  The browser refresh is a user action and we cannot stop it, so we want to handle when it occurs; that way if the user does refresh the page, we take them back to the tab they were viewing.  

6

Ok… So with digging a little more I think I have a working solution but using the tabshow event and then using the window.history.replaceState() whenever the user selects a tab.  This needs to be an inline javascript to run and is on the main page with the tabset. 

We then deselect “remember users tab”.

== inline JavaScript ==

(function(skuid){    
  var $ = skuid.$;
   $(function(){
      $(‘body’).on(‘tabshow’,function(event){
           var tabShown = $(event.target);
           var tabId = tabShown.attr(‘id’);
           var id = window.location.search.split(‘id=’)[1];

           window.history.replaceState(null,
           “Offender Profile”, “/apex/skuid__ui?page=LOIS_Offender_Template_PTS&id=”
            + id + “#” +tabId )          
   
      });
   });
})(skuid);


7

Cool! 

8

It worked great until we hit a page with a sub-tabset.   So if you are planning to implement where subtabs are used, be sure to throw in an if-statement to ignore the sub-tab action.  

An additional feature of this design, is it could allow you to updateDate() to the models on the tab, so you can get any changes that took place if the user leaves the tab and then returns, to help ensure that the new data is always available.