Bemutatjuk a Lightning Studio bővítményt
A Lightning Studio egyszerűen és leggyorsabban építi fel a Salesforce LWC fejlesztést. Ebben a szerkesztőben közvetlenül létrehozhatjuk az Apex/üzenetcsatornákat és az LWC szkripteket. Ezenkívül az LWC (egyéni) komponenseket egy lépésben közvetlenül telepíthetjük. Nézzük meg, hogyan adhatjuk hozzá ezt a weboldalunkhoz és nyissa meg.
Nyissa meg a webhelyet, és keresse meg a „Lightning Studio – Chrome hozzáadása” kifejezést (ha Chrome-ot használ). Kattintson a „Hozzáadás a Chrome-hoz” gombra.
Láthatjuk, hogy hozzáadták a Chrome-hoz. Most le van tiltva. Csak akkor lesz engedélyezve, ha a Salesforce Org meg van nyitva.
A Salesforce Orgba való bejelentkezés után engedélyezhető.
Kattintson a bővítményre.
Menjen balra, és válassza ki a harmadik ikont, amely egy új LWC komponens létrehozására szolgál.
- Először is meg kell adnunk az összetevő nevét.
- Az „isExposed” az összetevők láthatóságának beállítására szolgál a Salesforce-ban. Igazra kell állítani.
- Fontos meghatározni azt a célt, ahová a komponenst el kell helyezni. Több célpont is kiválasztható.
- Az összetevő telepítése az utolsó lépés (kattintson a „Deploy” gombra).
1. példa: Hozzáadás a rekordoldalhoz
Ebben a forgatókönyvben létrehozzuk a „firstComponent” LWC-szkriptet, amely megjeleníti a „Hozzáadva a rekord oldalához” szöveget, és hozzáadjuk ezt az összetevőt az „Account Record” oldalhoz. A „firstComponent.js-meta.xml” fájlban a célt lightning__RecordPage-ként kell megadnunk.
Kódszerkezet:
firstComponent.html
< sablon >< villám-kártya változat = 'Keskeny' cím = 'Linux' >
< p >> Hozzáadva a Felvétel oldalhoz p >
villám-kártya >
sablon >
firstComponent.js
import { Villámelem } tól től 'szerencse' ;export alapértelmezett osztály FirstComponent kiterjeszti a LightningElement elemet {
}
firstComponent.js-meta.xml
< ?xml változat = '1.0' ? >< LightningComponentBundle xmlns = 'http://soap.sforce.com/2006/04/metadata' >
< apiVersion > 57,0 apiVersion >
< isExposed > igaz isExposed >
< célpontok >
< cél > villám__RecordPage cél >
célpontok >
LightningComponentBundle >
Összetevő hozzáadása:
Lépjen a Salesforce Orgba, és keresse meg a „Sales” alkalmazást az Alkalmazásindító alatt.
Nyissa meg bármelyik fiókrekordot a „Fiókok” lapra lépve. Lépjen a fogaskerék ikonra, és válassza az „Oldal szerkesztése” lehetőséget.
Most menjen balra, és keresse meg az összetevőjét.
Húzza az összetevőt, és helyezze a „Kiemelések panel” alá.
Kattintson az „Aktiválás” gombra, és rendelje hozzá a szervezet alapértelmezettként. Végül mentse el a rekordoldalt.
Kész. Most lépjen vissza az „Értékesítési” alkalmazás oldalára, és lépjen a „Számlarekordhoz” (bármilyen rekord). Láthatja, hogy az egyéni összetevő hozzáadásra került.
2. példa: Hozzáadás a kezdőlaphoz
Használjuk az „első komponenst”. Módosítsa a bekezdés szövegét „Hozzáadva a kezdőlaphoz” értékre a HTML-fájlban. Adja meg a célt „lightning__HomePage”-ként a „firstComponent.js-meta.xml” fájlban.
firstComponent.html
< p > Hozzáadva a kezdőlaphoz < / p >
< / villámkártya>
< / sablon>
firstComponent.js-meta.xml
változat = '1.0' ?>< / célpontok>
< / LightningComponentBundle>
Összetevő hozzáadása:
Lépjen az „Értékesítés” alkalmazásba, és kattintson a „Főoldal” fülre.
Kattintson a fogaskerék ikon alatt elérhető szerkesztési oldalra. Keresse meg az összetevőt, és helyezze a „Teljesítmény” összetevő fölé. Mentse el az oldalt.
Frissítse az „Értékesítési főoldal” lapot.
Láthatjuk, hogy az összetevőnk felkerült a kezdőlapra.
3. példa: Hozzáadás az alkalmazásoldalhoz
Használjuk az „első komponenst”. Módosítsa a bekezdés szövegét a „Hozzáadva az alkalmazásoldalhoz” értékre a HTML-fájlban. Adja meg a célt „lightning__AppPage”-ként a „firstComponent.js-meta.xml” fájlban.
firstComponent.html
< sablon >< villám-kártya változat = 'Keskeny' cím = 'Linux' >
< p > Hozzáadva az alkalmazás oldalához p >
villám-kártya >
sablon >
firstComponent.js-meta.xml
változat = '1.0' ?>< / célpontok>
< / LightningComponentBundle>
Összetevő hozzáadása:
Először is létre kell hoznunk egy alkalmazásoldalt a Salesforce-ban a Lightning App Builder segítségével. Keresse meg a „Lightning App Builder” kifejezést a „Gyorskeresés” részben, és kattintson az „Új” gombra egy új villámoldal létrehozásához.
Válassza ki az Alkalmazás oldalt, és lépjen a „Tovább” gombra.
Adja meg a „Linuxhint App” címkét, és lépjen a „Tovább” elemre.
Jelenleg csak egy régióra van szükségünk az összetevő elhelyezéséhez. Tehát válassza az „Egy régió” lehetőséget, és kattintson a „Kész” gombra.
Most húzza a „firstComponent”-t az oldalra, és mentse el az oldalt.
Megjelenik egy felugró ablak, amelyben aktiválni kell az oldalt. Kattintson az „Aktiválás” gombra.
Ezt követően hozzá kell adnia egy oldalt az alkalmazáshoz. Lépjen a „VILLÁMÉLMÉNY” fülre, és tegye ezt. Mentse el ezt az aktiválást.
Most lépjen az Alkalmazásindítóba, és keresse meg a „Linuxhint App” kifejezést. Láthatja, hogy az összetevő felkerült az App oldalra.
Következtetés
Most már megértjük, hogyan adhatjuk hozzá az LWC-t az alkalmazásoldalhoz, a kezdőlaphoz és a felvétel oldalhoz. Minden esetben ugyanazokat a példákat használtuk, hogy jobb képet kapjunk. Győződjön meg arról, hogy az „isExposed” igaz. Ellenkező esetben az összetevő nem látható a Salesforce Orgban. Ebben a teljes útmutatóban a Lightning Studio (Béta) szerkesztőt használtuk a kód fejlesztéséhez. A szerkesztő letöltésének és használatának minden lépését az útmutató elején ismertetjük.