I have a VF page that will be displayed within the Service Console (specifically, it is a custom publisher in the case feed). Several of the fields on this page are lookup fields. I'm currently displaying the fields with <apex:outputField>. The issue I have is that the lookup fields display as a link to the lookup object, which if clicked, navigate the current page (in this case the publisher IFrame) to that object, instead of opening a new subtab.

I've considered three options:

  1. Change the outputField value from {!CustomObj__c} to {!CustomObj__r.name}. This will display the same info without the link. However, I think the hover-over popups provided by the links are useful for the end users.

  2. Change the outputField to a custom javascript link using the integration toolkit api, e.g., openSubtab(). This has the same issue as option 1 - removing the outputField will remove the handy hover-over popups.

  3. Add some Javascript to the page to find the links and change them to openSubtab() calls. This would probably give the results I want, but adds complexity I'd prefer to avoid.

Is there a way to make <apex:outputField> provide console-aware links instead of standard links automatically? Or another option I'm overlooking?

2 Answers 2


I don't think there is a way to modify the behavior of apex:outputField. It is designed to take on the field type it is bound to and render accordingly, and there is no target property since the component can represent many types of fields.

I would consider option 1 as the closest to what I would suggest. Instead of outputField, try using an outputLink. You can build the link yourself, taking advantage of the javascript actions (onmouseover, onmouseout, onfocus, etc.) to create you own hover-over popups (if that feature is essential). Alternatively, you can just use the Title attribute for explanatory popup text. Using outputLink will allow you to construct your own link and use the Target attribute of "_parent" to pop the page in the parent window instead of the iFrame.

It seems like to get really precise control here that you're going to need to write your own JS to handle events and manipulate the DOM.


You can add a click handler to the document. You'll need to play with the precise filters you will want to use on your JavaScript event handler, but here's a basic script:

addEventListener('click', function(e) {
    if(e.target.tagName=='A' && e.target.onblur) {

This code disables all links on the page that have a "onblur" event-- only hover-over links will have that event attached to them. Note that this isn't cross-browser compatible, just a demonstration.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .