Lightning-Webkomponenten (allgemein verfügbar)

Nun können Sie Lightning-Komponenten mithilfe von zwei Programmierungsmodellen entwickeln: "Lightning-Webkomponenten" und dem ursprünglichen Modell "Aura-Komponenten". Bei Lightning-Webkomponenten handelt es sich um benutzerdefinierte HTML-Elemente, die mithilfe von HTML und modernem JavaScript erstellt wurden. Lightning-Webkomponenten und Aura-Komponenten können gemeinsam verwendet werden und auf einer Seite interagieren. Administratoren und Endbenutzern werden sie als Lightning-Komponenten angezeigt.

Wo: Diese Funktion ist in Lightning Experience, Lightning-Communities und allen Versionen der mobilen Anwendung in allen Editionen verfügbar. Verwenden Sie zum Erstellen einer Lightning-Webkomponente die Enterprise, Performance, Unlimited oder Developer Edition.

Warum: Durch Lightning-Webkomponenten enthält das Lightning-Komponenten-Framework die neuesten Erweiterungen in JavaScript und Webstandards. Seit der Einführung des Lightning-Komponenten-Frameworks im Jahr 2014 hat sich der Webstapel zu einer Anwendungsentwicklungsplattform entwickelt. Viele Funktionen, für die Frameworks erforderlich waren, sind nun Standard. Das Lightning-Webkomponenten-Programmierungsmodell wurde daraufhin entwickelt, von dieser Entwicklung zu profitieren. Die Salesforce-Techniker halfen dabei, den Weg für das Komitee TC39 zu bahnen, durch das ECMAScript (JavaScript) definiert wird.

Lightning-Webkomponenten verwenden die wichtigsten Web Components-Standards und stellen nur das bereit, was notwendig ist, damit die Funktionen in allen von Salesforce unterstützten Browsern ordnungsgemäß ausgeführt werden. Da sie auf Code basieren, der in Browsern nativ ausgeführt wird, ist das Lightning-Webkomponenten-Programmierungsmodell schlank und bietet außergewöhnliche Leistung. Der Großteil des Codes, den Sie schreiben, ist standardmäßiges JavaScript und HTML.

Sie können zudem die Komponenten, Tools und Services verwenden, mit denen die Entwicklung auf der Lightning-Plattform zum Kinderspiel wird: Lightning-Basiskomponenten, Lightning Design System, Lightning-Anwendungsgenerator, Community-Generator, Lightning-Daten-Service und Lightning Locker.

Bei dieser Lightning-Webkomponente handelt es sich um ein Formular mit sechs JavaScript-Zeilen, das vollständig bearbeitet werden kann.Ein bearbeitbares Datensatzformular, in dem ein Kontakt gezeigt wird.

Im Folgenden finden Sie Code. Jede Lightning-Webkomponente besteht aus einer HTML-Vorlage und einer JavaScript-Klasse. Diese Komponente enthält eine grundlegende <lightning-record-form>-Komponente, die auf dem Lightning-Daten-Service basiert. Bei object-api-name, record-id und fields handelt es sich um die Komponentenattribute.
<!-- recordFormDynamicContact.html -->

<template>

    <lightning-card title="RecordFormDynamicContact" icon-name="standard:contact">

        <div class="slds-m-around_medium">
            <lightning-record-form object-api-name={objectApiName}
                                   record-id={recordId} 
                                   fields={fields}>
            </lightning-record-form>
        </div>

    </lightning-card>

</template>

Die JavaScript-Klasse der Komponente deklariert die Eigenschaften recordId, objectApiName und fields, die an die HTML-Vorlage gebunden sind.

Die mit @api ausgestatteten Eigenschaften sind öffentlich und reaktiv. Wenn sich ihre Werte ändern, wird die Komponente mit den neuen Werten erneut dargestellt. Diese Komponente ruft die Werte für die zugehörigen öffentlichen Eigenschaften von der Lightning-Datensatzseite ab, auf der sie enthalten ist. Cool!
// recordFormDynamicContact.js

import { LightningElement, api } from 'lwc';

export default class RecordFormDynamicContact extends LightningElement {

    @api recordId;
    @api objectApiName;
    fields = ['Name', 'Title', 'Phone', 'Email'];

}

Wie: Verwenden Sie die Salesforce CLI, um den Lightning-Webkomponenten-Quellcode zwischen Salesforce und Ihrem bevorzugten Code-Editor zu synchronisieren. Es wird empfohlen, Visual Studio Code zu verwenden, da das Salesforce-Erweiterungspaket Salesforce CLI-Befehls-, Codevervollständigungs- und Codeanalysefunktionen enthält, wodurch die Codierung schneller und flüssiger wird.

Sie können auch im Übungsbereich experimentieren. Hierbei handelt es sich um unseren interaktiven Code-Editor. Schreiben Sie JavaScript-, HTML- und CSS-Code und zeigen Sie die Vorschau an, während Sie die Entwicklung vornehmen. Speichern Sie Übungsbereichsanwendungen und geben Sie sie für andere Entwickler in Ihrer Organisation frei.Code-Editor und Ausgabebereich des Übungsbereichs.