DokumentationAEM as a Cloud ServiceBenutzerhandbuch

Erste Schritte – Entwickler-Tutorial

Last update: Mon Jul 15 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Themen:

Erstellt für:

  • Admin
  • Entwickler

Im heutigen digitalen Zeitalter ist die Erstellung benutzerfreundlicher Formulare für jedes Unternehmen schlicht unverzichtbar. Mit AEM Forms Edge Delivery Services (EDS) können Sie Formulare mit vertrauten Tools wie Google Docs und Microsoft Office erstellen.

Diese Formulare senden Daten direkt an eine Microsoft Excel- oder Google Tabellen-Datei, sodass Sie ein dynamisches Ökosystem und robuste APIs von Google Tabellen, Microsoft Excel und Microsoft SharePoint verwenden können, um die übermittelten Daten einfach zu verarbeiten oder einen bestehenden Business-Workflow zu initiieren.

AEM Forms bietet einen Bock, der als adaptiver Formularblock bezeichnet wird und mit dem Sie mühelos Formulare erstellen können, um aufgenommene Daten zu erfassen und zu speichern. Sie können ein neues AEM-Projekt vorkonfiguriert mit einem Block für ein adaptives Formular erstellen oder den Block für ein adaptives Formular zu einem bestehenden AEM-Projekt hinzufügen..

Dieses AEM Forms-Tutorial führt Sie durch das Erstellen, Anzeigen einer Vorschau und Veröffentlichen Ihres eigenen benutzerdefinierten Formulars mit einem neuen Adobe Experience Manager (AEM) Forms-Projekt.

Voraussetzungen

  • Sie verfügen über ein GitHub-Konto und sind mit den Git-Grundlagen vertraut.
  • Sie verfügen über ein Google- oder Microsoft SharePoint-Konto.
  • Sie sind mit den Grundlagen von HTML, CSS und JavaScript vertraut.
  • Sie haben Node/npm für die lokale Entwicklung installiert.

Hinweis: In diesem Tutorial werden macOS, Chrome und Visual Studio Code verwendet. Während sich die Schritte für andere Setups anpassen lassen, können sich die Screenshots und spezifischen Elemente der Benutzeroberfläche je nach Betriebssystem, Browser und Code-Editor unterscheiden.

Erstellen eines neuen, mit adaptivem Formularblock vorkonfigurierten AEM-Projekt

Die AEM Forms-Bausteinvorlage ermöglicht einen schnellen Einstieg in ein AEM-Projekt, das mit dem adaptiven Formularblock vorkonfiguriert ist. Dies ist die schnellste und einfachste Methode, AEM Best Practices zu befolgen und direkt mit der Formularerstellung zu beginnen.

Erste Schritte mit der AEM Forms-Baustein-Repository-Vorlage

  1. Erstellen Sie ein GitHub-Repository für Ihr AEM-Projekt. So erstellen Sie ein Repository:

    1. Navigieren Sie zu https://github.com/adobe-rnd/aem-boilerplate-forms.

      AEM Forms-Bausteinvorlage

    2. Klicken Sie auf Use this template (Diese Vorlage verwenden) und wählen Sie die Option Create a new repository (Neues Repository erstellen) aus. Der Bildschirm zum Erstellen eines neuen Repositorys wird geöffnet.

      Erstellen eines neuen Repositorys mithilfe der AEM Forms-Bausteinvorlage

    3. Wählen Sie im Bildschirm zum Erstellen eines neuen Repositorys die verantwortliche Person aus und geben Sie den Repository-Namen an. Adobe empfiehlt, das Repository als öffentlich festzulegen. Wählen Sie daher die Option Public (öffentlich) aus und klicken Sie auf Create Repository (Repository erstellen).

    Festlegen des Repositorys als öffentlich

  2. Installieren Sie die AEM Code Sync GitHub App in Ihrem Repository. So installieren Sie sie:

    1. Navigieren Sie zu https://github.com/apps/aem-code-sync/installations/new.
    2. Wählen Sie im Bildschirm zum Installieren der AEM-Code-Synchronisierung die Option Only select Repositories (Nur ausgewählte Repositorys) und dann das neu erstellte Repository aus. Klicken Sie auf „Speichern“.

    Festlegen des Repositorys als öffentlich

    note note
    NOTE
    Wenn Sie GitHub Enterprise mit IP-Filterung verwenden, können Sie die folgende IP zur Zulassungsliste hinzufügen: 3.227.118.73

    Herzlichen Glückwunsch! Sie haben eine neue Website auf https://<branch>--<repo>--<owner>.hlx.page/.

    • <branch> bezieht sich auf die Verzweigung Ihres GitHub-Repositorys.
    • <repository> bezeichnet Ihr GitHub-Repository.
    • <owner> bezieht sich auf den Benutzernamen Ihres GitHub-Kontos, das Ihr GitHub-Repository hostet.

    Wenn der Name der Verzweigung beispielsweise main lautet, das Repository wefinance und der Eigentümer wkndforms ist, würde die Website unter https://main–wefinance–wkndforms.hlx.page/ ausgeführt.

