Eingeben von Daten mithilfe von Formularen

Lernziele

Nachdem Sie diese Lektion abgeschlossen haben, sind Sie in der Lage, die folgenden Aufgaben auszuführen:

Erläutern der wichtigsten Anforderungen an ein Visualforce-Formular
Unterscheiden von Visualforce-Formularelementen, die die visuelle Plattformgestaltung verwenden, von denen, die diese nicht verwenden
Auflisten von mindestens vier Standardeingabeformular-Tags
Erstellen eines Visualforce-Formulars zum Bearbeiten und Speichern eines Datensatzes

Hinweis

Lernen Sie auf Deutsch? In diesem Badge ist für die praktischen Trailhead-Aufgaben Englisch als Bearbeitungssprache festgelegt. Übersetzungen werden zur Referenz in Klammern angegeben. Stellen Sie sicher, dass Sie die englischen Werte kopieren und einfügen und stellen Sie die Sprache Ihres Trailhead Playgrounds auf "English (Englisch)" und das Gebietsschema auf "United States (USA)" um. Die zugehörigen Anweisungen finden Sie hier.

Im Badge "Trailhead in Ihrer Sprache" erfahren Sie, wie Sie die übersetzte Trailhead-Umgebung nutzen.

Einführung in Visualforce-Formulare

Das Erstellen und Bearbeiten von Daten ist ein grundlegender Aspekt jeder Anwendung. Visualforce stellt alles bereit, was Sie benötigen, um Seiten schnell zu erstellen, die neue Datensätze erstellen können, oder um einen Datensatz abzurufen, dessen Werte zu bearbeiten und die Änderungen zurück in der Datenbank zu speichern.

Hier wird das Standardsteuerfeld mit <apex:form>-Komponente und einigen leicht verständlichen Formularelementen kombiniert, um eine vergleichsweise komplexe Seite für das Bearbeiten von Datensätzen zu erstellen.

Erstellen eines grundlegenden Formulars

Verwenden Sie <apex:form> und <apex:inputField> zum Erstellen einer Seite für das Bearbeiten von Daten. Kombinieren Sie <apex:commandButton> mit der im Standardsteuerfeld integrierten "save"-Aktion, um einen neuen Datensatz zu erstellen oder Änderungen an einem vorhandenen zu speichern.

Eine Seite, die bearbeitet und auf der ein Datensatz aktualisiert werden kann, muss die im Folgenden aufgeführten Punkte erfüllen können.

Suchen des zu bearbeitenden Datensatzes und Abrufen dieses aus der Datenbank.
Bereitstellen der relevanten Datensatzdaten auf der Seite in einem Bearbeitungsformular.
Empfangen einer Formularübermittlung mit geänderten Daten.
Überprüfen der neuen Werte.
Speichern der gültigen Werte in der Datenbank.
Bereitstellen von entsprechenden Meldungen für die die Änderungen übermittelnde Person, welche darüber informieren, ob die neuen Daten erfolgreich gespeichert wurden oder ob Fehler vorliegen.

Visualforce erledigt die meisten dieser Dinge für Sie automatisch, wenn Sie das Standardsteuerfeld und die <apex:form>-Komponente verwenden.

Lassen Sie uns mit den Grundlagen beginnen.

Öffnen Sie die Developer Console und klicken Sie zum Erstellen einer neuen Visualforce-Seite auf File (Datei) | New (Neu) | Visualforce Page (Visualforce-Seite). Geben Sie "AccountEdit" als Seitennamen ein.

Ersetzen Sie im Editor jedes Markup durch Folgendes.

<apex:page standardController="Account">
    <h1>Edit Account</h1>
    <apex:form>
        <apex:inputField value="{! Account.Name }"/>
        <apex:commandButton action="{! save }" value="Save" />
    </apex:form>
</apex:page>

