Making components customizable

The components included in this chapter will appear in Lightning App Builder and are thus available for the developer and consumers of the package to drag and drop onto pages. The following screenshot shows how the components in this chapter appear in Lightning App Builder:

Although only Lightning Web Components are featured in this chapter, this book's sample code contains example components built using both Lightning Aura components and Lightning Web Components, hence both being shown in the previous screenshot. Unless otherwise stated in the component's description, components are Lightning Web Components.

To further expose components and properties to Lightning tools such as Lightning App Builder, Lightning Community Builder, and Lightning Flow, you must reference them and their properties in your component metadata file.

Exposing parts of your application's user interface as components in these tools is very powerful as it lets your customers effectively build their own pages and experiences using the platform's tools if needed. An example of configuring this type of access is shown in the following code. This example is from race.js-meta.xml, which exposes the c-race component:

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>45.0</apiVersion>
    <isExposed>true</isExposed>
    <masterLabel>Race Information</masterLabel>
    <description>Displays ... Race</description>
    <targets>
        <target>lightning__RecordPage</target>
        <target>lightning__AppPage</target>
        <target>lightning__HomePage</target>
    </targets>
    <targetConfigs>
      <targetConfig targets="lightning__RecordPage,
              lightning__AppPage,lightning__HomePage">
        <property name="raceId" type="String" label="Rade Id" />
        <property name="name" type="String" label="Name" />
        <property name="location" type="String" label="Location"/>
        <property name="raceDate" type="String" 
           label="Race Date" />
        <property name="selected" type="Boolean" 
           label="Show as Selected"/>
        <property name="completed" type="Boolean"
           label="Show as Completed"/>
        </targetConfig>
    </targetConfigs> 
</LightningComponentBundle>

If you drag and drop the Race Information component into Lightning App Builder, its properties are displayed as shown in the following screenshot:

As with Apex classes, consider carefully the implications on your components' evolution between package releases when exposing components and properties to consumers of your package. To support backward compatibility between upgrades, changes are limited to artifacts that have this access control applied.

The Race Result component metadata file includes additional markup to indicate to Lightning App Builder that the component is only relevant to the Race__c Custom Object, so it does not show up as an option to end users when editing Team record pages, for example:

 <?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="raceResults">
    <apiVersion>45.0</apiVersion>
    <isExposed>true</isExposed>
    <masterLabel>Race Results</masterLabel>
    <targets>
        <target>lightning__RecordPage</target>
        <target>lightning__AppPage</target>
        <target>lightning__HomePage</target>
    </targets> 
    <targetConfigs>
        <targetConfig targets="lightning__RecordPage">
            <objects>
                <object>Race__c</object>
            </objects>
        </targetConfig>
    </targetConfigs> 
</LightningComponentBundle>

Now that you have learned about how to create a Lightning Web Component, it's time to learn how to use one within a container so that your users can interact with it.

Table of Contents for Making components customizable

Create new playlist

Sign In

Sign Up

Table of Contents for
Making components customizable