Newer Version Available

This content describes an older version of this product. View Latest

Client-Side Runtime Binding of Components

A provider enables you to use an abstract component in markup. The framework uses the provider to determine the concrete component to use at runtime.

Use a client-side provider if you don’t need to access the server when creating a component.

Creating a Provider

A client-side provider is part of the component bundle. To reuse a provider from another component, you can use the provider system attribute in aura:component instead. For example, this component uses the auto-wired provider in the sampleComponent bundle.

1swfobject.registerObject("clippy.codeblock-0", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17<aura:component
18    provider="js://auradocs.sampleComponent">
19    ...
20</aura:component>

If you are reusing a provider from another component and you already have an auto-wired provider in your component bundle, the methods in your auto-wired provider will not be accessible. We recommend that you use a provider within the component bundle for maintainability and use an external provider only if you must.

Note

A client-side provider is a simple JavaScript object that defines the provide function. For example, this provider returns a string that defines the topic to display.

1swfobject.registerObject("clippy.codeblock-1", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17({
18    provide : function (cmp) {
19        var topic = cmp.get('v.topic');
20        return 'auradocs' + topic + 'Topic';
21    }
22})

Instead of a string, a provider can return a JSON object to provide both the concrete component and set some additional attributes. For example:

1swfobject.registerObject("clippy.codeblock-2", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17({
18    provide : function (cmp) {
19        var topic = cmp.get('v.topic');
20        return {
21            componentDef: 'auradocs' + topic + 'Topic',
22            attributes: {
23                "type": "task"
24            }
25        }
26    }
27})

You can omit the componentDef entry if the component is already concrete and you only want to provide attributes.