LWC komponendi lisamine Salesforce'i

Lwc Komponendi Lisamine Salesforce I



Selles juhendis arutame, kuidas lisada Lightning Web Component Salesforce'i kirje/avalehe/rakenduse lehele. Nagu me teame, tähistab LWC Lightning Web Component, mis on Salesforce'i põhiline kohandamine, mida kasutatakse atraktiivsete veebilehtede loomiseks. Samuti kasutame LWC skriptide loomiseks ja täitmiseks Lightning Studio platvormi.

Tutvustame Lightning Studio laiendust

Lightning Studio loob Salesforce LWC arenduse lihtsaks ja kiireimaks. Selles redaktoris saame otse luua Apexi / sõnumikanaleid ja LWC skripte. Samuti saame LWC (kohandatud) komponendid otse ühe korraga juurutada. Vaatame, kuidas seda oma veebisaidile lisada ja avada.

Minge veebisaidile ja otsige 'Lightning Studio – Lisa Chrome' (kui kasutate Chrome'i). Klõpsake nuppu 'Lisa Chrome'i'.









Näeme, et see on Chrome'i lisatud. Nüüd on see keelatud. See lubatakse ainult siis, kui Salesforce'i organisatsioon on avatud.







See lubatakse pärast Salesforce'i organisatsiooni sisselogimist.



Klõpsake laiendil.

Minge vasakule ja valige kolmas ikoon, mida kasutatakse uue LWC komponendi loomiseks.

  • Esiteks peame määrama komponendi nime.
  • 'isExposed' kasutatakse komponendi nähtavuse määramiseks Salesforce'is. See tuleb seada tõeseks.
  • Oluline on täpsustada sihtmärk, kuhu komponent paigutatakse. Valida saab mitu sihtmärki.
  • Komponendi juurutamine on viimane samm (klõpsake nuppu 'Juuvita').

Näide 1: Lisamine salvestuslehele

Selle stsenaariumi korral loome LWC skripti 'firstComponent', mis kuvab teksti 'Lisatud kirjele', ja lisame selle komponendi lehele 'Kontokirje'. Failis „firstComponent.js-meta.xml” peame määrama sihtmärgiks lightning__RecordPage.

Koodi struktuur:

firstComponent.html

< malli >
< välk-kaart variant = 'Kitsas' pealkiri = 'Linux' >
< lk >> Lisatud salvestuslehele lk >
välk-kaart >
malli >

firstComponent.js

importida { Välguelement } alates 'õnn' ;
eksportida vaikeklass FirstComponent laiendab LightningElementi {
}

firstComponent.js-meta.xml

< ?xml versioon = '1.0' ? >
< LightningComponent Bundle xmlns = 'http://soap.sforce.com/2006/04/metadata' >
< apiVersion > 57,0 apiVersion >
< isExposed > tõsi isExposed >
< sihtmärgid >
< sihtmärk > välk__RecordPage sihtmärk >
sihtmärgid >
LightningComponent Bundle >

Komponendi lisamine:

Minge Salesforce'i organisatsiooni ja otsige rakenduste käivitaja alt rakendust „Sales”.

Avage mis tahes kontokirje, liikudes vahekaardile „Kontod”. Minge hammasrattaikoonile ja valige 'Muuda lehte'.

Nüüd minge vasakule ja otsige oma komponenti.

Lohistage komponenti ja asetage see 'Esiletõstete paneeli' alla.

Klõpsake nuppu 'Aktiveeri' ja määrake see organisatsiooni vaikeväärtuseks. Lõpuks salvestage salvestusleht.

See on tehtud. Nüüd minge tagasi rakenduse lehele 'Müük' ja minge jaotisse 'Kontokirje' (mis tahes kirje). Näete, et kohandatud komponent on lisatud.

Näide 2: Avalehele lisamine

Kasutame 'esimest komponenti'. Muutke HTML-failis lõigu teksti 'Lisatud avalehele'. Määrake failis 'firstComponent.js-meta.xml' sihtmärgiks 'lightning__HomePage'.

firstComponent.html


= 'Kitsas' pealkiri = 'Linux' >

< lk > Lisatud avalehele < / lk >
< / välk-kaart>
< / mall>

firstComponent.js-meta.xml

versioon
= '1.0' ?>
=
'http://soap.sforce.com/2006/04/metadata' >
57,0 < / apiVersion>
tõene< / isExposed>

lightning__Koduleht< / sihtmärk>
< / sihtmärgid>
< / LightningComponentBundle>

Komponendi lisamine:

Avage rakendus 'Müük' ja klõpsake vahekaarti 'Kodu'.

Klõpsake redigeerimislehel, mis on saadaval hammasrattaikooni all. Otsige üles komponent ja asetage see komponendi „Performance” kohale. Salvestage leht.

Värskendage vahekaarti 'Müügi avaleht'.

Näeme, et meie komponent on avalehele lisatud.

Näide 3: rakenduse lehele lisamine

Kasutame 'esimest komponenti'. Muutke HTML-failis lõigu teksti 'Lisatud rakenduse lehele'. Määrake failis 'firstComponent.js-meta.xml' sihtmärgiks 'lightning__AppPage'.

firstComponent.html

< malli >
< välk-kaart variant = 'Kitsas' pealkiri = 'Linux' >
< lk > Lisatud rakenduse lehele lk >
välk-kaart >
malli >

firstComponent.js-meta.xml

versioon = '1.0' ?>

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

57,0 < / apiVersion>
tõsi < / isExposed>

lightning__AppPage < / sihtmärk>
< / sihtmärgid>
< / LightningComponentBundle>

Komponendi lisamine:

Esiteks peame Lightning App Builderi abil looma Salesforce'is rakenduse lehe. Otsige kiirotsingust 'Lightning App Builder' ja klõpsake uue välgulehe loomiseks nuppu 'Uus'.

Valige rakenduse leht ja minge jaotisse 'Järgmine'.

Määrake silt 'Linuxhint App' ja minge 'Järgmine'.

Praeguse seisuga vajame komponendi paigutamiseks ainult ühte piirkonda. Seega valige 'Üks piirkond' ja klõpsake 'Valmis'.

Nüüd lohistage 'firstComponent' lehele ja salvestage leht.

Ilmub hüpikaken, kus leht tuleb aktiveerida. Klõpsake nuppu 'Aktiveeri'.

Pärast seda peate rakendusele lisama lehe. Minge vahekaardile 'VÄLGUKOGEMUS' ja tehke seda. Salvestage see aktiveerimine.

Nüüd minge rakenduste käivitajasse ja otsige 'Linuxhint App'. Näete, et meie komponent on lisatud rakenduse lehele.

Järeldus

Nüüd saame aru, kuidas lisada LWC rakenduse lehele, avalehele ja salvestuslehele. Kõigi stsenaariumide puhul kasutasime parema ettekujutuse saamiseks samu näiteid. Veenduge, et 'isExposed' on tõene. Vastasel juhul pole komponent Salesforce'i organisatsioonis nähtav. Kogu selles juhendis kasutasime koodi väljatöötamiseks Lightning Studio (Beta) redaktorit. Kõiki samme selle redaktori allalaadimiseks ja kasutamiseks selgitatakse selle juhendi alguses.