Hello, this is Brett with WIPDeveloper.com. So we have our first component. And weβve added styles using the Salesforce Lightning design system and Custom CSS.
Right now we canβt really reuse our component because the only thing it says is βWIPDeveloper.com is awesomeβ. And while I might think thatβs a true statement, you might not want it to look that way on your page.
Creating a Property
So weβre going to add a property to our components. So we can assign a value via the community builder in Salesforce.
To do that, weβre going to have to go into our component and a property. So we can set a default value as well.
So that in case we donβt set it, itβll stick out. Now, in theory, we should be able to use this, as our property.
We shouldnβt be able to use our property right now and have display. Letβs save it, give it a shot.
Before we do that, we should probably make it a little different. So we know itβs coming from the label property. There we go. Now, letβs refresh the page. See, if we get an exclamation mark. There we go. We have three exclamation marks. Now, if we go into the Edit page and select our component.
Updated firstComponent.js
import { LightningElement, api } from 'lwc';
export default class FirstComponent extends LightningElement {
@api label = 'WIPDeveloper.com !!!';
}
Exposing the Property
We do not have the option to set the label property here. To make it so we can do that we have to go into the first component metadata XML file.
So previously, we set the metadata as exposed true. So we can see it in the app builder. And we gave it the target pages the app page, record page, and homepage. Now what weβre going to need to do it is and targetconfigs
that expose the property that we just created the label property.
So thereβs targetconfigs
, this allows us to expose things for the targets that we specified above. So weβre going to configure one targetconfig
for all three types.
Now, this will need a property of targets.
Now I could copy and paste each one of these down there, thatβs a comma separated list. Or I could just copy and paste it from my other window, which is what Iβm going to do. But you can see I have the lightning record page, I have the lightning app page and the lightning homepage on this targetconfig
.
Now, I want to add a property that will specify that we are exposing the property
label
.
This has to match the name we specified in our JavaScript component, we have to specify the type and itβs a String
, and then we can provide a default value just so we know that itβs always set.
Now side note, Iβm a little annoying, but it doesnβt auto format. So what I want to get real quick is XML Tools, yes, XML tools want to install that restart just one format and look nice.
There we go, everything is much nicer. Iβll provide a link for XML Tools in the blog post below. Now weβve exposed the property of label, we should be able to see this in the Lightning App Builder. Once we this to the scratch org.
So it was saying we got an error, the label property does not exist on the component. And that is because I forgot to use the @api
decorator. So from the inner impart statement, we have to add a we have to have an import for API.
Down here, we would actually use it with an at (@
) sign.
Updated firstComponent.js-meta.xml
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="firstComponent">
<apiVersion>45.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__AppPage</target>
<target>lightning__RecordPage</target>
<target>lightning__HomePage</target>
</targets>
<targetConfigs>
<targetConfig targets="lightning __RecordPage,lightning__ AppPage,lightning__HomePage">
<property name="label" type="String" default="WIPDeveloper.com"></property>
</targetConfig>
</targetConfigs>
</LightningComponentBundle>
Now that weβve properly decorated with our property with API. Letβs push this and we can go back to our Lightning App Builder.
Letβs refresh it.
Theres the label
so we can give it a name
This time lets just give it slightly different label so we can make sure that itβs taking the label that weβve assigned in the app builder go back.
And there you have it, WIPDeveloper.com exclamation exclamation exclamation, one exclamation. So there we go. We have exposed a property from our custom lightning web component to the lightning app builder so that we can configure it.
Links
Thatβs it for now.
Remember to sign up for The Weekly Stand-Up! and you can get updated with any new information we have on WIPDeveloper.com.
The post LWC β First Look β Add Public Property appeared first on WIPDeveloper.com.
Top comments (0)