Esittelyssä Lightning Studio -laajennus
Lightning Studio rakentaa Salesforce LWC -kehityksen helposti ja nopeimmin. Tässä editorissa voimme luoda suoraan Apex-/viestikanavat ja LWC-skriptit. Voimme myös ottaa LWC (mukautetut) komponentit suoraan käyttöön yhdellä kertaa. Katsotaan kuinka lisätä tämä verkkosivustollemme ja avata se.
Siirry verkkosivustolle ja etsi 'Lightning Studio – Lisää Chrome' (jos käytät Chromea). Napsauta 'Lisää Chromeen' -painiketta.
Näemme, että se on lisätty Chromeen. Nyt se on poistettu käytöstä. Se otetaan käyttöön vain, jos Salesforce Org on avattu.
Se otetaan käyttöön Salesforce-organisaatioon kirjautumisen jälkeen.
Napsauta laajennusta.
Siirry vasemmalle ja valitse kolmas kuvake, jota käytetään uuden LWC-komponentin luomiseen.
- Ensin meidän on määritettävä komponentin nimi.
- 'isExposed'-arvoa käytetään määrittämään komponenttien näkyvyys Salesforcessa. Se on asetettava todeksi.
- On tärkeää määrittää kohde, johon komponentti sijoitetaan. Voit valita useita kohteita.
- Komponentin käyttöönotto on viimeinen vaihe (napsauta 'Ota käyttöön').
Esimerkki 1: Lisääminen tietuesivulle
Tässä skenaariossa luomme 'firstComponent' LWC-komentosarjan, joka näyttää 'Lisätty tietuesivulle' -tekstin ja lisäämme tämän komponentin 'Account Record' -sivulle. Tiedostossa 'firstComponent.js-meta.xml' meidän on määritettävä kohteeksi lightning__RecordPage.
Koodirakenne:
firstComponent.html
< sapluuna >< salama-kortti variantti = 'Kapea' otsikko = 'Linux' >
< s >> Lisätty Record-sivulle s >
salama-kortti >
sapluuna >
firstComponent.js
tuonti { Salamaelementti } alkaen 'onnea' ;viedä oletusluokka FirstComponent laajentaa LightningElementin {
}
firstComponent.js-meta.xml
< ?xml versio = '1.0' ? >< LightningComponent Bundle xmlns = 'http://soap.sforce.com/2006/04/metadata' >
< apiVersion > 57,0 apiVersion >
< on Paljastettu > totta on Paljastettu >
< tavoitteita >
< kohde > salama__RecordPage kohde >
tavoitteita >
LightningComponent Bundle >
Komponentin lisääminen:
Siirry Salesforce-organisaatioon ja etsi 'Sales' -sovellus App Launcher -sovelluksen alta.
Avaa mikä tahansa tilitietue siirtymällä 'Tilit'-välilehteen. Siirry rataskuvakkeeseen ja valitse 'Muokkaa sivua'.
Siirry nyt vasemmalle ja etsi komponenttisi.
Vedä komponenttia ja aseta se 'Kohokohdat-paneelin' alle.
Napsauta 'Aktivoi' ja määritä se organisaation oletusasetukseksi. Tallenna lopuksi tietuesivu.
Se on tehty. Palaa nyt 'Myynti'-sovellussivulle ja siirry 'Tilitietueeseen' (mikä tahansa tietue). Voit nähdä, että mukautettu komponentti on lisätty.
Esimerkki 2: Lisääminen kotisivulle
Hyödynnetään 'ensimmäistä komponenttia'. Muokkaa kappaleen tekstiä 'Lisätty etusivulle' HTML-tiedostossa. Määritä kohteeksi 'lightning__HomePage' tiedostossa 'firstComponent.js-meta.xml'.
firstComponent.html
< s > Lisätty etusivulle < / s >
< / salamakortti>
< / malli>
firstComponent.js-meta.xml
versio = '1.0' ?>< / tavoitteet>
< / LightningComponentBundle>
Komponentin lisääminen:
Siirry 'Sales' -sovellukseen ja napsauta 'Etusivu' -välilehteä.
Napsauta rataskuvakkeen alla olevaa muokkaussivua. Etsi komponentti ja aseta se Performance-komponentin yläpuolelle. Tallenna sivu.
Päivitä 'Sales Home' -välilehti.
Näemme, että komponenttimme on lisätty etusivulle.
Esimerkki 3: Lisääminen sovellussivulle
Hyödynnetään 'ensimmäistä komponenttia'. Muokkaa kappaleen tekstiä 'Lisätty sovellussivulle' HTML-tiedostossa. Määritä kohteeksi 'lightning__AppPage' tiedostossa 'firstComponent.js-meta.xml'.
firstComponent.html
< sapluuna >< salama-kortti variantti = 'Kapea' otsikko = 'Linux' >
< s > Lisätty sovellussivulle s >
salama-kortti >
sapluuna >
firstComponent.js-meta.xml
versio = '1.0' ?>< / tavoitteet>
< / LightningComponentBundle>
Komponentin lisääminen:
Ensin meidän on luotava sovellussivu Salesforcessa Lightning App Builderin avulla. Etsi 'Pikahaku'-kohdasta 'Lightning App Builder' ja napsauta 'Uusi' luodaksesi uuden salamasivun.
Valitse sovellussivu ja siirry kohtaan 'Seuraava'.
Anna tunnisteeksi 'Linuxhint App' ja siirry kohtaan 'Seuraava'.
Toistaiseksi tarvitsemme vain yhden alueen komponentin sijoittamiseen. Joten valitse 'Yksi alue' ja napsauta 'Valmis'.
Vedä nyt 'firstComponent' sivulle ja tallenna sivu.
Näkyviin tulee ponnahdusikkuna, jossa sivu on aktivoitava. Napsauta 'Aktivoi'.
Tämän jälkeen sinun on lisättävä sivu sovellukseen. Siirry 'LIGHTNING EXPERIENCE' -välilehteen ja tee tämä. Tallenna tämä aktivointi.
Siirry nyt App Launcheriin ja etsi 'Linuxhint App'. Näet, että komponenttimme on lisätty sovellussivulle.
Johtopäätös
Nyt pystymme ymmärtämään, kuinka LWC lisätään sovellussivulle, kotisivulle ja tietuesivulle. Kaikissa skenaarioissa käytimme samoja esimerkkejä saadaksemme paremman käsityksen. Varmista, että 'isExposed' on totta. Muussa tapauksessa komponentti ei näy Salesforce-organisaatiossa. Tässä koko oppaassa käytimme Lightning Studio (Beta) -editoria koodin kehittämiseen. Kaikki tämän editorin lataamisen ja käytön vaiheet selitetään tämän oppaan alussa.