Tilføjelse af LWC-komponenten i Salesforce

Tilfojelse Af Lwc Komponenten I Salesforce



I denne vejledning vil vi diskutere, hvordan du tilføjer Lightning Web-komponenten til Salesforce Record/Home/App-siden. Som vi ved, står LWC for Lightning Web Component, som er hjertets tilpasning af Salesforce, der bruges til at bygge attraktive websider. Vi vil også bruge Lightning Studio-platformen til at oprette og udføre LWC-scripts.

Introduktion til Lightning Studio-udvidelsen

Lightning Studio bygger Salesforce LWC-udviklingen nemt og hurtigst. I denne editor kan vi oprette Apex/meddelelseskanalerne og LWC-scripts direkte. Vi kan også implementere LWC (brugerdefinerede) komponenter direkte på én gang. Lad os se, hvordan du tilføjer dette til vores hjemmeside og åbner det.

Gå til hjemmesiden og søg efter 'Lightning Studio – Tilføj Chrome' (hvis du bruger Chrome). Klik på knappen 'Tilføj til Chrome'.









Vi kan se, at det er føjet til Chrome. Nu er den deaktiveret. Den aktiveres kun, hvis Salesforce-organisationen er åbnet.







Det aktiveres efter logning på Salesforce-organisationen.



Klik på udvidelsen.

Gå til venstre og vælg det tredje ikon, som bruges til at oprette en ny LWC-komponent.

  • Først skal vi angive navnet på komponenten.
  • 'isExposed' bruges til at indstille komponentsynlighed i Salesforce. Den skal sættes til sand.
  • Det er vigtigt at specificere målet, hvor komponenten skal placeres. Der kan vælges flere mål.
  • Implementering af komponenten er det sidste trin (klik på 'Deploy').

Eksempel 1: Tilføjelse til postsiden

I dette scenarie opretter vi 'firstComponent' LWC-scriptet, der viser teksten 'Added to Record' og tilføjer denne komponent til siden 'Account Record'. I filen 'firstComponent.js-meta.xml' skal vi angive målet som lightning__RecordPage.

Kodestruktur:

firstComponent.html

< skabelon >
< lyn-kort variant = 'Smal' titel = 'Linux' >
< s >> Tilføjet til Record-siden s >
lyn-kort >
skabelon >

firstComponent.js

importere { LightningElement } fra 'held' ;
eksport standardklassen FirstComponent udvider LightningElement {
}

firstComponent.js-meta.xml

< ?xml version = '1.0' ? >
< LightningComponentBundle xmlns = 'http://soap.sforce.com/2006/04/metadata' >
< apiVersion > 57,0 apiVersion >
< er udsat > rigtigt er udsat >
< mål >
< mål > lyn__RecordPage mål >
mål >
LightningComponentBundle >

Tilføjelse af en komponent:

Gå til Salesforce-organisationen, og søg efter 'Sales'-appen under App Launcher.

Åbn en hvilken som helst kontopost ved at navigere til fanen 'Konti'. Gå til tandhjulsikonet og vælg 'Rediger side'.

Gå nu til venstre og søg efter din komponent.

Træk komponenten og placer den under 'Højdepunkter-panelet'.

Klik på 'Aktiver' og tildel det som organisationens standard. Gem endelig registreringssiden.

Det er gjort. Gå nu tilbage til 'Salg' app-siden og gå til 'Kontopost' (enhver post). Du kan se, at den tilpassede komponent er tilføjet.

Eksempel 2: Tilføjelse til hjemmeside

Lad os bruge 'firstComponent'. Rediger afsnitsteksten som 'Tilføjet til startside' i HTML-filen. Angiv målet som 'lightning__HomePage' i filen 'firstComponent.js-meta.xml'.

firstComponent.html


= 'Smal' titel = 'Linux' >

< s > Tilføjet til startsiden < / s >
< / lyn-kort>
< / skabelon>

firstComponent.js-meta.xml

version
= '1.0' ?>
=
'http://soap.sforce.com/2006/04/metadata' >
57,0 < / apiVersion>
sandt< / er Udsat>

lyn__hjemmeside< / mål>
< / mål>
< / LightningComponentBundle>

Tilføjelse af en komponent:

Gå til appen 'Salg', og klik på fanen 'Hjem'.

Klik på den tilgængelige redigeringsside under tandhjulsikonet. Søg efter komponenten og placer den over 'Performance'-komponenten. Gem siden.

Opdater fanen 'Salg Home'.

Vi kan se, at vores komponent er tilføjet til hjemmesiden.

Eksempel 3: Tilføjelse til app-side

Lad os bruge 'firstComponent'. Rediger afsnitsteksten som 'Tilføjet til app-side' i HTML-filen. Angiv målet som 'lightning__AppPage' i filen 'firstComponent.js-meta.xml'.

firstComponent.html

< skabelon >
< lyn-kort variant = 'Smal' titel = 'Linux' >
< s > Tilføjet til app-siden s >
lyn-kort >
skabelon >

firstComponent.js-meta.xml

version = '1.0' ?>

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

57,0 < / apiVersion>
rigtigt < / er Udsat>

lyn__AppPage < / mål>
< / mål>
< / LightningComponentBundle>

Tilføjelse af en komponent:

Først skal vi oprette en app-side i Salesforce ved hjælp af Lightning App Builder. Søg efter 'Lightning App Builder' i 'Hurtig søgning', og klik på 'Ny' for at oprette en ny lynside.

Vælg app-siden og gå til 'Næste'.

Giv etiketten som 'Linuxhint App' og gå til 'Næste'.

Lige nu har vi kun brug for én region til at placere komponenten. Så vælg 'Én region' og klik på 'Udført'.

Træk nu 'firstComponent' til siden og gem siden.

Der kommer en pop op, hvor siden skal aktiveres. Klik på 'Aktiver'.

Derefter skal du tilføje en side til appen. Gå til fanen 'LYNOPLEVELSE' og gør dette. Gem denne aktivering.

Gå nu til App Launcher og søg efter 'Linuxhint App'. Du kan se, at vores komponent er tilføjet til App-siden.

Konklusion

Nu er vi i stand til at forstå, hvordan man tilføjer LWC til App-siden, Hjemmesiden og Record-siden. I alle scenarier brugte vi de samme eksempler for at få en bedre idé. Sørg for, at 'isExposed' er sandt. Ellers er komponenten ikke synlig i Salesforce-organisationen. I hele denne guide brugte vi Lightning Studio (Beta) editoren til at udvikle koden. Alle trin er forklaret om, hvordan du downloader og bruger denne editor i starten af ​​denne vejledning.