<apex: outputLink> Component in Visualforce Page

The <apex:outputLink> component is one of the most important components of Visualforce used for specifying the link to a URL. The <apex:outputLink> component is rendered as an anchor tag with a href attribute.

We use the nested <apex: param> components to add the request parameters to an <apex: outputLink> component.

The HTML pass-through attributes are also supported by this component using the "html-" prefix.

This component must always be the child of the <apex: form> component.

The <apex: outputLink> component has the following attributes:

1. accesskey

The accesskey attribute is of type string that is used for specifying the shortcut key that puts the output link in focus.

Syntax:

2. charset

The charset attribute is of type String that is used to specify the character set that will be used to encode the specified URL. By default, its value is set to "ISO-8859".

Syntax:

3. coords

The coords attribute is of type String that is used for specifying the position and shape of the hot spot on the screen used for the <apex: outputLink> component.

Syntax:

4. dir

The dir attribute is of type String that is used for specifying the direction in which the generated HTML component should be read. LTR and RTL are the two possible values for this attribute.

Syntax:

5. disabled

The disabled attribute is of type Boolean that is used for specifying whether this component should be displayed in the disabled state. By default, its value is set to false.

Syntax:

6. hreflang

The hreflang attribute is of type string that is used to specify the base language that will be used for the resource referenced by this outputLink. The values can be "en" or "en-US" etc.

Syntax:

7. id

The id attribute is of type string that is used to allow this component to be referenced by other components on the page.

Syntax:

8. lang

The lang is of type string that is used to specify the base language that will be used for the generated HTML output. The values can be "en" or "en-US" etc.

Syntax:

9. onblur

The onblur attribute is of type string that is used to invoke the JavaScript method when the onblur event occurs or simply focus moves off of the output link.

Syntax:

10. onclick

The onclick attribute is of type string that is used to invoke the JavaScript method when the onclick event occurs or simply when the user clicks the output link.

Syntax:

11. ondblclick

The ondblclick attribute is of type string that is used to invoke the JavaScript method when the ondblclick event occurs or simply when the output link is clicked twice.

Syntax:

12. onfocus

The onfocus attribute is of type string that is used to invoke the JavaScript method when the onfocus event occurs or simply focuses on the output link.

Syntax:

13. onkeydown

The onkeydown attribute is of type string that is used to invoke the JavaScript method when the onkeydown event occurs or simply when the user presses a keyboard key.

Syntax:

14. onkeypress

The onkeypress attribute is of type string that is used to invoke the JavaScript method when the onkeypress event occurs or simply when the user holds down or presses a keyboard key.

Syntax:

15. onkeyup

The onkeyup attribute is of type string that is used to invoke the JavaScript method when the onkeyup event occurs or simply when the user releases a keyboard key.

Syntax:

16. onmousedown

The onmousedown attribute is of type string that is used to invoke the JavaScript method when the onmousedown event occurs or simply when the user presses the mouse button.

Syntax:

17. onmousemove

The onmousemove attribute is of type string that is used to invoke the JavaScript method when the onmousemove event occurs or simply when the user moves the mouse pointer.

Syntax:

18. onmouseout

The onmouseout attribute is of type string that is used to invoke the JavaScript method when the onmouseout event occurs or simply when the user moves the mouse pointer away from the output link.

Syntax:

19. onmouseover

The onmouseover attribute is of type string that is used to invoke the JavaScript method when the onmouseover event occurs or simply when the user moves the pointer over the output link.

Syntax:

20. onmouseup

The onmouseup attribute is of type string that is used to invoke the JavaScript method when the onmouseup event occurs or simply when the user releases the mouse button.

Syntax:

21. rel

The rel attribute is of type string that is used for specifying the relationship from the current document to the URL specified by this output link. The value of this attribute is a space-separated list of link types.

Syntax:

22. rev

