I have a VF page in Opportunities page layout which has external links. When clicked on this link, I want a custom visualforce tab to appear. And once, the "close" button on this visualforce page is clicked, I want this custom tab to become invisible or disappear. Please suggest how this can be achieved.

Also, is there a way to rename this custom visualforce tab's name according to the link clicked every time it is clicked?

  • 1
    Where does this tab appear? What have you tried so far. Can you be a bit more detail on what is happening vs what you want to happen?
    – Eric
    Feb 27 '15 at 7:01

There is no URL for a Visualforce tab. Visualforce pages are always navigated to via their PageReference or, if necessary, directly to URL. This is obtained either in Apex Code or in VF markup expression, and ways to navigate from page to page are basic Visualforce tasks well documented in the VF pages developer guide.

If a VF page is intended to occupy the entire Tab UI, the tab that appears is whatever is specified in the tabStyle attribute. This will be a text value that identifies the sobject or custom tab. This is also well documented in the Visualforce component reference for the apex:page component.

SObject Tab Style

<apex:page ...other params... tabStyle="Account"/>
<apex:page ...other params... tabStyle="MyCustomObject__c"/>

Custom Tab Style

<apex:page ...other params... tabStyle="MyCustomTab__tab"/>

You would hope to be able to dynamically bind to the above tabStyle attribute, but in testing this out, it appears this is not possible. Any variation of binding that I attempted produces a VF page compilation error that it is not a valid tab name.

So it appears doing the exact thing you want: dynamically changing the tab at runtime is not possible purely within markup.

Instead you'd have to deal with it with some Javascript. Essentially, pass in the tab text through the URL.

  1. Create your page and add a custom Visualforce tab for your page.
  2. Add the tabstyle to your page for the tab. I called my tab "Nothing" so it looks like this.


  3. Add the JS code to modify your page based on a passed in param.



The xx would be replaced by your own instance na/eu/ap/cs/etc.

Page Markup

<apex:page tabStyle="Nothing__tab" >
    <script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
    //be careful using this strategy value of tabRef will show as clear text in page inspector. 
    var myTabRef = '{!$CurrentPage.parameters.tabRef}' === '' 
                   ? 'Default Tab' 
                   : '{!$CurrentPage.parameters.tabRef}';

    var j$ = jQuery.noConflict(); 

    //this is based on the name of the tab, but will break for multi-lingual orgs
This is  my page!

I like jQuery for these little bitty UI tweaks.

The structure of the tab is this:

<li id="01rG0000000tdT5_Tab" ...more stuff>
  <a ...no id... title="Tab Label - Tab" class="brandPrimaryFgr">Tab label That I want to change</a>

This leaves you with a connundrum.

  • Use the Salesforce-id-based li id attribute that will break when I deploy from org to org.
  • Use go direct to the anchor tag, without any perfect unique identifying feature, especially given the title attribute gets translated when we have a multi lingual org.

I used the second option. By using the class and the "starts with" select this makes it a little better, but still subject to breakage.

If you chose to use the a Id, you'd do something like this in the line where you set the tab:

j$('#01rG0000000tdT5_Tab > a').html(myTabRef);

But...that identifier 01rG0000000tdT5_Tab would change each time this tab was deployed to a different org. Thus the problem. Maybe someone who is a bit more of a guru with selectors in jQuery can find a better compromise than these two...?

So this hack is 100% caveat emptor, may not work in the future, and neither is a guarantee of consistent behavior. But...it works in this instance.

  • Welcome to hacker's realm! Cool thing, Peter ;-) only idea on selectors would be a consequetly translated suffix and use of 'contains' selectors. But still fragile. Is the tab id somehow queryable via metadata API?
    – Uwe Heim
    Feb 27 '15 at 23:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.