Presentazione dell'estensione Lightning Studio
Lightning Studio crea lo sviluppo di Salesforce LWC in modo facile e veloce. All'interno di questo editor, possiamo creare direttamente i canali Apex/message e gli script LWC. Inoltre, possiamo distribuire direttamente i componenti LWC (personalizzati) in una volta sola. Vediamo come aggiungerlo al nostro sito Web e aprirlo.
Vai al sito Web e cerca 'Lightning Studio - Aggiungi Chrome' (se utilizzi Chrome). Fai clic sul pulsante 'Aggiungi a Chrome'.
Possiamo vedere che è stato aggiunto a Chrome. Ora è disabilitato. Si abiliterà solo se l'organizzazione Salesforce è aperta.
Viene abilitato dopo l'accesso all'organizzazione Salesforce.
Fare clic sull'estensione.
Andare a sinistra e selezionare la terza icona utilizzata per creare un nuovo componente LWC.
- Innanzitutto, dobbiamo specificare il nome del componente.
- 'isExposed' viene utilizzato per impostare la visibilità del componente in Salesforce. Deve essere impostato su true.
- È importante specificare la destinazione in cui posizionare il componente. È possibile selezionare più target.
- La distribuzione del componente è il passaggio finale (fare clic su 'Distribuisci').
Esempio 1: aggiunta alla pagina dei record
In questo scenario, creiamo lo script LWC 'firstComponent' che visualizza il testo 'Aggiunto alla pagina Record' e aggiungiamo questo componente alla pagina 'Record account'. Nel file 'firstComponent.js-meta.xml', dobbiamo specificare la destinazione come lightning__RecordPage.
Struttura del codice:
firstComponent.html
< modello >< carta fulmine variante = 'Stretto' titolo = 'Linux' >
< P >> Aggiunto alla pagina Record P >
carta fulmine >
modello >
firstComponent.js
importare { LightningElement } da 'fortuna' ;esportare la classe predefinita FirstComponent estende LightningElement {
}
firstComponent.js-meta.xml
< ?xml versione = '1.0' ? >< FulmineComponentBundle xmlns = 'http://soap.sforce.com/2006/04/metadata' >
< apiVersione > 57.0 apiVersione >
< è esposto > VERO è esposto >
< bersagli >
< bersaglio > lightning__RecordPage bersaglio >
bersagli >
FulmineComponentBundle >
Aggiunta di un componente:
Vai all'organizzazione Salesforce e cerca l'app 'Vendite' in Avvio applicazioni.
Apri qualsiasi record dell'account accedendo alla scheda 'Account'. Vai sull'icona dell'ingranaggio e seleziona 'Modifica pagina'.
Ora vai a sinistra e cerca il tuo componente.
Trascina il componente e posizionalo sotto il 'Pannello Highlights'.
Fai clic su 'Attiva' e assegnalo come predefinito dell'organizzazione. Infine, salva la pagina del record.
E 'fatto. Ora, torna alla pagina dell'app 'Vendite' e vai al 'Record account' (qualsiasi record). Puoi vedere che il componente personalizzato è stato aggiunto.
Esempio 2: aggiunta alla home page
Utilizziamo il 'primo componente'. Modificare il testo del paragrafo come 'Aggiunto alla home page' nel file HTML. Specificare la destinazione come 'lightning__HomePage' nel file 'firstComponent.js-meta.xml'.
firstComponent.html
< P > Aggiunto alla pagina iniziale < / P >
< / carta-fulmini>
< / modello>
firstComponent.js-meta.xml
versione = '1.0' ?>< / obiettivi>
< / LightningComponentBundle>
Aggiunta di un componente:
Vai all'app 'Vendite' e fai clic sulla scheda 'Home'.
Fai clic sulla pagina di modifica disponibile sotto l'icona a forma di ingranaggio. Cerca il componente e posizionalo sopra il componente 'Performance'. Salva la pagina.
Aggiorna la scheda 'Sales Home'.
Possiamo vedere che il nostro componente è stato aggiunto alla Home page.
Esempio 3: aggiunta alla pagina dell'app
Utilizziamo il 'primo componente'. Modifica il testo del paragrafo come 'Aggiunto alla pagina dell'app' nel file HTML. Specificare la destinazione come 'lightning__AppPage' nel file 'firstComponent.js-meta.xml'.
firstComponent.html
< modello >< carta fulmine variante = 'Stretto' titolo = 'Linux' >
< P > Aggiunto alla pagina dell'app P >
carta fulmine >
modello >
firstComponent.js-meta.xml
versione = '1.0' ?><èesposto> VERO < / è esposto>
< / obiettivi>
< / LightningComponentBundle>
Aggiunta di un componente:
Innanzitutto, dobbiamo creare una pagina dell'app in Salesforce utilizzando Lightning App Builder. Cerca 'Lightning App Builder' nella 'Ricerca rapida' e fai clic su 'Nuovo' per creare una nuova pagina Lightning.
Scegli la pagina dell'app e vai su 'Avanti'.
Dare l'etichetta come 'Linuxhint App' e andare su 'Avanti'.
A partire da ora, abbiamo solo bisogno di una regione per posizionare il componente. Quindi, scegli 'Una regione' e fai clic su 'Fine'.
Ora trascina il 'firstComponent' sulla pagina e salva la pagina.
Verrà visualizzato un popup in cui la pagina deve essere attivata. Fare clic su 'Attiva'.
Successivamente, è necessario aggiungere una pagina all'app. Vai alla scheda 'ESPERIENZA FULMINE' e fallo. Salva questa attivazione.
Ora vai su App Launcher e cerca 'Linuxhint App'. Puoi vedere che il nostro componente è stato aggiunto alla pagina dell'app.
Conclusione
Ora siamo in grado di capire come aggiungere LWC alla pagina dell'app, alla home page e alla pagina dei record. In tutti gli scenari, abbiamo utilizzato gli stessi esempi per avere un'idea migliore. Assicurati che 'isExposed' sia vero. In caso contrario, il componente non è visibile nell'organizzazione Salesforce. In questa intera guida, abbiamo utilizzato l'editor Lightning Studio (Beta) per sviluppare il codice. Tutti i passaggi sono spiegati su come scaricare e utilizzare questo editor all'inizio di questa guida.