Lägga till LWC-komponenten i Salesforce

Lagga Till Lwc Komponenten I Salesforce



I den här guiden kommer vi att diskutera hur du lägger till Lightning Web Component på Salesforce Record/Home/App-sidan. Som vi vet står LWC för Lightning Web Component som är hjärtats anpassning av Salesforce som används för att bygga attraktiva webbsidor. Vi kommer också att använda Lightning Studio-plattformen för att skapa och exekvera LWC-skript.

Vi presenterar Lightning Studio-tillägget

Lightning Studio bygger Salesforce LWC-utvecklingen enkelt och snabbast. Inom denna editor kan vi direkt skapa Apex/meddelandekanaler och LWC-skript. Dessutom kan vi distribuera LWC-komponenterna (anpassade) direkt på en gång. Låt oss se hur du lägger till detta på vår webbplats och öppnar det.

Gå till webbplatsen och sök efter 'Lightning Studio – Lägg till Chrome' (om du använder Chrome). Klicka på knappen 'Lägg till i Chrome'.









Vi kan se att det läggs till i Chrome. Nu är den inaktiverad. Den aktiveras endast om Salesforce-organisationen är öppen.







Det aktiveras efter inloggning i Salesforce-organisationen.



Klicka på tillägget.

Gå till vänster och välj den tredje ikonen som används för att skapa en ny LWC-komponent.

  • Först måste vi ange namnet på komponenten.
  • 'isExposed' används för att ställa in komponentens synlighet i Salesforce. Det måste ställas in på sant.
  • Det är viktigt att specificera målet där komponenten ska placeras. Flera mål kan väljas.
  • Att distribuera komponenten är det sista steget (klicka på 'Deploy').

Exempel 1: Lägga till på postsidan

I det här scenariot skapar vi 'firstComponent' LWC-skriptet som visar texten 'Added to Record page' och lägger till den här komponenten på sidan 'Account Record'. I filen 'firstComponent.js-meta.xml' måste vi ange målet som lightning__RecordPage.

Kodstruktur:

firstComponent.html

< mall >
< blixtkort variant = 'Smal' titel = 'Linux' >
< sid >> Lades till på postsidan sid >
blixtkort >
mall >

firstComponent.js

importera { LightningElement } från 'tur' ;
exportera standardklassen FirstComponent utökar LightningElement {
}

firstComponent.js-meta.xml

< ?xml version = '1.0' ? >
< LightningComponentBundle xmlns = 'http://soap.sforce.com/2006/04/metadata' >
< apiVersion > 57,0 apiVersion >
< är Exponerad > Sann är Exponerad >
< mål >
< mål > lightning__RecordPage mål >
mål >
LightningComponentBundle >

Lägga till en komponent:

Gå till Salesforce-organisationen och sök efter appen 'Försäljning' under appstartaren.

Öppna valfri kontopost genom att navigera till fliken 'Konton'. Gå till kugghjulsikonen och välj 'Redigera sida'.

Gå nu till vänster och sök efter din komponent.

Dra komponenten och placera den under 'Highlights Panel'.

Klicka på 'Aktivera' och tilldela den som org-standard. Spara slutligen postsidan.

Det är gjort. Gå nu tillbaka till appsidan 'Försäljning' och gå till 'Kontopost' (valfri post). Du kan se att den anpassade komponenten läggs till.

Exempel 2: Lägger till på startsidan

Låt oss använda 'firstComponent'. Ändra stycketexten som 'Lägg till på startsidan' i HTML-filen. Ange målet som 'lightning__HomePage' i filen 'firstComponent.js-meta.xml'.

firstComponent.html


= 'Smal' titel = 'Linux' >

< sid > Lades till på startsidan < / sid >
< / blixtkort>
< / mall>

firstComponent.js-meta.xml

version
= '1.0' ?>
=
'http://soap.sforce.com/2006/04/metadata' >
57,0 < / apiVersion>
sant< / är Exponerad>

blixt__Hemsida< / mål>
< / mål>
< / LightningComponentBundle>

Lägga till en komponent:

Gå till appen 'Försäljning' och klicka på fliken 'Hem'.

Klicka på redigeringssidan som är tillgänglig under kugghjulsikonen. Sök efter komponenten och placera den ovanför komponenten 'Prestanda'. Spara sidan.

Uppdatera fliken 'Försäljningshem'.

Vi kan se att vår komponent läggs till på startsidan.

Exempel 3: Lägga till på appsidan

Låt oss använda 'firstComponent'. Ändra stycketexten som 'Lägg till på appsidan' i HTML-filen. Ange målet som 'lightning__AppPage' i filen 'firstComponent.js-meta.xml'.

firstComponent.html

< mall >
< blixtkort variant = 'Smal' titel = 'Linux' >
< sid > Lades till på appsidan sid >
blixtkort >
mall >

firstComponent.js-meta.xml

version = '1.0' ?>

= 'http://soap.sforce.com/2006/04/metadata' >

57,0 < / apiVersion>
Sann < / är Exponerad>

lightning__AppPage < / mål>
< / mål>
< / LightningComponentBundle>

Lägga till en komponent:

Först måste vi skapa en appsida i Salesforce med hjälp av Lightning App Builder. Sök efter 'Lightning App Builder' i 'Snabbsökning' och klicka på 'Ny' för att skapa en ny blixtsida.

Välj appsidan och gå till 'Nästa'.

Ge etiketten som 'Linuxhint App' och gå till 'Nästa'.

För närvarande behöver vi bara en region för att placera komponenten. Så, välj 'En region' och klicka på 'Klar'.

Dra nu 'firstComponent' till sidan och spara sidan.

En popup kommer in där sidan måste aktiveras. Klicka på 'Aktivera'.

Efter det måste du lägga till en sida i appen. Gå till fliken 'LIGHTNING EXPERIENCE' och gör detta. Spara denna aktivering.

Gå nu till App Launcher och sök efter 'Linuxhint App'. Du kan se att vår komponent läggs till på appsidan.

Slutsats

Nu kan vi förstå hur man lägger till LWC på appsidan, startsidan och inspelningssidan. I alla scenarier använde vi samma exempel för att få en bättre uppfattning. Se till att 'isExposed' är sant. Annars är komponenten inte synlig i Salesforce-organisationen. I hela den här guiden använde vi Lightning Studio (Beta) editor för att utveckla koden. Alla steg förklaras om hur du laddar ner och använder den här editorn i början av den här guiden.