---
schema_version: "1"
id: e515c0bce6f20c2bd5877ed5fbb8962f4df0b6cf73791896875142960ee5e8e4
title: Custom Component Controllers
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/platform/salesforce-pages-developers-guide/guides/pages/comp-cust/pages-comp-cust-elements-controllers.md
canonical_url: https://developer.salesforce.com/docs/platform/salesforce-pages-developers-guide/guide/pages-comp-cust-elements-controllers.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: 24a610cda0b22e35ee9c22c21c1f6fc982f123e441fcce0279a559ec7893d08a
products:
  - Visualforce Developer Guide
  - Platform Developer Content
---

# Custom Component Controllers

Similar to standard Visualforce pages, custom components can be associated with a controller written in Apex. This association is made by setting the `controller` attribute on the component to your custom controller. You can use the controller to perform additional logic before returning the component's markup to the associated page.

## Accessing Custom Component Attributes in a Controller

To access the value of a custom component attribute in an associated custom component controller:

1.  Define a property in the custom component controller to store the value of the attribute.
2.  Define a getter and setter method for the property. For example:

    <!-- otherprops: apex_code set_clipboard -->
    ```controller
    public class myComponentController {
        
      public String controllerValue;
        
      public void setControllerValue (String s) {
        controllerValue = s.toUpperCase();
      }
        
      public String getControllerValue() {
        return controllerValue;
      } 
    }
    ```

    Notice that the setter modifies the value.

3.  In the `<apex:attribute>` tag in your component definition, use the `assignTo` attribute to bind the attribute to the class variable you just defined. For example:

    <!-- otherprops: apex_page set_clipboard -->
    ```markup
    <apex:component controller="myComponentController">
      <apex:attribute name="componentValue" description="Attribute on the component."
                      type="String" required="required" assignTo="{!controllerValue}"/>
        <apex:pageBlock title="My Custom Component">
          <p>
            <code>componentValue</code> is "{!componentValue}"
            <br/>
            <code>controllerValue</code> is "{!controllerValue}"
          </p>
        </apex:pageBlock>
        Notice that the controllerValue has been upper cased using an Apex method.
    </apex:component>
    ```

    Note that when using the `assignTo` attribute, getter and setter methods, or a property with `get` and `set` values, must be defined.

4.  Add the component to a page. For example,

    <!-- otherprops: set_clipboard -->
    ```apex_page
    <apex:page>
      <c:simpleComponent componentValue="Hi there, {!$User.FirstName}"/>   
    </apex:page>
    ```


The output of the page will look something like the following:

![Example page.](https://developer.salesforce.com/media/salesforce-pages-developers-guide/pages_component_controller_attributes.jpg)

Notice that the Apex controller method changes `controllerValue` so that it is displayed with uppercase characters.