Kennenlernen von Lightning-Webkomponentenaktionen
Lernziele
Nachdem Sie diese Lektion abgeschlossen haben, sind Sie in der Lage, die folgenden Aufgaben auszuführen:
- Erstellen einer Lightning-Webkomponente und -Aktion zum Auffüllen von Feldern basierend auf der Benutzereingabe und Anzeigen von Feedbackmeldungen für Benutzer
- Beginnen der Migration Ihrer JavaScript-Schaltflächenfunktionalität zu von Lightning gestützten Alternativen
Hinweis
Lernen Sie auf Deutsch? Beginnen Sie die Aufgabe in einem Trailhead Playground in der Sprache Deutsch und verwenden Sie für die Navigation die in Klammern angegebenen Übersetzungen. Kopieren und fügen Sie nur die Angaben in Englisch ein, da zur Überprüfung der Aufgabe Daten in Englisch benötigt werden. Wenn Sie die Aufgabe in Ihrer deutschen Organisation nicht bestehen, empfehlen wir Ihnen folgende Vorgehensweise: (1) Stellen Sie das Gebietsschema auf USA um, (2) legen Sie Englisch als Sprache fest (Anweisungen dazu finden Sie hier) und (3) klicken Sie erneut auf die Schaltfläche "Check Challenge" (Aufgabe überprüfen).
Weitere Details dazu, wie Sie die übersetzte Trailhead-Umgebung optimal nutzen können, finden Sie unter dem Badge "Trailhead in Ihrer Sprache".
Lightning-Webkomponentenaktionen: Intelligent, schnell und flexibel
Wir haben verschiedene Lösungen vorgestellt, die sowohl in Lightning Experience als auch Salesforce Classic funktionieren und sich sehr gut als Ersatz für JavaScript-Schaltflächen eignen. Doch uns ist klar, dass diese deklarativen und programmgesteuerten Lösungen sich nicht für jeden Anwendungsfall eignen. Die gute Nachricht ist, dass es etwas gibt, was sich für viele weitere eignet. Die Rede ist von Lightning-Webkomponentenaktionen, bei denen es sich um Schnellaktionen handelt, die Lightning-Webkomponenten aufrufen.
Ab dem Release Spring '19 (API-Version 45.0) können Sie Lightning-Komponenten mithilfe von zwei Programmiermodellen erstellen: dem Modell "Lightning-Webkomponenten" und dem ursprünglichen Modell "Aura-Komponenten". Lightning-Webkomponenten und Aura-Komponenten können auf einer Seite nebeneinander vorhanden sein und interagieren. In diesem Abschnitt werden Lightning-Webkomponenten behandelt.
Lightning-Webkomponentenaktionen bauen auf dem vorhandenen Framework für Lightning-Webkomponenten auf. Sie können Ihre vorhandenen Lightning-Webkomponenten mühelos in Aktionen umwandeln und sie in Lightning Experience nutzen.
Sie gestalten eine Lightning-Webkomponente als aufrufbare Aktion, indem Sie lightning__RecordAction in der XML-Datei für die Metadatenkonfiguration der Komponente als Ziel hinzufügen und actionType für targetConfigs angeben. Damit die Aktion in einem von Salesforce definierten modalen Fenster angezeigt wird, legen Sie actionType auf ScreenAction fest. Um die Aktion ohne ein modales Fenster auszuführen oder ein benutzerdefiniertes modales Fenster zu definieren, legen Sie actionType auf Action fest.
Eine weitere nützliche Eigenschaft für eine Lightning-Webkomponentenaktion ist recordId, die der Komponente den Datensatzkontext bereitstellt, wenn sie auf einer Lightning-Datensatzseite aufgerufen wird. Um auf die Daten oder Metadaten eines Datensatzes zuzugreifen, verwenden Sie in der JavaScript-Klasse der Komponente den Decorator @api, um die öffentliche Eigenschaft recordId zu erstellen.
Falls Sie bislang noch keine Lightning-Webkomponenten erstellt haben, führen Sie im Lightning Web Components (LWC) Development Center das Projekt Lightning Web Components Quick Start aus und absolvieren das Modul Lightning-Webkomponenten: Grundlagen.
Lassen Sie uns Lightning-Webkomponentenaktionen nun etwas genauer ansehen. Als Nächstes beschäftigen wir uns mit JavaScript-Schaltflächenfunktionalität, die stattdessen von Lightning-Webkomponentenaktionen übernommen werden kann, wie z. B. das Auffüllen von Feldern basierend auf der Benutzereingabe und Anzeigen von Feedbackmeldungen während der Dateneingabe.
Auffüllen von Feldern basierend auf der Benutzereingabe und Anzeigen von Feedbackmeldungen für Benutzer
Angenommen, Sie nutzen JavaScript-Schaltflächen zum Überprüfen oder Bearbeiten von Daten oder um Ihren Benutzern Feedback oder Anweisungen zu geben, wenn sie mit Datensätzen arbeiten. Es folgt ein Beispiel, wie mühelos Sie Daten in einer Lightning-Webkomponente überprüfen oder bearbeiten können, ehe Ihre Benutzer einen Datensatz erstellen oder aktualisieren.
In unserer Beispielorganisation haben wir das benutzerdefinierte Objekt "Case Study (Fallstudie)" erstellt, mit dessen Hilfe wir verschiedene Forschungsprojekte nachverfolgen. Wir haben auch das benutzerdefinierte Objekt "Test User (Testbenutzer)", mit dem wir neue Benutzer zu Fallstudien hinzufügen und ihre Namen und E-Mail-Adressen erfassen können. Da die E-Mail-Adresse unsere primäre Kontaktmethode ist, möchten wir sicherstellen, dass sie ordnungsgemäß eingegeben wird. Wir möchten außerdem für Testbenutzer in der Fallstudie einen eindeutigen Spitznamen erstellen, damit sie anonym bleiben können.
Wir erstellen eine Lightning-Webkomponentenaktion, die die Felder für den Namen und die E-Mail-Adresse anzeigt, die E-Mail-Adresse überprüft und aus dem Vornamen und einer Zufallszahl automatisch den Spitznamen erstellt.
Hier ist der Code für die Komponente, die von dieser Lightning-Webkomponentenaktion aufgerufen wird.
- createUser.html: Die Struktur der Lightning-Webkomponente, die angezeigt wird, wenn Sie die Aktion öffnen. Sie enthält die Benutzeroberflächenimplementierung, wozu die Textfelder, Schaltflächen, der Aktionstitel usw. gehören.
- createUser.js: Der Controller, der die Komponente und alle auf der Benutzeroberfläche erfolgenden Ereignisse überwacht, wie z. B. den Rendering-Lebenszyklus, Texteingaben und Klicks auf Schaltflächen. JavaScript-Methoden legen fest, was mit Eingaben, Daten, Ereignissen, Zustandsänderungen und vielem mehr geschehen soll, damit Ihre Komponente funktioniert.
- createUser.js-meta.xml: Der Code, der die Metadaten für die Komponente definiert, einschließlich der Designkonfiguration für Komponenten, die für die Verwendung in Lightning Experience vorgesehen sind.
createUser.html
<template>
<lightning-quick-action-panel header="Add Test User to Case Study">
<lightning-input
type="text"
data-field="firstName"
label="User's First Name"
onblur={updateNickName}
required
></lightning-input>
<lightning-input
type="text"
data-field="lastName"
label="User's Last Name"
required
></lightning-input>
<lightning-input
type="text"
data-field="nickName"
label="Nickname"
required
></lightning-input>
<lightning-input
type="email"
data-field="email"
label="User's Email"
onblur={handleEmailBlur}
required
></lightning-input>
<lightning-input
type="password"
data-field="password"
label="User's Password"
onblur={handlePasswordBlur}
required
></lightning-input>
<div slot="footer">
<lightning-button
variant="neutral"
label="Cancel"
onclick={handleCancel}
></lightning-button>
<lightning-button
variant="brand"
label="Save User"
onclick={handleSave}
></lightning-button>
</div>
</lightning-quick-action-panel>
</template>
createUser.js
import { LightningElement, api } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import { CloseActionScreenEvent } from 'lightning/actions';
import { createRecord } from 'lightning/uiRecordApi';
import TEST_USER_OBJECT from '@salesforce/schema/Test_User__c';
import NAME_FIELD from '@salesforce/schema/Test_User__c.Name';
import PASSWORD_FIELD from '@salesforce/schema/Test_User__c.Password__c';
import EMAIL_FIELD from '@salesforce/schema/Test_User__c.Email__c';
import NICKNAME_FIELD from '@salesforce/schema/Test_User__c.Nickname__c';
import CASE_STUDY_FIELD from '@salesforce/schema/Test_User__c.Case_Study__c';
export default class CreateUser extends LightningElement {
@api recordId;
async handleSave() {
// query form elements
const firstNameEl = this.template.querySelector('[data-field="firstName"]');
const lastNameEl = this.template.querySelector('[data-field="lastName"]');
const nickNameEl = this.template.querySelector('[data-field="nickName"]');
const emailEl = this.template.querySelector('[data-field="email"]');
const passwordEl = this.template.querySelector('[data-field="password"]');
// check for errors on form elements (custom or otherwise)
const isFirstNameValid = firstNameEl.reportValidity();
const isLastNameValid = lastNameEl.reportValidity();
const isNickNameValid = nickNameEl.reportValidity();
const isPasswordValid = passwordEl.reportValidity();
const isEmailValid = emailEl.reportValidity();
if(!isFirstNameValid || !isLastNameValid || !isNickNameValid || !isPasswordValid || !isEmailValid) {
return;
}
const recordInput = {
apiName: TEST_USER_OBJECT.objectApiName,
fields: {
[NAME_FIELD.fieldApiName]: `${firstNameEl.value} ${lastNameEl.value}`,
[PASSWORD_FIELD.fieldApiName]: passwordEl.value,
[EMAIL_FIELD.fieldApiName]: emailEl.value,
[NICKNAME_FIELD.fieldApiName]: nickNameEl.value,
[CASE_STUDY_FIELD.fieldApiName]: this.recordId,
}
};
try {
await createRecord(recordInput);
this.dispatchEvent(
new ShowToastEvent({
title: 'Success!',
message: 'The test user has been created.',
variant: 'success'
})
);
this.dispatchEvent(new CloseActionScreenEvent());
} catch (error) {
new ShowToastEvent({
title: 'Error creating the test user, try again...',
message: error.body.message,
variant: 'error'
});
}
}
updateNickName() {
const firstName = this.template.querySelector('[data-field="firstName"]').value;
const nickNameEl = this.template.querySelector('[data-field="nickName"]');
if(firstName && !nickNameEl.value) {
const today = new Date();
nickNameEl.value = firstName + today.valueOf(today)
}
}
handleCancel() {
this.dispatchEvent(new CloseActionScreenEvent());
}
handlePasswordBlur() {
const passwordEl = this.template.querySelector('[data-field="password"]');
// clear custom errors
passwordEl.setCustomValidity('');
this.validatePassword(passwordEl);
}
validatePassword(input) {
// check lightning-input validity
if(input.reportValidity()) {
// perform custom validation
const value = input.value;
if (value === undefined) {
input.setCustomValidity('You must enter a password.');
} else if (value.length < 7) {
input.setCustomValidity('The password is the wrong length (must be >= 7): ' + value.length);
} else if (value.length > 15) {
input.setCustomValidity('The password is the wrong length (must be <= 15): ' + value.length);
} else if (value.search(/[0-9]+/) === -1) {
input.setCustomValidity('The password must contain at least one number.');
} else if (value.search(/[a-zA-Z]+/) === -1) {
input.setCustomValidity('The password must contain at least one letter.');
}
// display custom validation errors (if any)
input.reportValidity();
}
}
handleEmailBlur() {
const emailEl = this.template.querySelector('[data-field="email"]');
// clear Custom Errors
emailEl.setCustomValidity('');
this.validateEmail(emailEl);
}
validateEmail(input) {
// check lightning-input validity
if (input.reportValidity()) {
const value = input.value;
if (!/@gmail\.com$/.test(value)) {
input.setCustomValidity('Email must be a Gmail account.');
}
// display custom validation errors (if any)
input.reportValidity();
}
}
}
createUser.js-meta.xml
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>57.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__RecordAction</target>
</targets>
<targetConfigs>
<targetConfig targets="lightning__RecordAction">
<actionType>ScreenAction</actionType>
</targetConfig>
</targetConfigs>
</LightningComponentBundle>
Erstellen der Lightning-Webkomponentenaktion
Nach dem Erstellen der Lightning-Webkomponente weisen wir sie einer Aktion zu. In den Objektverwaltungseinstellungen für "Case Study" wechseln wir zu "Schaltflächen, Links und Aktionen", klicken auf Neue Aktion und konfigurieren dann die Aktion mit diesen Parametern.
| Feld | Value (Wert) |
|---|---|
|
Aktionstyp |
|
|
Lightning-Webkomponenten |
|
|
Bezeichnung |
|
|
Name |
|
Anschließend fügen wir unsere neue Lightning- Webkomponentenaktion dem Layout der Seite "Case Study (Fallstudie)" hinzu. Wenn Benutzer Sie auf der Datensatzdetailseite "Case Study (Fallstudie)" aufrufen, sehen sie die von uns erstellte Lightning-Webkomponentenaktion.
Die Lightning-Webkomponentenaktionen sind in der mobilen Salesforce-Anwendung nicht verfügbar. Zum Erstellen einer Aktion, die in der mobilen Salesforce-Anwendung verfügbar ist, erstellen Sie mithilfe des Aura-Programmiermodells eine Lightning-Komponentenaktion.
Lightning-Webkomponentenaktionen sind die Zukunft programmgesteuerter Aktionen in Lightning Experience. Wir hoffen, dass Sie beginnen, sich mit diesem Angebot an Lösungen als bessere Alternative zu JavaScript-Schaltflächen zu beschäftigen.
Wenn Sie von Partneranwendungen abhängig sein sollten, die JavaScript-Schaltflächen nutzen, wird es Sie freuen zu hören, dass viele unserer Partner bereits mit der Migration und dem Upgrade ihrer Anwendungen zu Lightning begonnen haben. In AppExchange finden Sie weitere Anwendungen, die für Lightning Experience aktualisiert wurden.