Przedstawiamy rozszerzenie Lightning Studio
Lightning Studio buduje oprogramowanie Salesforce LWC łatwo i najszybciej. W tym edytorze możemy bezpośrednio tworzyć kanały Apex/message i skrypty LWC. Możemy również bezpośrednio wdrożyć komponenty LWC (niestandardowe) za jednym razem. Zobaczmy, jak dodać to do naszej witryny i otworzyć.
Wejdź na stronę i wyszukaj „Lightning Studio – Add Chrome” (jeśli używasz Chrome). Kliknij przycisk „Dodaj do Chrome”.
Widzimy, że jest dodawany do Chrome. Teraz jest wyłączony. Włączy się tylko wtedy, gdy otwarta jest organizacja Salesforce.
Włącza się po zalogowaniu do Salesforce Org.
Kliknij rozszerzenie.
Przejdź w lewo i wybierz trzecią ikonę, która służy do tworzenia nowego komponentu LWC.
- Najpierw musimy określić nazwę komponentu.
- Opcja „isExposed” służy do ustawiania widoczności komponentu w Salesforce. Musi być ustawiony na true.
- Istotne jest określenie celu, w którym element ma zostać umieszczony. Można wybrać wiele celów.
- Wdrożenie komponentu jest ostatnim krokiem (kliknij „Wdrażaj”).
Przykład 1: Dodawanie do strony rekordu
W tym scenariuszu tworzymy skrypt LWC „firstComponent”, który wyświetla tekst „Dodano do strony rekordu” i dodajemy ten składnik do strony „Rekord konta”. W pliku „firstComponent.js-meta.xml” musimy określić cel jako lightning__RecordPage.
Struktura kodu:
pierwszyKomponent.html
< szablon >< karta-błyskawica wariant = 'Wąski' tytuł = „Linux” >
< P >> Dodano do strony rekordu P >
karta-błyskawica >
szablon >
pierwszyKomponent.js
import { Element Błyskawicy } z 'szczęście' ;eksport domyślna klasa FirstComponent rozszerza LightningElement {
}
pierwszyKomponent.js-meta.xml
< xml wersja = „1,0” ? >< LightningComponentBundle xmlns = 'http://soap.sforce.com/2006/04/metadata' >
< apiVersion > 57,0 apiVersion >
< jest narażony > PRAWDA jest narażony >
< cele >
< cel > błyskawica__RekordStrona cel >
cele >
LightningComponentBundle >
Dodawanie komponentu:
Przejdź do organizacji Salesforce i wyszukaj aplikację „Sales” w menu z aplikacjami.
Otwórz dowolny rekord konta, przechodząc do zakładki „Rachunki”. Przejdź do ikony koła zębatego i wybierz „Edytuj stronę”.
Teraz przejdź w lewo i wyszukaj swój komponent.
Przeciągnij komponent i umieść go poniżej „Panelu Najciekawszych”.
Kliknij „Aktywuj” i przypisz go jako domyślną organizację. Na koniec zapisz stronę rekordu.
Zrobione. Teraz wróć do strony aplikacji „Sprzedaż” i przejdź do „Rekordu konta” (dowolny rekord). Możesz zobaczyć, że komponent niestandardowy został dodany.
Przykład 2: Dodawanie do strony głównej
Wykorzystajmy „firstComponent”. Zmodyfikuj tekst akapitu jako „Dodano do strony głównej” w pliku HTML. Określ cel jako „lightning__HomePage” w pliku „firstComponent.js-meta.xml”.
pierwszyKomponent.html
< P > Dodano do strony głównej < / P >
< / karta-błyskawicy>
< / szablon>
pierwszyKomponent.js-meta.xml
wersja = „1,0” ?>< / cele>
< / LightningComponentBundle>
Dodawanie komponentu:
Przejdź do aplikacji „Sprzedaż” i kliknij zakładkę „Strona główna”.
Kliknij stronę edycji dostępną pod ikoną koła zębatego. Wyszukaj komponent i umieść go nad komponentem „Wydajność”. Zapisz stronę.
Odśwież zakładkę „Strona główna sprzedaży”.
Widzimy, że nasz komponent został dodany do strony głównej.
Przykład 3: Dodawanie do strony aplikacji
Wykorzystajmy „firstComponent”. Zmodyfikuj tekst akapitu jako „Dodano do strony aplikacji” w pliku HTML. Określ cel jako „lightning__AppPage” w pliku „firstComponent.js-meta.xml”.
pierwszyKomponent.html
< szablon >< karta-błyskawica wariant = 'Wąski' tytuł = „Linux” >
< P > Dodano do strony aplikacji P >
karta-błyskawica >
szablon >
pierwszyKomponent.js-meta.xml
wersja = „1,0” ?>< / cele>
< / LightningComponentBundle>
Dodawanie komponentu:
Najpierw musimy utworzyć stronę aplikacji w Salesforce za pomocą Lightning App Builder. Wyszukaj „Lightning App Builder” w „Szybkim wyszukiwaniu” i kliknij „Nowy”, aby utworzyć nową stronę Lightning.
Wybierz stronę aplikacji i przejdź do „Dalej”.
Podaj etykietę jako „Linuxhint App” i przejdź do „Dalej”.
Na razie potrzebujemy tylko jednego regionu, aby umieścić komponent. Wybierz „Jeden region” i kliknij „Gotowe”.
Teraz przeciągnij „firstComponent” na stronę i zapisz stronę.
Pojawi się wyskakujące okienko, w którym strona musi zostać aktywowana. Kliknij „Aktywuj”.
Następnie musisz dodać stronę do aplikacji. Przejdź do zakładki „LIGHTNING EXPERIENCE” i zrób to. Zapisz tę aktywację.
Teraz przejdź do programu uruchamiającego aplikacje i wyszukaj „Aplikacja Linux”. Możesz zobaczyć, że nasz komponent został dodany do strony aplikacji.
Wniosek
Teraz jesteśmy w stanie zrozumieć, jak dodać LWC do strony aplikacji, strony głównej i strony rekordu. We wszystkich scenariuszach używaliśmy tych samych przykładów, aby uzyskać lepszy pomysł. Upewnij się, że „isExposed” jest prawdziwe. W przeciwnym razie komponent nie będzie widoczny w Salesforce Org. W całym tym przewodniku wykorzystaliśmy edytor Lightning Studio (Beta) do opracowania kodu. Na początku tego przewodnika wyjaśniono wszystkie kroki, jak pobrać i używać tego edytora.