Vă prezentăm extensia Lightning Studio
Lightning Studio construiește dezvoltarea Salesforce LWC ușor și rapid. În cadrul acestui editor, putem crea direct canalele Apex/message și scripturile LWC. De asemenea, putem implementa direct componentele LWC (personalizate) dintr-o singură mișcare. Să vedem cum să adăugăm acest lucru pe site-ul nostru și să îl deschidem.
Accesați site-ul web și căutați „Lightning Studio – Adăugați Chrome” (dacă utilizați Chrome). Faceți clic pe butonul „Adăugați la Chrome”.
Putem vedea că este adăugat la Chrome. Acum, este dezactivat. Se va activa numai dacă organizația Salesforce este deschisă.
Este activat după conectarea la Salesforce Org.
Faceți clic pe extensie.
Mergeți la stânga și selectați a treia pictogramă care este utilizată pentru a crea o nouă componentă LWC.
- În primul rând, trebuie să specificăm numele componentei.
- „isExposed” este folosit pentru a seta vizibilitatea componentei în Salesforce. Trebuie setat la adevărat.
- Este important să specificați ținta în care urmează să fie plasată componenta. Pot fi selectate mai multe ținte.
- Implementarea componentei este pasul final (faceți clic pe „Deploy”).
Exemplul 1: Adăugarea la pagina de înregistrare
În acest scenariu, creăm scriptul LWC „firstComponent” care afișează textul „Adăugat la pagina de înregistrare” și adăugăm această componentă la pagina „Înregistrare cont”. În fișierul „firstComponent.js-meta.xml”, trebuie să specificăm ținta ca lightning__RecordPage.
Structura codului:
firstComponent.html
< șablon >< carte-fulger variantă = 'Îngust' titlu = 'Linux' >
< p >> Adăugat la pagina Înregistrare p >
carte-fulger >
șablon >
firstComponent.js
import { LightningElement } din 'noroc' ;export clasa implicită FirstComponent extinde LightningElement {
}
firstComponent.js-meta.xml
< ?xml versiune = „1.0” ? >< LightningComponentBundle xmlns = „http://soap.sforce.com/2006/04/metadata” >
< apiVersion > 57,0 apiVersion >
< este Expus > Adevărat este Expus >
< tinte >
< ţintă > lightning__RecordPage ţintă >
tinte >
LightningComponentBundle >
Adăugarea unei componente:
Accesați organizația Salesforce și căutați aplicația „Vânzări” în Lansatorul de aplicații.
Deschideți orice înregistrare de cont navigând la fila „Conturi”. Accesați pictograma roată și selectați „Editați pagina”.
Acum, mergeți la stânga și căutați componenta dvs.
Trageți componenta și plasați-o sub „Panoul Highlights”.
Faceți clic pe „Activare” și atribuiți-o ca implicită organizație. În cele din urmă, salvați pagina de înregistrare.
Este gata. Acum, reveniți la pagina aplicației „Vânzări” și accesați „Înregistrarea contului” (orice înregistrare). Puteți vedea că componenta personalizată este adăugată.
Exemplul 2: Adăugarea la pagina de pornire
Să folosim „prima componentă”. Modificați textul paragrafului ca „Adăugat la pagina de pornire” în fișierul HTML. Specificați ținta ca „lightning__HomePage” în fișierul „firstComponent.js-meta.xml”.
firstComponent.html
<șablon>< p > Adăugat la pagina de pornire < / p >
< / carte-fulger>
< / șablon>
firstComponent.js-meta.xml
versiune = „1.0” ?><ținte>
< / tinte>
< / LightningComponentBundle>
Adăugarea unei componente:
Accesați aplicația „Vânzări” și faceți clic pe fila „Acasă”.
Faceți clic pe pagina de editare disponibilă sub pictograma roată. Căutați componenta și plasați-o deasupra componentei „Performanță”. Salvați pagina.
Actualizează fila „Acasă de vânzări”.
Putem vedea că componenta noastră este adăugată la pagina de pornire.
Exemplul 3: Adăugarea la pagina de aplicație
Să folosim „prima componentă”. Modificați textul paragrafului ca „Adăugat la pagina aplicației” în fișierul HTML. Specificați ținta ca „lightning__AppPage” în fișierul „firstComponent.js-meta.xml”.
firstComponent.html
< șablon >< carte-fulger variantă = 'Îngust' titlu = 'Linux' >
< p > Adăugat pe pagina aplicației p >
carte-fulger >
șablon >
firstComponent.js-meta.xml
versiune = „1.0” ?><ținte>
<țintă> lightning__AppPage < / tinta>
< / tinte>
< / LightningComponentBundle>
Adăugarea unei componente:
Mai întâi, trebuie să creăm o pagină de aplicație în Salesforce folosind Lightning App Builder. Căutați „Lightning App Builder” în „Quick Find” și faceți clic pe „Nou” pentru a crea o nouă pagină Lightning.
Alegeți pagina aplicației și accesați „Următorul”.
Dați eticheta „Linuxhint App” și mergeți la „Next”.
De acum, avem nevoie de o singură regiune pentru a plasa componenta. Deci, alegeți „O regiune” și faceți clic pe „Terminat”.
Acum, trageți „firstComponent” în pagină și salvați pagina.
Va apărea o fereastră pop-up în care pagina trebuie să fie activată. Faceți clic pe „Activați”.
După aceea, trebuie să adăugați o pagină în aplicație. Accesați fila „EXPERIENTĂ LIGHTNING” și faceți acest lucru. Salvați această activare.
Acum, mergeți la Lansatorul de aplicații și căutați „Linuxhint App”. Puteți vedea că componenta noastră este adăugată la pagina Aplicație.
Concluzie
Acum, putem înțelege cum să adăugați LWC la pagina de aplicație, pagina de pornire și pagina de înregistrare. În toate scenariile, am folosit aceleași exemple pentru a ne face o idee mai bună. Asigurați-vă că „isExposed” este adevărat. În caz contrar, componenta nu este vizibilă în Salesforce Org. În întregul ghid, am folosit editorul Lightning Studio (Beta) pentru a dezvolta codul. Toți pașii sunt explicați despre cum să descărcați și să utilizați acest editor la începutul acestui ghid.