Open tab section within a form via a link

  • 1
  • 1
  • Question
  • Updated 5 months ago
  • Answered
Hi,
Is there a way for me to link to a particular form but have that form open up with a particular tab ? At the moment, the form always opens on the first tab. But i'd like it to automatically navigate to the particular tab based on external factors. This will allow the user to still be able to go to any section they want after that but their focus is first focussed at the tab that needs attention.

Thanks!
Photo of Systems BVI

Systems BVI

  • 530 Points 500 badge 2x thumb

Posted 10 months ago

  • 1
  • 1
Photo of Systems BVI

Systems BVI

  • 530 Points 500 badge 2x thumb
Anyone?
Photo of Evan Martinez

Evan Martinez, Community Manager

  • 8,774 Points 5k badge 2x thumb
Currently the tabbed forms do not have anchors built into them in order to open a form on a specific tab. It is something we do have as feedback for enhancing our tabs in forms but I always encourage our Users with questions like this to make sure that you input these needs in our User Voice to give us a better idea how much desire there is to see such a feature go live in the future. UserVoice is our Feedback Platform- which can most easily be accessed from the My Apps page in Quick Base by clicking on the orange Feedback tab that appears on the left hand side of the page or at http://quickbase.uservoice.com .  This forum is used by our development team to explore customer suggestions for enhancements / changes to the platform.
(Edited)
Photo of Systems BVI

Systems BVI

  • 530 Points 500 badge 2x thumb
Anyone have any innovative ideas on this ? May be via IOL ? 
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 26,372 Points 20k badge 2x thumb
Essential IOL code: 

$("#tab_t2_link a").click();

where #tab_t2_link is the id of the <li> that surronds the <a> of the section. You can inspect the element to locate the relevant id to use and test the above code from the console.
Photo of Systems BVI

Systems BVI

  • 530 Points 500 badge 2x thumb
Thanks! But is there anyway for me to have a url that is present on a different form to navigate and take me to a new form with the desired tab opened ?
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 26,372 Points 20k badge 2x thumb
Set up IOL with code similar to this:

(function(){
  var querystring=document.location.search;
  if(/a=er/i.test(querystring)) {
    var urlParams = new URLSearchParams(window.location.search);
    if (urlParams.has("tab")) {
      $(`#${urlParams.get("tab")} a`).click();
    }
  }
})();:

Then form a URL with a query parameter named "tab" that identified the <li> containing the <a> of the tab you want to open:

https://SUBDOMAIN.quickbase.com/db/DBID?a=er&rid=600&dfid=15&tab=tab_t2_link

Notes:

(1) substitute your SUBDOMAIN and DBID

(2) substitute your tab parameter

(3) I only implemented the code for edit records pages.

(4) Test manually in Chrome. I used the methods URLSearchParams() and urlParams() which may or may not be supported in your browser. Easy to provide alternate code if needed.

(5) If there is no &tab= parameter the code will run on the appropriate pages but it will  not change anything. 

(6) This is a general technique of passing an custom parameter on the URL which can be used for many different purposes.
(Edited)
Photo of Systems BVI

Systems BVI

  • 530 Points 500 badge 2x thumb
Thank you so much!!! This solution is highly appreciated!! IOL to the rescue!! 
If you could be kind enough and also help out on the other thread with google map integration into a form, i'd be highly obliged!! 
 (https://community.quickbase.com/quickbase/topics/request-for-iol-to-integrate-google-map-on-form-to-retrieve-latitude-longitude
Photo of Giuseppe macri

Giuseppe macri

  • 514 Points 500 badge 2x thumb
Can you guys explain this for us noobs.

I currently implemented IOL on the form, made a code page called "Tab.JS" with the code below:
(function(){
  var querystring=document.location.search;
  if(/a=er/i.test(querystring)) {
    var urlParams = new URLSearchParams(window.location.search);
    if (urlParams.has("tab")) {
      $(`#${urlParams.get("tab")} a`).click();
    }
  }
})();:

and i made a URL button using the sample url above. The tab link for the tab i want to get to is tab_t30_link.

I havent used the $("#tab_t2_link a").click(); snippet. Is this where my issue is?
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 26,262 Points 20k badge 2x thumb
What the code does is on an edit record page it looks for a query parameter named tag and if it is is found generates a click event on that tab.

Since the code uses URLSearchParams you have to use a supported browser:

https://caniuse.com/#feat=urlsearchparams