Verknüpfen Ihrer eigenen Inhaltsquelle

Ihr neu erstelltes GitHub-Repository verweist auf Beispielinhalt, der im Ordner „Google Drive“ gespeichert ist. Dieser schreibgeschützte Inhalt bietet einen guten Ausgangspunkt für Ihre Formulare. Sie können ihn in Ihr eigenes Google Drive kopieren und an Ihre Anforderungen anpassen.

Beispielinhalt auf Google Drive

Kopieren des Beispielinhalts in Ihren eigenen Inhaltsordner und Verweisen Ihres GitHub-Repositorys auf Ihren eigenen Inhaltsordner:

  1. Erstellen Sie einen neuen Ordner speziell für Ihren AEM-Inhalt in Google Drive oder Microsoft SharePoint. In diesem Dokument wird ein Ordner verwendet, der in Microsoft SharePoint erstellt wurde.

  2. Geben Sie den Ordner für die Benutzerin bzw. den Benutzer von Adobe Experience Manager frei (helix@adobe.com).

    SharePoint: Verwenden der Option „Zugriff verwalten“, um Ordner für die AEM-Benutzerin bzw. den Benutzer freizugeben.

    Google Drive: Verwenden der Option „Zugriff verwalten“, um Ordner für die AEM-Benutzerin bzw. den Benutzer freizugeben.

    Stellen Sie sicher, dass Sie der Adobe Experience Manager-Benutzerin bzw. dem -Benutzer Bearbeitungsrechte für den Ordner zugewiesen haben.

    SharePoint: Freigeben des Ordners für die AEM-Benutzerin bzw. den -Benutzer und Bereitstellen von Bearbeitungsrechten

    Google Drive: Freigeben des Ordners für die AEM-Benutzerin bzw. den -Benutzer und Bereitstellen von Bearbeitungsrechten

  3. Kopieren Sie den Beispielinhalt, der im Google Drive-Ordner gespeichert ist, in Ihren Ordner. So kopieren Sie ihn:

    1. Laden Sie die Dateien zusammen oder als Einzeldateien herunter.

      Herunterladen von Beispielinhalt

      Die Dateien nav und footer definieren das grundlegende Layout Ihrer Seiten und ändern sich im gesamten Projekt nur selten. Sie haben auch eine bestimmte Struktur, die sich von den meisten anderen Inhaltsdateien unterscheidet. Indem Sie sich diese Dateien ansehen, werden Sie ein Gefühl dafür bekommen, wie Inhalte in AEM Projekten organisiert werden.

    2. Laden Sie diese Dateien in den Microsoft SharePoint- oder Google Drive-Ordner hoch.

      Beispielinhalt auf Google Drive

      Stellen Sie sicher, dass Sie das Blatt enquiry aus dem Beispielinhalt in Ihren Ordner auf Google Drive oder Microsoft SharePoint kopieren. Es enthält die Struktur für ein Beispielformular.

  4. Nachdem Sie Ihren Inhaltsordner eingerichtet haben, ist es an der Zeit, ihn mit Ihrem Projekt auf GitHub zu verknüpfen, das Sie zuvor mit dem AEM Forms-Textbaustein erstellt haben. So richten Sie die Verbindung ein:

    1. Wechseln Sie zum GitHub-Repository, das Sie zuvor mit dem AEM Forms-Textbaustein erstellt haben.

    2. Öffnen Sie fstab.yaml zur Bearbeitung.

    3. Ersetzen Sie die vorhandene Referenz durch den Pfad zum Ordner, den Sie für die AEM-Benutzerin bzw. den -Benutzer freigegeben haben (helix@adobe.com).

      Beispielinhalt auf Google Drive

      Wenn Sie Microsoft SharePoint verwenden, verwendet der Ordnerpfad das folgende Format:

      code language-html 
      https://<tenant>.SharePoint.com/sites/<sp-site>/Shared%20Documents/<folder-name>

      Zum Beispiel:

      code language-html 
      https://adobe.SharePoint.com/sites/wkndforms/Shared%20Documents/wefinance

      Weitere Informationen zum Verwalten von Dateien in Microsoft SharePoint finden Sie unter Verwenden von Adobe SharePoint.

    4. Übergeben Sie die aktualisierte Datei fsatb.yaml, sobald Sie die Referenz aktualisiert haben und alles gut aussieht. Wenn Build-Probleme auftreten, lesen Sie Beheben von Build-Problemen in GitHub.

      Übergeben der aktualisierten Datei fsatab.yaml

      Dadurch wird Ihr Inhaltsordner mit Ihrer Website verbunden. Nach der Aktualisierung der Referenz treten möglicherweise anfänglich Fehler vom Typ „404 nicht gefunden“ auf. Dies liegt daran, dass Ihre Inhalte noch nicht in der Vorschau angezeigt wurden. Im nächsten Abschnitt wird erläutert, wie Sie mit der Bearbeitung und Vorschau Ihres Inhalts beginnen können.

