Lightning Components Developer’s Guide

Clouds with binary code floating aboveCloud with binary code floating above

No Results

Search Tips:

  • Please consider misspellings
  • Try different search keywords
PDF

Newer Version Available

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

Dynamically Creating Components

You can create a component dynamically from your client-side JavaScript code using the newComponentAsync() method.

The newComponentAsync() method replaces the deprecated newComponent() and newComponentDeprecated() methods.

Note

$A.componentService.newComponentAsync(callbackScope, callback, config, attributeValueProvider, localCreation, doForce, forceServer) takes in a required callback function that returns your newly created component, and a required config object, which provides the component descriptor and attributes. Refer to the JavaScript API reference for a full description of all the arguments.

This sample code creates a new ui:button component with the local ID, attaches an event handler to the new button, and appends the button to the body.

1swfobject.registerObject("clippy.codeblock-0", "9");createButton : function(cmp) {
2    $A.componentService.newComponentAsync(
3        this,
4        function(newButton){
5            //Pass an event handler to the new button
6            newButton.addHandler('press', cmp, 'c.someHandler');
7
8            //Add the new button to the body array
9            var body = cmp.get("v.body");
10            body.push(newButton);
11            cmp.set("v.body", body);
12        },
13        {
14            "componentDef": "markup://ui:button",
15            "localId": "myLocalId",
16            "attributes": {
17                "values": { label: "Submit" }
18            }
19        }
20    );
21}
$A.componentService.newComponentAsync() is equivalent to $A.newCmpAsync(). To retrieve the new button you created, use body[0].
1swfobject.registerObject("clippy.codeblock-1", "9");var newbody = cmp.get("v.body");
2var newCmp = body[0].find("myLocalId");

The componentDef attribute represents the component definition you’re creating. It contains the definition descriptor of the component in the format markup://namespace:name, which is a reference to the metadata of a component definition.

Note

Declaring Dependencies

The framework automatically tracks dependencies between definitions, such as components. However, some dependencies aren't easily discoverable by the framework; for example, if you dynamically create a component that is not directly referenced in the component's markup. To tell the framework about such a dynamic dependency, use the <aura:dependency> tag. This ensures that the component and its dependencies are sent to the client, when needed.

For more information about usage, see aura:dependency.

Server-Side Dependencies

The newComponentAsync() method supports both client-side and server-side component creation. If no server-side dependencies are found, this method is run synchronously. The top-level component determines whether a server request is necessary for component creation.

Creating components where the top-level components don't have server dependencies but nested inner components do is not currently supported.

Note

A server-side controller is not a server-side dependency for component creation as controller actions are only called after the component has been created.

A component with server-side dependencies is created on the server, even if it's preloaded. If there are no server dependencies and the definition already exists on the client via preloading or declared dependencies, no server call is made. To force a server request, set the forceServer parameter to true.