Klicken Sie auf Preview (Vorschau), um eine Vorschau Ihrer Seite anzuzeigen, die Sie anzeigen können, während Sie Änderungen vornehmen. Es sollte ein neues Fenster geöffnet werden, in dem ein Formular mit einem einzelnen leeren Feld im Textteil angezeigt wird.
Fügen Sie im Vorschaufenster die ID für einen Account zum URL hinzu und drücken Sie die Eingabetaste. Der URL sollte in etwa so aussehen: https://MyDomainName.lightning.force.com/apex/AccountEdit?core.apexpages.request.devconsole=1&id=001D000000JRBes Es sollte nun der Name des Accounts im Formularfeld angezeigt werden.

Dadurch wird sichergestellt, dass das Standardsteuerfeld funktioniert und dass eine gültige Datensatz-ID vorliegt.

Es mag zwar nicht nach viel aussehen, aber in einem halben Dutzend Markup-Zeilen verfügen Sie über ein voll funktionsfähiges Formular für das Aktualisieren eines Accountnamens. Testen Sie es.

Dies sind die entscheidenden Aspekte, wenn es darum geht, dieses Formular zu verstehen.

Die Seite verwendet das in der <apex:page>-Komponente definierte Standardsteuerfeld für Accounts.
<apex:form> ist eine Visualforce-Komponente, die alle darin enthaltenen Elemente in einem Paket verpackt, das als Bestandteil einer Seitenaktion zurück an den Server gesendet werden kann. Wenn Sie Daten zurück zu Salesforce senden müssen, erfolgt dies meistens in <apex:form>.
<apex:inputField> erstellt ein Formularfeld auf dem Bildschirm für das Datensatzdatenfeld, das damit verknüpft ist. Sie nehmen dies vor, indem Sie einen Ausdruck angeben, der auf das entsprechende Feld im "value"-Attribut verweist. Hier lautet der Ausdruck {!Account.Name }, wobei es sich hierbei natürlich um das Feld "Name" des Accounts handelt.
Abschließend fügt <apex:commandButton> eine Schaltfläche zur Benutzeroberfläche der Seite hinzu. Diese Schaltfläche löst eine Aktion aus, wenn darauf geklickt wird. In diesem Fall ist die Aktion die save()-Aktionsmethode im Standardsteuerfeld. Wie bei <apex:inputField> verbinden Sie <apex:commandButton> mit der zugehörigen Aktion, indem Sie die Aktionsmethode referenzieren, damit sie in einem Ausdruck aufgerufen wird, die dem "action"-Attribut <apex:commandButton> bereitgestellt wird.

Hinzufügen von Feldbezeichnungen und Plattformgestaltung

Platzieren Sie Formularelemente in <apex:pageBlock>- und <apex:pageBlockSection>-Tags, um sie zu organisieren und zu gruppieren und damit das Formular den visuellen Stil der Plattform übernimmt.

Im Folgenden wird Ihr Formular überarbeitet, damit es vertrauter aussieht.

Umgeben Sie innerhalb der <apex:form>-Komponente die zwei Formularelemente mit den <apex:pageBlock>- und <apex:pageBlockSection>-Tags, damit Ihr Markup wie folgt aussieht.

<apex:page standardController=”Account”>
	<apex:form>
		<apex:pageBlock title=”Edit Account”>
			<apex:pageBlockSection>
				<apex:inputField value=”{! Account.Name }”/>
			</apex:pageBlockSection>
			<apex:pageBlockButtons>
				<apex:commandButton action=”{! save }” value=”Save” />
			</apex:pageBlockButtons>
		</apex:pageBlock>
	</apex:form>
</apex:page>

Die Gestaltung für diese Version des Formulars ist allerdings anders! Es ist wie bei den Ausgabekomponenten: Wenn Sie Eingabekomponenten in den Tags <apex:pageBlock> und <apex:pageBlockSection> verwenden, übernehmen sie die visuelle Plattformgestaltung.

Fügen Sie unter dem Feld für den Accountnamen weitere Felder hinzu, damit Ihr Markup wie folgt aussieht.

<apex:pageBlockSection columns="1">
    <apex:inputField value="{! Account.Name }"/>
    <apex:inputField value="{! Account.Phone }"/>
    <apex:inputField value="{! Account.Industry }"/>
    <apex:inputField value="{! Account.AnnualRevenue }"/>