Vorschau und Veröffentlichen Ihres Inhalts

Nach Abschluss des letzten Schritts ist Ihre neue Inhaltsquelle zwar nicht leer, sie wird jedoch erst auf Ihrer Website sichtbar, wenn sie in die Vorschau- oder Live-Phasen weitergeleitet wird. Derzeit kann dies zu 404-Fehlern führen.

So zeigen Sie nicht veröffentlichte Inhalte in einer Vorschau an:

  1. Installieren Sie die Chrome-Erweiterung AEM Sidekick.

    Installieren von AEM Sidekick

    Nachdem Sie die Erweiterung in Chrome installiert haben, vergessen Sie nicht, sie anzuheften. So können Sie sie einfacher finden.

    Anheften von AEM Sidekick

  2. Um die Sidekick-Chrome-Erweiterung einzurichten, wechseln Sie zum zuvor freigegebenen Google Drive- oder Microsoft SharePoint-Ordner, klicken Sie in der Browser-Symbolleiste mit der rechten Maustaste auf das Erweiterungssymbol und wählen Sie Add this project aus.

    AEM Sidekick – Hinzufügen eines Projekts

    Wenn die Erweiterung installiert und Ihr Projekt hinzugefügt ist, können Sie Ihre Inhalte auf Ihrem Google Drive in einer Vorschau anzeigen und veröffentlichen.

  3. Wählen Sie alle Dokumente im Microsoft SharePoint- oder Google Drive-Ordner aus. Sie können mehrere Dokumente auswählen, indem Sie mit gedrückter Strg-Taste (Windows/Linux) oder Befehlstaste (Mac) auf diese klicken.

    Auswählen aller Dateien

  4. Klicken Sie auf das AEM Sidekick-Symbol, das an Ihrer Chrome-Erweiterungsleiste angeheftet ist. Auf dem Bildschirm wird eine Symbolleiste angezeigt. Sie können die Inhalte in einer Vorschau anzeigen oder veröffentlichen.

    Wenn Sie index-, nav-, footer- und enquiry-Dateien herüberkopiert haben, handelt es sich dabei um separate Dokumente mit eigenen Vorschau- und Veröffentlichungszyklen. Stellen Sie daher sicher, dass Sie alle Dokumente in einer Vorschau anzeigen (und veröffentlichen).

    Nach Vorschau der Dateien werden die Dokumente auf neuen Browser-Registerkarten angezeigt. Um das Beispielformular in einer Vorschau anzuzeigen, navigieren Sie zur folgenden URL:

    code language-html 
    https://<branch>--<repository>--<owner>.hlx.live
    • <branch> bezieht sich auf die Verzweigung Ihres GitHub-Repositorys.
    • <repository> bezeichnet Ihr GitHub-Repository.
    • <owner> bezieht sich auf den Benutzernamen Ihres GitHub-Kontos, das Ihr GitHub-Repository hostet.

    URL.https://<branch>--<repo>--<owner>.hlx.page/enquiry

    Wenn das Repository Ihres Projekts beispielsweise „wefinance“ heißt, befindet es sich unter dem Kontobesitzer bzw. der Kontobesitzerin „wkndforms“. Wenn Sie die Verzweigung „main“ verwenden, sieht die URL wie folgt aus:

    https://main–wefinance–wkndforms.hlx.page

