Dodajanje komponente LWC v Salesforce

Dodajanje Komponente Lwc V Salesforce



V tem priročniku bomo razpravljali o tem, kako dodati spletno komponento Lightning na stran Salesforce Record/Home/App. Kot vemo, LWC pomeni Lightning Web Component, ki je srčna prilagoditev Salesforce, ki se uporablja za izdelavo privlačnih spletnih strani. Uporabili bomo tudi platformo Lightning Studio za ustvarjanje in izvajanje skriptov LWC.

Predstavljamo razširitev Lightning Studio

Lightning Studio enostavno in najhitreje gradi razvoj Salesforce LWC. Znotraj tega urejevalnika lahko neposredno ustvarimo Apex/sporočilne kanale in skripte LWC. Prav tako lahko neposredno namestimo komponente LWC (po meri) naenkrat. Poglejmo, kako to dodati na naše spletno mesto in ga odpreti.

Pojdite na spletno mesto in poiščite »Lightning Studio – Dodaj Chrome« (če uporabljate Chrome). Kliknite gumb »Dodaj v Chrome«.









Vidimo lahko, da je dodan v Chrome. Zdaj je onemogočen. Omogočeno bo samo, če je Salesforce Org odprt.







Omogočen je po prijavi v Salesforce Org.



Kliknite razširitev.

Pojdite na levo in izberite tretjo ikono, ki se uporablja za ustvarjanje nove komponente LWC.

  • Najprej moramo določiti ime komponente.
  • »isExposed« se uporablja za nastavitev vidnosti komponente v Salesforce. Nastavljeno mora biti na true.
  • Pomembno je določiti cilj, kamor bo komponenta nameščena. Izberete lahko več ciljev.
  • Namestitev komponente je zadnji korak (kliknite »Razmesti«).

Primer 1: Dodajanje na stran s posnetki

V tem scenariju ustvarimo skript LWC »firstComponent«, ki prikaže besedilo »Added to Record page«, in to komponento dodamo na stran »Account Record«. V datoteki “firstComponent.js-meta.xml” moramo podati cilj kot lightning__RecordPage.

Struktura kode:

firstComponent.html

< predlogo >
< strela-karta varianta = 'ozek' naslov = 'Linux' >
< str >> Dodano na stran za snemanje str >
strela-karta >
predlogo >

firstComponent.js

uvoz { LightningElement } od 'sreča' ;
izvoz privzeti razred FirstComponent razširja LightningElement {
}

firstComponent.js-meta.xml

< ?xml različica = '1,0' ? >
< LightningComponentBundle xmlns = 'http://soap.sforce.com/2006/04/metadata' >
< apiVersion > 57,0 apiVersion >
< isExposed > prav isExposed >
< tarče >
< tarča > strela__RecordPage tarča >
tarče >
LightningComponentBundle >

Dodajanje komponente:

Pojdite v organizacijo Salesforce in pod zaganjalnikom aplikacij poiščite aplikacijo »Prodaja«.

Odprite kateri koli zapis računa tako, da se pomaknete na zavihek »Računi«. Pojdite na ikono zobnika in izberite »Uredi stran«.

Zdaj pojdite na levo in poiščite svojo komponento.

Povlecite komponento in jo postavite pod »Highlights Panel«.

Kliknite »Aktiviraj« in ga dodelite kot privzeto organizacijo. Nazadnje shranite stran zapisa.

Opravljeno je. Zdaj se vrnite na stran aplikacije »Prodaja« in pojdite na »Zapis računa« (kateri koli zapis). Vidite lahko, da je dodana komponenta po meri.

Primer 2: Dodajanje na domačo stran

Uporabimo 'firstComponent'. Spremenite besedilo odstavka kot »Dodano na domačo stran« v datoteki HTML. Podajte cilj kot »lightning__HomePage« v datoteki »firstComponent.js-meta.xml«.

firstComponent.html


= 'ozek' naslov = 'Linux' >

< str > Dodano na domačo stran < / str >
< / strela-kartica>
< / predloga>

firstComponent.js-meta.xml

različica
= '1,0' ?>
=
'http://soap.sforce.com/2006/04/metadata' >
57,0 < / apiVersion>
true< / je izpostavljeno>

lightning__HomePage< / cilj>
< / cilji>
< / LightningComponentBundle>

Dodajanje komponente:

Pojdite v aplikacijo »Prodaja« in kliknite zavihek »Domov«.

Kliknite stran za urejanje, ki je na voljo pod ikono zobnika. Poiščite komponento in jo postavite nad komponento »Zmogljivost«. Shranite stran.

Osvežite zavihek »Sales Home«.

Vidimo lahko, da je naša komponenta dodana na domačo stran.

Primer 3: Dodajanje na stran aplikacije

Uporabimo 'firstComponent'. Spremenite besedilo odstavka kot »Dodano na stran aplikacije« v datoteki HTML. Podajte cilj kot »lightning__AppPage« v datoteki »firstComponent.js-meta.xml«.

firstComponent.html

< predlogo >
< strela-karta varianta = 'ozek' naslov = 'Linux' >
< str > Dodano na stran aplikacije str >
strela-karta >
predlogo >

firstComponent.js-meta.xml

različica = '1,0' ?>

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

57,0 < / apiVersion>
prav < / je izpostavljeno>

lightning__AppPage < / cilj>
< / cilji>
< / LightningComponentBundle>

Dodajanje komponente:

Najprej moramo ustvariti stran aplikacije v Salesforce z orodjem Lightning App Builder. V »Hitrem iskanju« poiščite »Lightning App Builder« in kliknite »Novo«, da ustvarite novo stran s strelami.

Izberite stran aplikacije in pojdite na »Naprej«.

Označite kot »Linuxhint App« in pojdite na »Naprej«.

Od zdaj potrebujemo samo eno regijo za namestitev komponente. Torej izberite »Ena regija« in kliknite »Končano«.

Zdaj povlecite »firstComponent« na stran in shranite stran.

Prišlo bo pojavno okno, v katerem je treba stran aktivirati. Kliknite »Aktiviraj«.

Po tem morate v aplikacijo dodati stran. Pojdite na zavihek »LIGHTNING EXPERIENCE« in naredite to. Shranite to aktivacijo.

Zdaj pojdite na zaganjalnik aplikacij in poiščite »Linuxhint App«. Vidite lahko, da je naša komponenta dodana na stran aplikacije.

Zaključek

Zdaj lahko razumemo, kako dodati LWC na stran aplikacije, domačo stran in stran za snemanje. V vseh scenarijih smo za boljšo predstavo uporabili iste primere. Prepričajte se, da je »isExposed« resničen. V nasprotnem primeru komponenta ni vidna v Salesforce Org. V tem celotnem priročniku smo za razvoj kode uporabili urejevalnik Lightning Studio (Beta). Na začetku tega priročnika so razloženi vsi koraki za prenos in uporabo tega urejevalnika.