</apex:pageBlockSection>

Nun verfügen Sie über ein vollständigeres, realistischeres Formular, mit dem Sie arbeiten können. Bearbeiten des Accountformulars mit Plattformgestaltung

Bearbeiten des Accountformulars mit Plattformgestaltung

Die <apex:inputField>-Komponente rendert das entsprechende Eingabe-Widget auf Grundlage des Typs eines Standard- oder benutzerdefinierten Felds. Wenn Sie beispielsweise ein <apex:inputField>-Tag zum Anzeigen eines Datumsfelds verwenden, wird ein Kalender-Widget im Formular angezeigt. Wenn Sie ein <apex:inputField>-Tag verwenden, um ein Auswahllistenfeld anzuzeigen, wie dies hier für das Branchenfeld vorgenommen wurde, wird stattdessen eine Dropdown-Liste angezeigt.

<apex:inputField> kann zum Erfassen der Benutzereingabe für ein beliebiges Standard- oder benutzerdefiniertes Objektfeld verwendet werden. Es erkennt Metadaten, die in der Felddefinition festgelegt sind, wie beispielsweise, ob das Feld erforderlich oder eindeutig ist oder ob der aktuelle Benutzer über die Berechtigung verfügt, es anzuzeigen oder zu bearbeiten.

Anzeigen von Formularfehlern und -meldungen

Verwenden Sie <apex:pageMessages>, um alle Formularverarbeitungsfehler oder -meldungen anzuzeigen.

Ihre Seite sollte ein nützliches Feedback bereitstellen, wenn Probleme auftreten, beispielsweise beim Fehlen eines Felds oder beim Fehlschlagen der Überprüfung eines Feldwerts. Das Standardsteuerfeld verarbeitet tatsächlich all diese Aktionen für Sie. Sie müssen nur angeben, wo die Meldungen auf der Seite angezeigt werden sollen.

Fügen Sie unter dem Tag <apex:pageBlock> die folgende Zeile hinzu.
<apex:pageMessages/>
Versuchen Sie, den Namen des Accounts zu löschen und den Datensatz mit einem leeren Namen zu speichern. Für die Seite werden Überprüfungsfehler angezeigt.

Wie Sie sehen können, zeigt <apex:inputField> Fehler für sein eigenes Feld an. Für ein längeres Formular empfiehlt es sich jedoch, alle Fehler der Seite oben zentral auf der Seite aufzulisten.

Das Standardsteuerfeld sammelt bereits alle Meldungen der Seite, wenn das Formular verarbeitet wird. Mit der <apex:pageMessages>-Komponente können Sie diese Meldungen dort anzeigen, wo Sie Ihrer Meinung nach hinpassen.

Bearbeiten von verwandten Datensätzen

Erleichtern Sie Benutzern die Bearbeitung von zugehörigen Informationen, indem Sie Links zu verwandten Datensätzen bereitstellen.

Bisher wurde in den hier vorgestellten Formularen nur ein Datensatz auf einmal bearbeitet. Da sie das Standardsteuerfeld für das Account-Objekt verwenden, kann das Formular im engeren Sinne nur Änderungen an den Accountdatensätzen vornehmen.

Dies ist nicht immer der effizienteste Workflow für Benutzer. Obwohl Sie Änderungen an mehreren Objekttypen in einer Anforderung mit dem Standardsteuerfeld nicht speichern können, können Sie die Navigation zu verwandten Datensätzen einfacher gestalten, indem Sie Links bereitstellen, die Aktionen wie das Bearbeiten oder Löschen dieser Datensätze ausführen.

Fügen Sie unter dem vorhandenen schließenden </apex:pageBlock>-Tag das folgende Markup hinzu.

<apex:pageBlock title="Contacts">
    <apex:pageBlockTable value="{!Account.contacts}" var="contact">
        <apex:column>
            <apex:outputLink
                value="{! URLFOR($Action.Contact.Edit, contact.Id) }">
                Edit
            </apex:outputLink>
            <apex:outputLink
                value="{! URLFOR($Action.Contact.Delete, contact.Id) }">
                Del
            </apex:outputLink>
        </apex:column>
        <apex:column value="{!contact.Name}"/>
        <apex:column value="{!contact.Title}"/>
        <apex:column value="{!contact.Phone}"/>
    </apex:pageBlockTable>