Erstellen eines Formulars

Der Beispielinhalt enthält ein Blatt „enquiry“, das als Vorlage für das Formular „enquiry“ dient. Jede Zeile des Blatts steht für ein Formularfeld und die Spaltenüberschriften definieren die Feldeigenschaften. Mit diesem Beispielformular können Sie sofort mit der Formularerstellung loslegen.

Formular „enquiry“

Aktualisieren wir zunächst einen Feldtitel. Öffnen Sie das Blatt „enquiry“ zur Bearbeitung, ändern Sie den Titel der Senden-Schaltfläche in Let's Chat und verwenden Sie AEM Sidekick, um die Datei in einer Vorschau anzuzeigen und zu veröffentlichen.

Formular „enquiry“

Wenn Sie die Datei in einer Vorschau anzeigen oder veröffentlichen, wird eine JSON-Version der Datei auf einer neuen Registerkarte angezeigt. Kopieren Sie die Vorschau-URL (.hlx.page) oder die Veröffentlichungs-URL (.hlx.live) der Datei.

JSON des Formular-Arbeitsblatts

Öffnen Sie die enquiry-Datei und ersetzen Sie die URL im Formularblock durch die URL der im vorherigen Schritt kopierten Datei. Stellen Sie sicher, dass die URL ein Hyperlink ist.

„enquiry“-Datei mit der .json-URL der URL des Arbeitsblatts

Verwenden Sie AEM Sidekick, um das „enquiry“-Dokument in einer Vorschau anzuzeigen und zu veröffentlichen.

„enquiry“-Datei mit der .json-URL der URL des Arbeitsblatts

Um eine Vorschau des aktualisierten Formulars „enquiry“ anzuzeigen, gehen Sie zur folgenden URL:

    https://<branch>--<repository>--<owner>.hlx.page/enquiry

Der Titel der Senden-Schaltfläche wird in Let's Chat geändert.

Formular „enquiry“

Ausführliche Informationen zum Erstellen und Veröffentlichen eines neuen Formulars finden Sie in der Anleitung Erstellen eines Formulars.

Entwickeln von Stilen und Funktionen

Gehen Sie wie folgt vor, um in kürzester Zeit über eine lokale AEM-Entwicklungsumgebung zu verfügen:

  1. AEM-CLI installieren: Die AEM-CLI vereinfacht Entwicklungsaufgaben. Installieren Sie sie global mit npm:

    code language-bash 
        npm install -g @adobe/aem-cli

  2. GitHub-Projekt klonen: Klonen Sie Ihr Projekt-Repository von GitHub mithilfe des folgenden Befehls und ersetzen Sie durch die Repository-Besitzerin bzw. den Repository-Besitzer und mit dem Repository-Namen:

    code language-none 
    git clone https://github.com/<owner>/<repo>

  3. Starten Sie Ihre lokale Umgebung: Navigieren Sie zu Ihrem Projektverzeichnis und starten Sie Ihre lokale AEM-Instanz mit einem einzigen Befehl:

    code language-none 
    cd <repo>
