Designs in adaptiven Formularen (Kernkomponenten)

Sie können mithilfe von Kernkomponenten Designs erstellen und anwenden, um ein adaptives Formular zu formatieren. Ein Design enthält Stildetails für die Komponenten und Bedienfelder. Die Stile umfassen Eigenschaften wie Hintergrundfarben, Statusfarben, Transparenz, Ausrichtung und Größe. Wenn Sie ein Design anwenden, spiegeln die entsprechenden Komponenten den angegebenen Stil wider. Das Design wird unabhängig, ohne Verweis auf ein adaptives Formular, verwaltet.

Wenn Sie ein adaptives Formular unter Verwendung von Kernkomponenten erstellen, erscheinen die vorkonfigurierten Designs unter der Registerkarte Stil. Standardmäßig ist nur das Canvas-Design verfügbar.

Verwenden des Canvas-Designs in adaptiven Formularen mit Kernkomponenten

Schritte zum Anwenden eines Designs auf ein adaptives Formular:

1. Melden Sie sich bei Ihrer AEM Forms-Autoreninstanz an.

2. Tippen Sie auf Adobe Experience Manager > Formulare > Formulare und Dokumente.

3. Klicken Sie auf Erstellen > Adaptive Formulare. Der Assistent zum Erstellen des adaptiven Formulars wird geöffnet.

4. Wählen Sie die Kernkomponentenvorlage auf der Registerkarte Quelle.

   HINWEIS

   Wenn Sie ein adaptives Formular mit Kernkomponenten erstellen, wird auf der Registerkarte „Stil“ das Canvas-Design angezeigt. Dies ist das einzige vorkonfigurierte Design, das derzeit verfügbar ist. Sie können das Design jedoch nach Ihren Vorstellungen ändern und für die zukünftige Verwendung speichern, indem Sie eine Frontend-Pipeline einrichten.

5. Wählen Sie das Canvas-Design auf der Registerkarte Stil.

6. Klicken Sie auf Erstellen.

Designs für adaptive Formulare werden als Teil einer Vorlage für adaptive Formulare verwendet, um beim Erstellen eines adaptiven Formulars Stile zu definieren.

Anpassen des Designs

Anpassen eines Designs:

• Einrichten einer Pipeline in Cloud Manager
• Konfigurieren Sie eine Benutzerin bzw. einen Benutzer mit der Rolle Mitwirkende.
• Sie sollten über Grundkenntnisse in Git und Cloud Service-Git-Repositorys verfügen.

Anpassen eines Canvas-Designs:

1. Klonen des Canvas-Designs
2. Grundlegendes zur Struktur des Designs
3. Name in package.json und package_lock.json ändern
4. Erstellen Sie die
5. Starten Sie den lokalen Proxy-Server
6. Anpassen des Designs
7. Übergeben Sie die Änderungen
8. Bereitstellen der Pipeline

1. Klonen Sie das Canvas-Design

Öffnen Sie die Eingabeaufforderung und führen Sie den folgenden Befehl aus, um das Canvas-Design zu klonen:

git clone https://github.com/adobe/aem-forms-theme-canvas

2. Grundlegendes zur Struktur des Designs

Ein Design für adaptive Formulare ist ein Paket, das die CSS-, JavaScript- und statischen Ressourcen enthält, die das Aussehen Ihrer Formulare definieren und die Struktur eines Designs für adaptive Formulare einhalten. Ein Design für adaptive Formulare weist die folgende Struktur auf, die für ein Frontend-Projekt typisch ist:

• src/components: JavaScript- & CSS-Dateien, die spezifisch für AEM-Kernkomponenten sind
• src/resources: Statische Dateien wie Symbole, Logos und Schriftarten
• src/site: JavaScript- & CSS-Dateien, die für die gesamte AEM Sites-Seite gelten
• src/theme.ts: Der Haupteinstiegspunkt für Ihr JavaScript- und CSS-Design
• src\theme.scss: JavaScript- und CSS-Dateien, die für das gesamte Design gelten

Der Ordner src/components enthält JavaScript- und CSS-Dateien, die für alle AEM-Kernkomponenten wie Schaltfläche, Kontrollkästchen, Container, Fußzeile usw. spezifisch sind. Sie können die Schaltfläche oder das Kontrollkästchen gestalten, indem Sie die CSS-Datei bearbeiten, die für die AEM-Komponente spezifisch ist.

Um das Design anzupassen, können Sie den lokalen Proxy-Server starten und die Design-Anpassungen in Echtzeit basierend auf tatsächlichen AEM-Inhalt anzeigen.

3. Ändern Sie den Namen des Canvas-Designs in package.json und package_lock.json

Aktualisieren Sie den Namen und die Version des Canvas-Designs in den Dateien package.json und package_lock.json.

