Vorstellung der Lightning Studio-Erweiterung
Lightning Studio erstellt die Salesforce LWC-Entwicklung einfach und schnell. In diesem Editor können wir die Apex-/Nachrichtenkanäle und LWC-Skripte direkt erstellen. Außerdem können wir die LWC-Komponenten (benutzerdefinierte) direkt auf einmal bereitstellen. Sehen wir uns an, wie wir dies zu unserer Website hinzufügen und öffnen.
Gehen Sie zur Website und suchen Sie nach „Lightning Studio – Chrome hinzufügen“ (wenn Sie Chrome verwenden). Klicken Sie auf die Schaltfläche „Zu Chrome hinzufügen“.
Wir können sehen, dass es zu Chrome hinzugefügt wurde. Jetzt ist es deaktiviert. Es wird nur aktiviert, wenn die Salesforce-Organisation geöffnet ist.
Es wird nach der Anmeldung bei der Salesforce-Organisation aktiviert.
Klicken Sie auf die Erweiterung.
Gehen Sie nach links und wählen Sie das dritte Symbol aus, das zum Erstellen einer neuen LWC-Komponente verwendet wird.
- Zuerst müssen wir den Namen der Komponente angeben.
- „isExposed“ wird verwendet, um die Komponentensichtbarkeit in Salesforce festzulegen. Es muss auf true gesetzt sein.
- Es ist wichtig, das Ziel anzugeben, an dem die Komponente platziert werden soll. Es können mehrere Ziele ausgewählt werden.
- Das Bereitstellen der Komponente ist der letzte Schritt (klicken Sie auf „Bereitstellen“).
Beispiel 1: Hinzufügen zur Datensatzseite
In diesem Szenario erstellen wir das LWC-Skript „firstComponent“, das den Text „Zur Datensatzseite hinzugefügt“ anzeigt und fügen diese Komponente zur Seite „Kontodatensatz“ hinzu. In der Datei „firstComponent.js-meta.xml“ müssen wir das Ziel als „lightning__RecordPage“ angeben.
Codestruktur:
ersteKomponente.html
< Vorlage >< Blitzkarte Variante = 'Eng' Titel = „Linux“ >
< P >> Zur Datensatzseite hinzugefügt P >
Blitzkarte >
Vorlage >
firstComponent.js
importieren { LightningElement } aus 'Glück' ;Export Die Standardklasse FirstComponent erweitert LightningElement {
}
firstComponent.js-meta.xml
< ?xml Ausführung = „1,0“ ? >< LightningComponentBundle xmlns = „http://soap.sforce.com/2006/04/metadata“ >
< apiVersion > 57,0 apiVersion >
< ist entblößt > WAHR ist entblößt >
< Ziele >
< Ziel > lightning__RecordPage Ziel >
Ziele >
LightningComponentBundle >
Hinzufügen einer Komponente:
Gehen Sie zur Salesforce-Organisation und suchen Sie im App Launcher nach der „Sales“-App.
Öffnen Sie einen beliebigen Kontodatensatz, indem Sie zur Registerkarte „Konten“ navigieren. Gehen Sie zum Zahnradsymbol und wählen Sie „Seite bearbeiten“.
Gehen Sie nun nach links und suchen Sie nach Ihrer Komponente.
Ziehen Sie die Komponente und platzieren Sie sie unter dem „Highlights-Panel“.
Klicken Sie auf „Aktivieren“ und weisen Sie es als Org-Standard zu. Speichern Sie abschließend die Datensatzseite.
Es ist fertig. Gehen Sie nun zurück zur App-Seite „Verkäufe“ und gehen Sie zum „Kontodatensatz“ (beliebiger Datensatz). Sie können sehen, dass die benutzerdefinierte Komponente hinzugefügt wurde.
Beispiel 2: Zur Startseite hinzufügen
Lassen Sie uns die „firstComponent“ verwenden. Ändern Sie den Absatztext als „Zur Startseite hinzugefügt“ in der HTML-Datei. Geben Sie das Ziel als „lightning__HomePage“ in der Datei „firstComponent.js-meta.xml“ an.
ersteKomponente.html
< P > Zur Startseite hinzugefügt < / P >
< / Blitzkarte>
< / Vorlage>
firstComponent.js-meta.xml
Ausführung = „1,0“ ?>< / Ziele>
< / LightningComponentBundle>
Hinzufügen einer Komponente:
Gehen Sie zur App „Verkäufe“ und klicken Sie auf die Registerkarte „Startseite“.
Klicken Sie auf die Bearbeitungsseite unter dem Zahnradsymbol. Suchen Sie nach der Komponente und platzieren Sie sie über der Komponente „Leistung“. Speichern Sie die Seite.
Aktualisieren Sie die Registerkarte „Verkaufsstartseite“.
Wir können sehen, dass unsere Komponente zur Startseite hinzugefügt wurde.
Beispiel 3: Zur App-Seite hinzufügen
Lassen Sie uns die „firstComponent“ verwenden. Ändern Sie den Absatztext in der HTML-Datei als „Zur App-Seite hinzugefügt“. Geben Sie das Ziel als „lightning__AppPage“ in der Datei „firstComponent.js-meta.xml“ an.
ersteKomponente.html
< Vorlage >< Blitzkarte Variante = 'Eng' Titel = „Linux“ >
< P > Zur App-Seite hinzugefügt P >
Blitzkarte >
Vorlage >
firstComponent.js-meta.xml
Ausführung = „1,0“ ?>< / Ziele>
< / LightningComponentBundle>
Hinzufügen einer Komponente:
Zuerst müssen wir mit dem Lightning App Builder eine App-Seite in Salesforce erstellen. Suchen Sie in der „Schnellsuche“ nach „Lightning App Builder“ und klicken Sie auf „Neu“, um eine neue Lightning-Seite zu erstellen.
Wählen Sie die App-Seite und gehen Sie auf „Weiter“.
Geben Sie als Bezeichnung „Linuxhint App“ ein und gehen Sie auf „Weiter“.
Ab sofort benötigen wir nur noch eine Region, um die Komponente zu platzieren. Wählen Sie also „Eine Region“ und klicken Sie auf „Fertig“.
Ziehen Sie nun die „firstComponent“ auf die Seite und speichern Sie die Seite.
Es erscheint ein Popup, in dem die Seite aktiviert werden muss. Klicken Sie auf „Aktivieren“.
Danach müssen Sie der App eine Seite hinzufügen. Gehen Sie zur Registerkarte „LIGHTNING EXPERIENCE“ und führen Sie dies aus. Speichern Sie diese Aktivierung.
Gehen Sie nun zum App Launcher und suchen Sie nach „Linuxhint App“. Sie können sehen, dass unsere Komponente zur App-Seite hinzugefügt wurde.
Abschluss
Jetzt können wir verstehen, wie man LWC zur App-Seite, Startseite und Datensatzseite hinzufügt. In allen Szenarien haben wir dieselben Beispiele verwendet, um eine bessere Vorstellung zu bekommen. Stellen Sie sicher, dass „isExposed“ wahr ist. Andernfalls ist die Komponente in der Salesforce-Organisation nicht sichtbar. In diesem gesamten Leitfaden haben wir den Lightning Studio (Beta)-Editor zum Entwickeln des Codes verwendet. Alle Schritte zum Herunterladen und Verwenden dieses Editors werden am Anfang dieses Handbuchs erläutert.