</apex:pageBlock>

Eine Liste der Kontakte des Accounts wird unter dem Formular zum Bearbeiten des Accounts angezeigt. Bearbeiten des Accounts mit zugehörigen Kontaktdatensätzen

Bearbeiten des Accounts mit zugehörigen Kontaktdatensätzen

Versuchen Sie, auf den Link "Edit (Bearbeiten)" für einen Kontakt zu klicken. Wohin führt Sie der Link? Was geschieht, wenn Sie Ihre Änderungen speichern oder auf die Option zum Abrechen auf dieser Seite klicken?

Die <apex:pageBlockTable>-Komponente erstellt eine Tabelle mit einer Liste der Kontakte des Accounts. Neu ist hier die Spalte mit <apex:outputLink>-Komponenten. Diese verwenden einen Ausdruck, der auf die globale Variable $Action verweist und sie mit der Kontakt-ID in der Funktion URLFOR() kombiniert. Das Ergebnis ist in Abhängigkeit der referenzierten Aktion ein Link zur Bearbeitungs- oder Löschseite des Kontakts. Hierbei kann es sich um eine sehr nützliche Verknüpfung für Benutzer dieses Formulars handeln.

Weitere Infos

Es gibt natürlich noch viel mehr über das Erstellen sinnvoller, verwendbarer Formulare für Ihre Webanwendungen zu erfahren.

Visualforce bietet kurz gesagt etwa ein Dutzend Eingabekomponenten und nicht nur <apex:inputField>. <apex:inputField> interagiert ordnungsgemäß mit dem Standardsteuerfeld und eignet sich für die direkte Bearbeitung von Datensatzdaten. Bei Seiten, auf denen Sie Ihren eigenen benutzerdefinierten Steuerfeldcode verwenden, oder wenn die Formularausgabe keine direkte Zuordnung zu Feldern in einem Datensatz herstellt, möchten Sie mehr über einige der anderen erfahren. Die Namen der meisten dieser Komponenten beginnen mit apex:input. Sie können sie zusammengefasst im Komponentenverweis finden. Suchen für Auswahllisten und Textfeldsteuerelemente nach den Komponenten, deren Namen stattdessen mit apex:select beginnen.

Für Benutzeroberflächen, die auf Mobilgeräten verwendet werden sollen, sollten Sie <apex:input> testen, welches für die Verwendung auf HTML5-Seiten entworfen wurde. Es ermöglicht Ihnen, eine Vielzahl an Funktionen zu verwenden, die die resultierenden Eingabebenutzerelemente für das Mobilgerät optimiert gestalten.

Der von Ihnen hier geschriebene Code hat einige Aktionen verwendet, die durch das Standardsteuerfeld für die Seite bereitgestellt wurden. Diese werden als Standardaktionen bezeichnet und es gibt einige davon. Es gibt eine Kerngruppe, die für alle Objekte mit Standardsteuerfeldern verfügbar ist. Viele der integrierten Standardobjekte verfügen jedoch über zusätzliche Aktionen, die Sie verwenden können.

Sie sind in der Lage, zu bearbeitenden Aktionen hinzuzufügen und vorhandene zugehörige Kontakte zu löschen. Wie können Sie die Fähigkeit, neue zugehörige Kontakte zu erstellen, hinzufügen? Es ist nicht so einfach wie das Erstellen eines Links mithilfe der "create"-Aktion, wie Sie dies bei "edit" und "delete" getan haben. Der Grund hierfür ist, dass diese Aktionen bei vorhandenen Datensätzen funktioniert haben, die bereits über eine Beziehung zum zugehörigen Account verfügen. Beim Erstellen eines neuen Datensatzes müssen Sie diese Beziehung jedoch selbst erstellen. Dafür müssen Sie selbst etwas benutzerdefinierten Steuerfeldcode schreiben.

Ressourcen