In this exercise, you will learn how to:
GitHub
Projectforce-app/main/default/lwc and press Enter/Return.lwc/helloWorld folders.Hello, World on line 2.<isExposed> value to true.Add the following to a new line on line 5:
<targets>
<target>lightning__AppPage</target>
<target>lightning__RecordPage</target>
<target>lightning__HomePage</target>
</targets>
and then select Edit Page from the menu.Click the Save button in App Builder.
Since this is the first time we’ve modified the standard Property page, we need to activate the updated page so that our users can see what we’ve done.
NOTE: Styling using the CSS from the Salesforce Lightning Design System (SLDS) will change in the future. Currently, styles are inherited from SLDS via the CSS served by the Lightning Experience. In the future, the Shadow DOM will no longer allow this. Guidance will be provided at a future date on how to consume the CSS from SLDS.
class="slds-card" assigned to the <article> tag.helloWorld component, wrap the text Hello, World in a <div> tag.class="slds-card" to the <div> tag.Reload the Property Detail page.
class="slds-card__body slds-card__body_inner" applied to the last <div>.<div>, wrap the text Hello World with <div class="slds-card__body slds-card__body_inner">.slds-p-vertical_small to the second <div> so that it looks like this: <div class="slds-card__body slds-card__body_inner slds-p-vertical_small">.Refresh the Property Detail page.
Hello, {greeting}!.{} of your HelloWorld class.Add the following:
greeting = 'World';
Reload the Property Detail page.
Note that nothing has visually changed, but the value of greeting is being displayed.
In helloWorld.html, add the following input field on a new line below the Hello {greeting}:
<input type="text" value={greeting} />
slds-input class applied to the <input> tag.class="slds-input" to the <input> tag in helloWorld.html.onchange={handleChange} to the <input>.In helloWorld.js, add the following on a new line after line 4:
handleChange(event) {
this.greeting = event.target.value;
}
In helloWorld.html, add the following on a new line after the <input>:
<button name="Update" type="submit" class="slds-button slds-button_brand slds-m-top_small" onclick={handleClick}>Update</button>
{myInput}.In helloWorld.js, add the following property:
myInput = 'World';
Add the following to the handleChange method:
this.myInput = this.greeting;
Add a handleClick method:
handleClick () {
this.greeting = this.myInput + ". It's a pleasure to meet you";
}
Not working for you? Your finished HelloWorld component should be as follows:
<template>
<div class="slds-card">
<div class="slds-card__body slds-card__body_inner slds-p-vertical_small">
Hello, {greeting}!
<input type="text" value={myInput} onchange={handleChange} class="slds-input" />
<button name="Update" type="submit" class="slds-button slds-button_brand slds-m-top_small" onclick={handleClick}>Update</button>
</div>
</div>
</template>
import { LightningElement } from 'lwc';
export default class HelloWorld extends LightningElement {
greeting = 'World';
myInput = 'World';
handleChange(event){
this.greeting = event.target.value;
this.myInput = this.greeting;
}
handleClick () {
this.greeting = this.myInput + ". It's a pleasure to meet you";
}
}
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>48.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__AppPage</target>
<target>lightning__RecordPage</target>
<target>lightning__HomePage</target>
</targets>
</LightningComponentBundle>