Hinzufügen der LWC-Komponente in Salesforce

In dieser Anleitung besprechen wir, wie man die Lightning Web Component zur Salesforce-Datensatz-/Homepage-/App-Seite hinzufügt. Wie wir wissen, steht LWC für Lightning Web Component, die zentrale Anpassung von Salesforce, die zum Erstellen attraktiver Webseiten verwendet wird. Außerdem werden wir die Lightning Studio-Plattform verwenden, um die LWC-Skripte zu erstellen und auszuführen.

Einführung der Lightning Studio-Erweiterung

Lightning Studio ermöglicht 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 Komponenten) direkt in einem Schritt bereitstellen. Sehen wir uns an, wie wir dies zu unserer Website hinzufügen und öffnen.

Gehen Sie auf die 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 wird.

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, mit dem eine neue LWC-Komponente erstellt wird.

  • Zuerst müssen wir den Namen der Komponente angeben.
  • „isExposed“ wird verwendet, um die Komponentensichtbarkeit in Salesforce festzulegen. Es muss auf „true“ gesetzt werden.
  • Wichtig ist, dass Sie das Ziel angeben, an dem das Bauteil platziert werden soll. Es können mehrere Ziele ausgewählt werden.
  • Der letzte Schritt ist das Bereitstellen der Komponente (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

>Zur Datensatzseite hinzugefügt


firstComponent.js

importiere { LightningElement } von ‚lwc‘;
exportiere Standardklasse FirstComponent erweitert LightningElement {
}

firstComponent.js-meta.xml



57.0
wahr

lightning__RecordPage

Hinzufügen einer Komponente:

Gehen Sie zur Salesforce-Organisation und suchen Sie im App Launcher nach der App „Sales“.

Öffnen Sie einen beliebigen Kontodatensatz, indem Sie zur Registerkarte „Konten“ navigieren. Gehen Sie zum Zahnradsymbol und wählen Sie „Seite bearbeiten“.

Gehen Sie jetzt nach links und suchen Sie nach Ihrer Komponente.

Ziehen Sie die Komponente und platzieren Sie sie unterhalb des „Highlights Panel“.

Klicken Sie auf „Aktivieren“ und weisen Sie es als Org-Standard zu. Speichern Sie abschließend die Datensatzseite.

Es ist geschafft. 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 in der HTML-Datei in „Zur Startseite hinzugefügt“. Geben Sie das Ziel in der Datei „firstComponent.js-meta.xml“ als „lightning__HomePage“ an.

ersteKomponente.html

<P>Zur Startseite hinzugefügtP>

firstComponent.js-meta.xml



57.0
wahr

lightning__HomePage

Hinzufügen einer Komponente:

Gehen Sie zur App „Sales“ und klicken Sie auf die Registerkarte „Home“.

Klicken Sie auf die Bearbeitungsseite, die unter dem Zahnradsymbol verfügbar ist. Suchen Sie nach der Komponente und platzieren Sie sie über der Komponente „Leistung“. Speichern Sie die Seite.

Aktualisieren Sie die Registerkarte „Sales Home“.

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 in „Zur App-Seite hinzugefügt“. Geben Sie das Ziel in der Datei „firstComponent.js-meta.xml“ als „lightning__AppPage“ an.

ersteKomponente.html

Zur App-Seite hinzugefügt


firstComponent.js-meta.xml



57.0
wahr

lightning__AppPage

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 zu „Weiter“.

Geben Sie als Bezeichnung „Linuxhint-App“ ein und gehen Sie zu „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“.

Anschließend müssen Sie der App eine Seite hinzufügen. Gehen Sie dazu auf den Reiter „LIGHTNING EXPERIENCE“. 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, zur Startseite und zur 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 dieser gesamten Anleitung haben wir den Lightning Studio (Beta)-Editor verwendet, um den Code zu entwickeln. Alle Schritte zum Herunterladen und Verwenden dieses Editors werden am Anfang dieser Anleitung erläutert.

Kommentar verfassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Nach oben scrollen