Convert Components for the Salesforce Platform
In this step, you convert the Lightning web components you wrote for your Node.js app into components for the Salesforce Platform.
Copy Component Files
- Copy the
app
,sessionDetails
,sessionList
, andspeakerCard
component folders from the previous project’s/src/client/modules/my
directory. - Paste these four folders in your Salesforce DX project
/force-app/main/default/lwc
directory. - Delete the
force-app/main/default/lwc/app/__tests__
folder as we won’t test components in this project.
Add Component Metadata
The Salesforce Platform requires some extra data known as metadata in order to display components in Lightning Experience.
- Open Visual Studio Code.
- Press File > Open.
- Select your
lightning-conference
folder and click Open. - Navigate in the file explorer to the directory
force-app/main/default/lwc
. - Create an
app.js-meta.xml
file in theapp
directory. - Paste this content in the file:
-
<?xml version="1.0" encoding="UTF-8"?> <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata"> <apiVersion>49.0</apiVersion> <isExposed>true</isExposed> <masterLabel>Conference App</masterLabel> <targets> <target>lightning__AppPage</target> </targets> </LightningComponentBundle>
The
isExposed
flag set totrue
exposes this component to be used in Lightning App Builder, while themasterLabel
attribute lets you specify a user friendly name for it. Thelightning__AppPage
target allows you to place this component in Lightning application pages like the one that you created before. - Save the
app.js-meta.xml
file. - Create a
sessionDetails.js-meta.xml
file in thesessionDetails
directory. - Paste this content in the file:
-
<?xml version="1.0" encoding="UTF-8" ?> <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata"> <apiVersion>49.0</apiVersion> <isExposed>false</isExposed> </LightningComponentBundle>
- Save the
sessionDetails.js-meta.xml
file. - Copy
sessionDetails.js-meta.xml
in thesessionList
directory and rename it tosessionList.js-meta.xml
. - Copy sessionDetails.js-meta.xml in the
speakerCard
directory and rename it tospeakerCard.js-meta.xml
.
At this point, all components directories should contain a .js-meta.xml
file like so:
Update Component Namespace
In the previous project, components are placed in a my
folder which acts as a namespace. On the Salesforce Platform you use a default namespace - c
. In practice, this simply means that you need to replace the my-
prefix of your components’ tags by a c-
prefix within your components markup.
- In VS Code, click the Search icon
- Enter
my-
in the search field. - Press Enter, you should see “6 results in 2 files” (app.html and sessionDetails.html).
- Enter
c-
in the replace field. - Click the Replace all icon
and confirm the replacement.
Use Mock Data to Test the Conversion
In order to quickly test the conversion of your components, let’s replace the data retrieval with mock data. You fetch Salesforce data in the next step.
- Open
sessionList.js
- Remove
import { getSessions } from 'data/sessionService';
- Replace the three lines of code in the
connectedCallback
function with the following code. -
this.sessions = this.allSessions = [ { id: '1', name: 'Mock session', dateTime: '2099-01-01 00:00:00', room: 'Mock room', description: "Mock description", speakers: [ { id: '1', name: 'Mock speaker 1', bio: 'Bio for mock speaker 1', email: 'mock1@trailhead.com', pictureUrl:'https://developer.salesforce.com/files/js-dev/speaker-images/john_doe.jpg' }, { id: '2', name: 'Mock speaker 2', bio: 'Bio for mock speaker 2', email: 'mock2@trailhead.com', pictureUrl:'https://developer.salesforce.com/files/js-dev/speaker-images/laetitia_arevik.jpg' } ] } ];
- Save
sessionList.js
- Open
sessionDetails.js
- Remove
import { getSession } from 'data/sessionService';
- Replace
this.session = getSession(id);
with the following code. -
this.session = { id: '1', name: 'Mock session', dateTime: '2099-01-01 00:00:00', room: 'Mock room', description: "Mock description", speakers: [ { id: '1', name: 'Mock speaker 1', bio: 'Bio for mock speaker 1', email: 'mock1@trailhead.com', pictureUrl: 'https://developer.salesforce.com/files/js-dev/speaker-images/john_doe.jpg' }, { id: '2', name: 'Mock speaker 2', bio: 'Bio for mock speaker 2', email: 'mock2@trailhead.com', pictureUrl: 'https://developer.salesforce.com/files/js-dev/speaker-images/laetitia_arevik.jpg' } ] };
- Save
sessionDetails.js
Add the App Component to the Lightning Page
At this point, your components are ready to be deployed to the Salesforce Platform, and you can add them to the Lightning Page you set up earlier.
- In VS Code, right-click the
force-app
folder and click SFDX: Deploy Source to Org. -
You should see the following text in the output tab of VS Code.
- Open the Command Palette by pressing Ctrl+Shift+P on Windows or Cmd+Shift+P on macOS.
- Type
SFDX
- Select SFDX: Open Default Org. This opens your Salesforce org in a browser.
- Navigate to the Agenda tab of the Conference application.
- Click the Setup icon
and select Edit Page.
- In the left navigation list scroll down to the Custom section, find your Conference App component and drag it on the component placeholder that reads: Add Component(s) Here.
- Click Save.
- Click Back to return to the App.
Click the session entry and make sure that you can navigate to the single session that is listed.
We don’t need the header in our Lightning app, so let’s adjust the application style and structure.
Disable Lightning Component Caching
Lightning Experience uses secure data caching in the browser to improve page performance by avoiding additional round trips to the server. While this is helpful and recommended in production environments, disable caching during development to see the effect of any code changes without needing to empty the cache or wait for the cache to expire.
- From Setup, enter
session
in the Quick Find box, then click Session Settings. - Deselect the “Enable secure and persistent browser caching to improve performance” checkbox.
- Click Save.
Adjust Component’s Style and Structure
- Open
app.html
- Remove the
header
tag with its content. - Replace the opening
<main class="content">
tag with this code. -
<lightning-card> <div class="slds-var-p-horizontal_small">
- Replace the closing
</main>
tag with: -
</div> </lightning-card>
- Save
app.html
- Right-click on the
app.css
file in the Explorer, select SFDX: Delete from Project and Org and click Delete Sources. - Edit
sessionList.css
, delete the:host
rule and save the file. - Edit
sessionDetails.css
, delete the:host
rule and save the file. - Redeploy your components by right-clicking the
force-app
folder and clicking SFDX: Deploy Source to Org.
Well-done, your app looks better now (you might need to refresh the page a couple of times to clear the cache).
In the next step, you replace the mock data with real Salesforce data.