The rev attribute is of type string that is used for specifying the reverse link from the current document to the URL specified by this output link. The value of this attribute is a space-separated list of link types.

Syntax:

23. rendered

The rendered attribute is of type Boolean that is used for specifying whether this component is rendered on the page or not. By default, its value is set to true.

Syntax:

24. style

The style attribute is of type string that is used to specify the CSS that will be applied to it. Inline CSS is used as a value for this attribute.

Syntax:

25. styleClass

The styleClass attribute is of type string that is used to specify the external CSS stylesheet that will be applied to it to display the output link.

Syntax:

26. tabindex

The tabindex attribute is of type string that is used for specifying the order in which this button is selected compared to other page components when the user presses the Tab key repeatedly.

Syntax:

27. title

The title attribute is of type string that is used to specify the text that will be displayed as a tooltip when the mouse hovers this component

Syntax:

28. target

The target attribute is of type string that is used to specify the name of the frame where the resource retrieved by this output link should be displayed.

Syntax:

29. type

The type attribute is of type string that is used to specify the MIME content type of the resource designated by this outputLink.

Syntax:

30. value

The value attribute is of type string that is used to specify the text that will be displayed on the outputLink as its label.

Syntax:

Let's take an example to understand how we can use the apex:outputLink component inside the VF page:

ApexOutputLinkExample.vfp

<!-- create apex page with custom controller-->
<apex:page controller="ApexOutputLinkController">
    <!-- use apex form to show the accounts and contacts table-->
    <apex:form >
        <apex:pageBlock title="Account/Contact Information">
            <!-- output link that is responsible for showing accounts in the table-->
            <apex:outputLink value="#" onclick="findAccounts();">Show Accounts</apex:outputLink>
            
            <!-- output link that is responsible for showing contacts in the table-->
            ��<apex:outputLink value="#" onclick="findContacts();">Show Contacts</apex:outputLink>
            
            
            <apex:actionFunction action="{!getAccounts}" name="findAccounts"/>
            <apex:actionFunction action="{!getContacts}" name="findContacts"/>
            
            <apex:pageBlockSection  rendered="{!IF(accounts.size>0, true, false)}">
                <!-- create a table for showing accounts information -->   
                <apex:pageBlockTable value="{!accounts}" var="acc">
                    <apex:column value="{!acc.Name}"/>
                    <apex:column value="{!acc.AccountNumber}"/>
                    <apex:column value="{!acc.Phone}"/>
                    <apex:column value="{!acc.Rating}"/>
                    <apex:column value="{!acc.Website}"/>
                </apex:pageBlockTable>
            </apex:pageBlockSection>
            
            <apex:pageBlockSection  rendered="{!IF(contacts.size>0, true, false)}">
                <!-- create a table for showing contacts information -->   
                <apex:pageBlockTable value="{!contacts}" var="con">
                    <apex:column value="{!con.FirstName}" />
                    <apex:column value="{!con.LastName}"/>
                    <apex:column value="{!con.AccountId}"/>
                    <apex:column value="{!con.Email}"/>
                    <apex:column value="{!con.Phone}"/>
                </apex:pageBlockTable>
            </apex:pageBlockSection>
        </apex:pageBlock>
    </apex:form>
</apex:page>

ApexOutputLinkController.apxc

// create ApexOutputLinkController class to get list of Accounts and Contacts
public class ApexOutputLinkController {
    public List<account> accounts{get;set;}
    public List<contact> contacts{get;set;}
    
    // default constructor
    public ApexOutputLinkController (){
        accounts = new List<account>();
        contacts = new List<contact>();
    }
    
    // create getAccounts() method to get account records 
    public void getAccounts() {
        accounts = [select Id, Name, Rating, Phone, AccountNumber, Website From Account];
    }
    // create getContacts() method to get contact records
    public void getContacts() {
        contacts = [select Id, FirstName, LastName, AccountId, Email, Phone From Contact];
    }
}

Output