Presentació de l'extensió Lightning Studio
Lightning Studio crea el desenvolupament de Salesforce LWC de manera fàcil i ràpida. Dins d'aquest editor, podem crear directament els canals Apex/missatge i els scripts LWC. A més, podem desplegar directament els components LWC (personalitzats) d'una sola vegada. Vegem com afegir-ho al nostre lloc web i obrir-lo.
Aneu al lloc web i cerqueu 'Lightning Studio - Afegeix Chrome' (si feu servir Chrome). Feu clic al botó 'Afegeix a Chrome'.
Podem veure que s'afegeix a Chrome. Ara, està desactivat. Només s'habilitarà si s'obre l'organització de Salesforce.
S'habilita després d'iniciar sessió a Salesforce Org.
Feu clic a l'extensió.
Aneu a l'esquerra i seleccioneu la tercera icona que s'utilitza per crear un nou component LWC.
- En primer lloc, hem d'especificar el nom del component.
- El 'isExposed' s'utilitza per establir la visibilitat del component a Salesforce. S'ha de configurar com a vertader.
- És important especificar l'objectiu on s'ha de col·locar el component. Es poden seleccionar diversos objectius.
- La implementació del component és el pas final (feu clic a 'Desplega').
Exemple 1: Addició a la pàgina de registre
En aquest escenari, creem l'script LWC 'firstComponent' que mostra el text 'Afegit a la pàgina de registre' i afegim aquest component a la pàgina 'Registre del compte'. Al fitxer 'firstComponent.js-meta.xml', hem d'especificar l'objectiu com a lightning__RecordPage.
Estructura del codi:
firstComponent.html
< plantilla >< targeta-llamp variant = 'estret' títol = 'Linux' >
< pàg >> S'ha afegit a la pàgina Registre pàg >
targeta-llamp >
plantilla >
firstComponent.js
importar { Element Lightning } des de 'sort' ;exportar La classe per defecte FirstComponent amplia LightningElement {
}
firstComponent.js-meta.xml
< ?xml versió = '1.0' ? >< LightningComponentBundle xmlns = 'http://soap.sforce.com/2006/04/metadata' >
< apiVersion > 57.0 apiVersion >
< està exposat > veritat està exposat >
< objectius >
< objectiu > lightning__RecordPage objectiu >
objectius >
LightningComponentBundle >
Afegir un component:
Aneu a l'organització de Salesforce i cerqueu l'aplicació 'Vendes' al menú d'aplicacions.
Obriu qualsevol registre de compte navegant a la pestanya 'Comptes'. Aneu a la icona d'engranatge i seleccioneu 'Edita la pàgina'.
Ara, aneu a l'esquerra i cerqueu el vostre component.
Arrossegueu el component i col·loqueu-lo a sota del 'Tauler Destacats'.
Feu clic a 'Activa' i assigneu-lo com a organització predeterminada. Finalment, deseu la pàgina de registre.
Està fet. Ara, torneu a la pàgina de l'aplicació 'Vendes' i aneu al 'Registre del compte' (qualsevol registre). Podeu veure que s'afegeix el component personalitzat.
Exemple 2: Afegeix a la pàgina d'inici
Utilitzem el 'primer component'. Modifiqueu el text del paràgraf com a 'Afegit a la pàgina d'inici' al fitxer HTML. Especifiqueu l'objectiu com a 'lightning__HomePage' al fitxer 'firstComponent.js-meta.xml'.
firstComponent.html
< pàg > S'ha afegit a la pàgina d'inici < / pàg >
< / targeta-llamp>
< / plantilla>
firstComponent.js-meta.xml
versió = '1.0' ?>< / objectius>
< / LightningComponentBundle>
Afegir un component:
Aneu a l'aplicació 'Ventes' i feu clic a la pestanya 'Inici'.
Feu clic a la pàgina d'edició disponible sota la icona d'engranatge. Cerqueu el component i col·loqueu-lo a sobre del component 'Rendiment'. Desa la pàgina.
Actualitzeu la pestanya 'Inici de vendes'.
Podem veure que el nostre component s'afegeix a la pàgina d'inici.
Exemple 3: Afegeix a la pàgina de l'aplicació
Utilitzem el 'primer component'. Modifiqueu el text del paràgraf com a 'Afegit a la pàgina de l'aplicació' al fitxer HTML. Especifiqueu l'objectiu com a 'lightning__AppPage' al fitxer 'firstComponent.js-meta.xml'.
firstComponent.html
< plantilla >< targeta-llamp variant = 'estret' títol = 'Linux' >
< pàg > S'ha afegit a la pàgina de l'aplicació pàg >
targeta-llamp >
plantilla >
firstComponent.js-meta.xml
versió = '1.0' ?><és exposat> veritat < / està exposat>
< / objectius>
< / LightningComponentBundle>
Afegir un component:
Primer, hem de crear una pàgina d'aplicació a Salesforce mitjançant el Lightning App Builder. Cerqueu 'Lightning App Builder' a la 'Recerca ràpida' i feu clic a 'Nou' per crear una nova pàgina de Lightning.
Trieu la pàgina de l'aplicació i aneu a 'Següent'.
Doneu l'etiqueta com a 'Aplicació Linuxhint' i aneu a 'Següent'.
A partir d'ara, només necessitem una regió per col·locar el component. Per tant, trieu 'Una regió' i feu clic a 'Fet'.
Ara, arrossegueu el 'primer component' a la pàgina i deseu-la.
Apareixerà una finestra emergent en la qual cal activar la pàgina. Feu clic a 'Activar'.
Després d'això, heu d'afegir una pàgina a l'aplicació. Aneu a la pestanya 'LIGHTNING EXPERIENCE' i feu-ho. Desa aquesta activació.
Ara, aneu al menú d'aplicacions i cerqueu 'Aplicació Linuxhint'. Podeu veure que el nostre component s'afegeix a la pàgina de l'aplicació.
Conclusió
Ara, podem entendre com afegir LWC a la pàgina de l'aplicació, la pàgina d'inici i la pàgina de registre. En tots els escenaris, hem utilitzat els mateixos exemples per fer-nos una millor idea. Assegureu-vos que 'isExposed' és cert. En cas contrari, el component no serà visible a l'organització de Salesforce. En tota aquesta guia, hem utilitzat l'editor Lightning Studio (Beta) per desenvolupar el codi. Tots els passos s'expliquen sobre com descarregar i utilitzar aquest editor a l'inici d'aquesta guia.