lego_lightning

Lightning Component Composition and Facets

The Lightning Component framework provides different mechanisms to allow components to be used together in meaningful ways. This article explores how component composition and component facets can be used to tie components together. A custom component that provides a simple way to make anything in to a link to a record in the Salesforce1 app and a component that uses that component are used to illustrate the concepts.

Facets

A component facet is defined as an attribute of the component that has a type of Aura.Component[].  Component facet values are set by the owner/container of the component using an aura:set component with an attribute value specified that matches the attribute’s name that the component declared. The following snippet shows a custom component, c:enhancedRecordLink, being used. It has an additionalInfo facet. (Note, the development was done in an org with no namespace so the default namespace of “c” is shown).

The c:enhancedRecordLink component is defined as follows. It shows the attribute with a name of additionalInfo declared as an attribute and output in the div tag.

The additionalInfo facet is not the only facet that is being used. The component’s body facet is being set as well. Each component has a body attribute which is inherited from the root-level <aura:component>. The body is probably exactly what you think it is: the free markup in the component (e.g., everything not in aura:attribute, aura:register, etc.). In the above example, the SFDC logo img tag is what is specified as the body of the c:enhancedRecordLink instance. The component definition references the body that was specified, through the component’s attribute set value provider, “v”, which is the exact same way it references all of its attributes.  Since the body is basically just another facet, it can actually be wrapped in an aura:set attribute="body", but doesn’t need to be as the framework is smart enough to not need that.

Composition

The c:enhancedRecordLink component contains another custom component, c:recordLink and uses it as follows:

The c:recordLink component is defined as follows.

The c:recordLink component simply wraps whatever is specified in its body attribute in a span that has an onclick event handler that is the client-side controller action navigateToRecord. That method delegates to a helper method, navigateToRecord, which fires the application level force:navigateToSObjectevent.

The force:navigateToSObject event does not need to be handled by any of the custom components, but instead is handled by some part of the Salesforce1 app. If you are developing/testing in your own app (.app) in the browser you need to be aware that the Salesforce1 app isn’t there to handle the event.

Wrap it up

The above example illustrated how composition can be used to take a simpler component and make a more interesting one. Along with composition, component facets were shown as another way for a component to use another component to provide more meaningful functionality.

There is much more to understand about composition such as event communication, rendering life cycles, etc. To learn more about the Lightning Component framework read the Lightning Developer’s Guide.

Leave a Reply

Your email address will not be published. Required fields are marked *