4. Erstellen Sie die .env-Datei in einem Design-Ordner

Erstellen Sie eine .env-Datei im Design-Ordner und fügen Sie die folgenden Parameter hinzu:

• AEM URL
  AEM_URL=https://[author-instance]

• AEM Site-Name
  AEM_ADAPTIVE_FORM=Form_name

• AEM Proxy-Port
  AEM_PROXY_PORT=7000

5. Starten Sie einen lokalen Proxy-Server

1. Navigieren Sie in der Befehlszeile zum Stammverzeichnis des Designs auf Ihrem lokalen Computer.

2. Führen Sie npm install aus. npm ruft die Abhängigkeiten ab und installiert das Projekt.

3. Führen Sie npm run live aus. Der Proxy-Server wird gestartet.

   

4. Tippen oder klicken Sie auf LOKAL ANMELDEN (NUR AUFGABEN VON ADMINS und melden Sie sich mit den von AEM-Admins für Sie bereitgestellten Anmeldeinformationen des Proxy-Benutzers an.

   

   HINWEIS

   • Erstellen Sie einen lokalen Benutzer, um sich lokal anzumelden. Geben Sie die Mitwirkende-Rolle für den Design-Designer an.
   • Wenn Sie die AEM-URL als http://localhost:[port]/ in der .env-Datei des Canvas-Designs angeben, werden Sie direkt zum Browser weitergeleitet.

5. Ändern Sie nach der Anmeldung die URL im Browser dahingehend, dass sie auf den Pfad zu den Beispielinhalten verweist, den der AEM-Administrator für Sie bereitgestellt hat.

   • Wenn der angegebene Pfad z. B. /content/formname.html?wcmmode=disabled war, ändern Sie die URL zu http://localhost:[port]/content/forms/af/formname.html?wcmmode=disabled

   

Navigieren Sie zu einem adaptiven Formular, um das auf ein adaptives Formular angewendete Canvas-Design anzuzeigen.

6. Passen Sie das Design an

1. Öffnen Sie die Datei <your-theme-sources>/src/site/_variables.scss in Ihrem Editor.

   HINWEIS

   Sie können alle Komponenten des adaptiven Formulars in einer Site direkt gestalten, indem Sie die site/_variables.scss-Datei bearbeiten.

2. Bearbeiten Sie die Variable für die font colour auf red.

   

   Gestalten Sie die verschiedenen AEM-Komponenten.

   Sie können die verschiedenen Komponenten eines adaptiven Formulars formatieren, indem Sie dessen CSS-Datei im Editor ändern. Es gibt verschiedene CSS-Ordner für jede Kernkomponente des adaptiven Formulars im Canvas-Design-Ordner.

   

   Um Stile für eine bestimmte Komponente im Design-Editor anzugeben, können Sie die CSS in einem Design-Ordner bearbeiten. Wenn Sie beispielsweise die Rahmenfarbe eines Textfeldfelds ändern möchten, öffnen Sie die CSS-Datei im Editor und ändern Sie die Rahmenfarbe dort.

   

3. Wenn Sie die Datei speichern, erkennt der Proxy-Server die Änderung über die Zeile [Browsersync] File event [change].

   

4. Wenn Sie zum Browser des lokalen Proxy-Servers zurückkehren, ist die Änderung sofort sichtbar.

   

Der Design-Designer zeigt eine Vorschau der Änderungen im lokalen Proxy-Server an und passt das Design entsprechend den Anforderungen für verschiedene AEM-Komponenten an.

Bevor Sie die Änderungen in das AEM Git-Repository übernehmen, müssen Sie auf Ihre Git-Repository-Informationen zugreifen.

7. Bestätigen Sie die Änderungen

Nachdem Sie Änderungen am Design vorgenommen und es mit einem lokalen Proxy-Server getestet haben, übertragen Sie die Änderungen in das Git-Repository Ihres AEM Forms Cloud Services. Dadurch wird das angepasste Design in Ihrer Forms Cloud Service-Umgebung für Autoren von adaptiven Formularen zur Verfügung gestellt.

Bevor Sie Änderungen an das Git-Repository Ihres AEM Forms Cloud Services übertragen, benötigen Sie einen Klon des Repositorys auf Ihrem lokalen Computer. Klonen des Repositorys:

1. Erstellen Sie ein neues Design-Repository, indem Sie auf die Repositorys-Option klicken.

   

2. Klicken Sie auf Repository hinzufügen und geben Sie den Repository-Namen im Dialogfeld Repository hinzufügen an. Klicken Sie auf Speichern.

   

3. Klicken Sie auf Repository-URL kopieren, um die URL des erstellten Repositorys zu kopieren.

   

4. Öffnen Sie die Eingabeaufforderung und klonen Sie das oben erstellte Cloud-Repository.

   git clone https://git.cloudmanager.adobe.com/aemforms/Canvasthemerepo/
   

5. Verschieben Sie die Dateien des Design-Repositorys, das Sie bearbeiten, in das Cloud-Repository mit einem ähnlichen Befehl wie
   cp -r [source-theme-folder]/* [destination-cloud-repo]
   Verwenden Sie beispielsweise diesen Befehl
   cp -r [C:/cloned-git-canvas/*] [C:/cloned-repo]

6. Bestätigen Sie mit den folgenden Befehlen die Design-Dateien im Verzeichnis des Cloud-Repository, die Sie hierhin verschoben haben.

   git add .
   git commit -a -m "Adding theme files"
   git push
   

7. Die Anpassungen werden auf das Git-Repository übertragen.

   

Ihre Anpassungen sind jetzt sicher im Git-Repository gespeichert.

8. Ausführen der Frontend-Pipeline

1. Erstellen Sie die Frontend-Pipeline, um das angepasste Design bereitzustellen. Erfahren Sie, wie Sie eine Frontend-Pipeline zur Bereitstellung eines benutzerdefinierten Designs einrichten.
2. Führen Sie die erstellte Frontend-Pipeline aus, um den benutzerdefinierten Design-Ordner unter der Registerkarte Stil des Assistenten zur Erstellung eines adaptiven Formulars bereitzustellen.

Beispiel für die Anpassung des Designs

1. Melden Sie sich bei Ihrer AEM Forms-Autoreninstanz an.
2. Öffnen Sie ein adaptives Formular, das mithilfe von Kernkomponenten erstellt wurde.
3. Starten Sie den lokalen Proxy-Server über die Eingabeaufforderung und klicken Sie auf LOKAL ANMELDEN (NUR ADMINISTRATORAUFGABEN).
4. Nach der Anmeldung werden Sie zum Browser weitergeleitet, wo Sie das angewendete Design sehen.
5. Laden Sie das Arbeitsflächen-Design herunter und extrahieren Sie den heruntergeladenen ZIP-Ordner.
6. Öffnen Sie den extrahierten ZIP-Ordner in Ihrem bevorzugten Editor.
7. Erstellen Sie eine .env-Datei im Design-Ordner und fügen Sie Parameter hinzu: AEM URL, AEM_ADAPTIVE_FORM und AEM_PROXY_PORT.
8. Öffnen Sie die CSS-Datei des Textfelds im Ordner des Arbeitsflächen-Designs und ändern Sie die Farbe des Rahmens in red und speichern Sie die Änderungen.
9. Öffnen Sie den Browser erneut und Sie sehen, dass die Änderungen sofort in einem adaptiven Formular übernommen werden.
10. Verschieben Sie den Ordner des Arbeitsflächen-Designs in Ihr geklontes Repository.
11. Übernehmen Sie die Änderungen und führen Sie die Frontend-Pipeline aus.

Sobald die Pipeline ausgeführt wird, ist das Design auf der Registerkarte „Stil“ verfügbar.

Best Practices

• Vermeiden von Assets aus einem anderen Design

  Bei der Bearbeitung von Designs können Sie Assets (etwa Bilder) aus anderen Designs durchsuchen und hinzufügen. Angenommen, Sie bearbeiten den Hintergrund einer Seite. Wenn Sie beispielsweise Seite > Hintergrund > Hinzufügen > Bild auswählen, wird ein Dialogfeld angezeigt, in dem Sie Bilder aus anderen Designs suchen und hinzufügen können.

  Es können Probleme im aktuellen Design auftreten, wenn ein Asset aus einem anderen Design hinzugefügt und dieses andere Design später verschoben oder gelöscht wird. Wir empfehlen daher, keine Assets aus anderen Designs zu suchen und hinzuzufügen.

• Ändern der Layout-Breite des Container-Bereichs

  Es wird nicht empfohlen, die Layout-Breite des Container-Bereichs zu ändern. Wenn Sie die Breite eines Container-Bereichs angeben, wird er statisch und passt sich nicht mehr an unterschiedliche Displays an.

• Verwendung des Formular- oder Design-Editors für die Arbeit mit Kopf- und Fußzeile

  Verwenden Sie den Design-Editor, wenn Sie Kopf- und Fußzeilen mit Formatierungsoptionen wie Schriftschnitt, Hintergrund und Transparenz formatieren möchten.
  Wenn Sie Informationen wie ein Logo, einen Firmennamen in der Kopfzeile und Copyright-Informationen in der Fußzeile angeben möchten, verwenden Sie dazu die im Formular-Editor verfügbaren Optionen.

Ressourcen für Business.Adobe.com