aem up

Der Ordner blocks/form des adaptiven Formularblocks ist Ihr Spielplatz für Stile und Code für Ihre Formulare! Sie können alle .css- oder .js-Dateien in diesem Verzeichnis bearbeiten. Die Änderungen werden sofort in Ihrem Browser angezeigt.

Bereit zur Präsentation Ihrer Kreation? Verwenden Sie Git, um Ihre Änderungen zu bestätigen und zu übertragen. Dadurch werden Ihre Vorschau- und Produktionsumgebungen aktualisiert, auf die über diese URLs zugegriffen werden kann (Platzhalter durch Ihre Projektdetails ersetzen):

Vorschau: https://<branch>--<repo>--<owner>.hlx.page/
Produktion: https://<branch>--<repo>--<owner>.hlx.live/

Herzlichen Glückwunsch! Sie haben Ihre lokale Entwicklungsumgebung erfolgreich eingerichtet und Ihre Änderungen bereitgestellt.

Hinzufügen eines adaptiven Formularblocks zu Ihrem bestehenden AEM-Projekt

https://video.tv.adobe.com/v/3427789

Wenn Sie über ein vorhandenes AEM-Projekt verfügen, können Sie den adaptiven Formularblock in Ihr aktuelles Projekt integrieren, um mit der Formularerstellung zu beginnen.

NOTE
Dieser Schritt gilt für Projekte, die mit dem AEM-Textbaustein erstellt wurden. Wenn Sie Ihr AEM Projekt mit dem AEM Forms-Textbaustein erstellt haben, können Sie diesen Schritt überspringen.

So integrieren Sie ihn:

  1. Klonen Sie das Repository des adaptiven Formularblocks, https://github.com/adobe-rnd/aem-boilerplate-forms, auf Ihren Computer.

  2. Suchen Sie im heruntergeladenen Ordner nach dem Ordner blocks/form. Kopieren Sie diesen Ordner. Navigieren Sie nun zum lokalen Ordner blocks Ihres AEM-Projekts und fügen Sie den kopierten Formularordner hier ein.

  3. Bestätigen Sie diese Änderungen und übertragen Sie sie in Ihr AEM-Projekt auf GitHub.

Das war's! Der adaptive Formularblock ist jetzt Teil Ihres AEM-Projekts. Sie können mit der Erstellung und dem Hinzufügen von Formularen zu Ihren AEM-Seiten beginnen.

Beheben von Build-Problemen in GitHub

Stellen Sie einen reibungslosen Build-Prozess in GitHub sicher, indem Sie potenzielle Probleme beheben:

  • Auflösen des Modulpfadfehlers:
    Wenn der Fehler „Pfad zum Modul ‚…/…/scripts/lib-franklin.js‘ kann nicht aufgelöst werden“ auftritt, navigieren Sie zu [EDS-Projekt]/blocks/forms/form.js. Aktualisieren Sie die Importanweisung, indem Sie die Datei „lib-franklin.js“ durch die Datei „aem.js“ ersetzen.

  • Beheben von Linting-Fehlern:
    Sollten Sie auf Linting-Fehler stoßen, können Sie diese umgehen. Öffnen Sie die Datei [EDS Project]/package.json und ändern Sie das Skript „lint“ von "lint": "npm run lint:js && npm run lint:css" zu "lint": "echo 'skipping linting for now'". Speichern Sie die Datei und übertragen Sie die Änderungen auf Ihr GitHub-Projekt.

Siehe auch

recommendation-more-help
fbcff2a9-b6fe-4574-b04a-21e75df764ab