<apex: commandLink> Component in Visualforce Page

The <apex:commandLink> component is one of the most important components of Visualforce. When the user presses the link, the action defined by the controller executes. Then either the page navigates to a different page or refreshes the current page based on the returned PageReference's variable.

We use the nested <apex:param> components to add the request parameters to an <apex:commandLink> 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:commandLink> 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 command link in focus.

Syntax:

2. action

The action attribute is of type ApexPages.Action that is used for defining the action method that will be invoked by the AJAX request to the server. The page simply refreshes when an action is not specified.

Syntax:

3. 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:

4. 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 commandLink.

Syntax:

5. 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:

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 commandLink. 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. immediate

The immediate attribute is of type Boolean. If its value is true, the action associated with the component will happen immediately. The validation rules associated with the fields on the page will not be processed by the function.

Syntax

9. 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:

10. 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 command button.

Syntax:

11. 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 command button.

Syntax:

12. oncomplete

The oncomplete attribute is of type string that is used to invoke the JavaScript method when the result of an AJAX update request completes on the client

Syntax:

13. 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 command button is clicked twice.

Syntax:

14. onfocus

The onfocus attribute is of type string that is used to invoke the JavaScript method when the onfocus event occurs or simply focus on the command button.

Syntax:

15. 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:

16. 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:

17. 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:

18. 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:

19. 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:

20. 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 command button.

Syntax:

21. 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 command button.

Syntax:

22. 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:

23. 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 command link. The value of this attribute is a space-separated list of link types.

Syntax:

24. 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 command link. The value of this attribute is a space-separated list of link types.

Syntax:

25. 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:

26. reRender

The reRender attribute is of type Object that is basically Id of one or more components which we need to redraw when the client receives the result of the action method.

Its value can be a single Id, comma-separated Id, or collection of Ids.

Syntax:

27. status

The status attribute is of type string that is used to specify the ID of an associated component that displays the status of an AJAX update request.

Syntax:

28. 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:

29. 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 command button.

Syntax:

30. 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:

31. timeout

The timeout attribute is of type integer that is used to specify the amount of time before an AJAX update request should time out.

Syntax:

32. 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:

33. target

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

Syntax:

34. type

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

Syntax:

35. value

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

Syntax:

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

ApexCommandLinkExample.vfp

<!-- create apex page with custom controller-->
<apex:page controller="ApexCommandLinkController">
    <!-- use apex form to show the accounts and contacts table-->
    <apex:form >
        <apex:pageBlock title="Account/Contact Information">
            <!-- command button that is responsible for showing accounts in the table-->
            <apex:commandLink action="{!getAccounts}" value="Show Accounts"/>
            
            <!-- command button that is responsible for showing contacts in the table-->
            <apex:commandLink action="{!getContacts}" value="Show Contacts"/>
            
            <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>

ApexCommandLinkController.apxc

// create ApexCommandLinkController class to get the list of Accounts and Contacts
public class ApexCommandLinkController {
    public List<account> accounts{get;set;}
    public List<contact> contacts{get;set;}
    
    // default constructor
    public ApexCommandLinkController (){
        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