Designs in Adaptive Forms

Letzte Aktualisierung: 2023-11-21
Version Artikel-Link
AEM 6.5 Hier klicken
AEM as a Cloud Service Dieser Artikel

Sie können Designs erstellen und anwenden, um ein adaptives Formular zu formatieren. Zu einem Design gehören 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. Ein Design wird unabhängig voneinander ohne Verweis auf ein adaptives Formular verwaltet und kann über mehrere adaptive Forms hinweg wiederverwendet werden.

Verfügbare Designs

Forms as Cloud Service bietet die folgenden aufgelisteten Designs für Kernkomponenten-basiertes adaptives Forms:

Grundlegendes zur Struktur der Themen

Ein Design ist ein Paket, das die CSS-Datei, JavaScript-Dateien und Ressourcen (wie Symbole) umfasst, die den Stil Ihres adaptiven Forms definieren. Ein Design für adaptives Formular folgt einer bestimmten Organisation, die aus den folgenden Komponenten besteht:

  • src/theme.scss: Dieser Ordner enthält die CSS-Datei, die einen breiten Einfluss auf das gesamte Design hat. Es dient als zentralisierter Ort zur Definition und Verwaltung des Stils und Verhaltens Ihres Designs. Durch Bearbeitung dieser Datei können Sie Änderungen vornehmen, die im gesamten Design allgemein angewendet werden und das Erscheinungsbild und die Funktionalität Ihrer adaptiven Forms- und AEM Sites-Seiten beeinflussen.

  • src/site: Dieser Ordner enthält CSS-Dateien, die auf die Seite einer gesamten AEM Site angewendet werden. Diese Dateien bestehen aus Code und Stilen, die sich auf die Funktionalität und das Layout der Seite Ihrer AEM auswirken. Alle hier vorgenommenen Änderungen werden auf allen Seiten Ihrer Site übernommen. [Wann sollte es verwendet werden?]

  • src/components: Die CSS-Dateien in diesem Ordner sind für einzelne AEM Kernkomponenten entwickelt. Jeder dedizierte Ordner für eine Komponente enthält .scss -Datei, die diese bestimmte Komponente in einem adaptiven Formular formatiert. Beispielsweise enthält die Datei /src/components/accordion/_accordion.scss Stilinformationen für die Adaptive Forms Accordion-Komponente.

    Designstruktur für adaptives Formular

  • src/resources: Dieser Ordner enthält statische Dateien wie Symbole, Logos und Schriftarten. Diese Ressourcen werden verwendet, um die visuellen Elemente und das Gesamtdesign Ihres Designs zu verbessern.

Erstellen von Designs

Forms bietet die folgenden aufgelisteten Designs für die auf Kernkomponenten basierende adaptive Forms.

Sie können Anpassen dieser Designs, um ein neues Design zu erstellen.

Workflow für die Designanpassung

Anpassen eines Designs

Das Anpassen eines Designs bezieht sich auf den Prozess der Änderung und Personalisierung des Erscheinungsbilds eines Designs. Wenn Sie ein Design anpassen, ändern Sie dessen Design-Elemente, Layout, Farben, Typografie und manchmal den zugrunde liegenden Code. Damit können Sie ein einzigartiges und maßgeschneidertes Erscheinungsbild für Ihre Website oder Anwendung erstellen und dabei die grundlegende Struktur und Funktionalität des Designs beibehalten.

Voraussetzungen

  • Machen Sie sich mit Einrichten einer Pipeline in Cloud Manager und über grundlegende Kenntnisse zum Einrichten einer Pipeline verfügen, können Sie Ihre Designanpassungen effizient verwalten und bereitstellen.
  • Erfahren Sie, wie Konfigurieren eines Benutzers mit der Rolle "Mitarbeiter". Wenn Sie verstehen, wie Sie einen Benutzer mit der Rolle "contributor"konfigurieren, können Sie die erforderlichen Berechtigungen für die Designanpassung erteilen.
  • Installieren Sie die neueste Version von Apache Maven. Apache Maven ist ein Werkzeug zur Automatisierung von Builds, das häufig für Java™-Projekte verwendet wird. Durch die Installation der neuesten Version stellen Sie sicher, dass Sie über die erforderlichen Abhängigkeiten für die Designanpassung verfügen.
  • Installieren Sie einen Nur-Text-Editor. Beispielsweise Microsoft® Visual Studio-Code. Die Verwendung eines Texteditors wie Microsoft® Visual Studio Code bietet eine benutzerfreundliche Umgebung zum Bearbeiten und Ändern von Designdateien.

Einrichten Ihrer Arbeitsumgebung

Nachdem Sie die Voraussetzungen kennengelernt und die Entwicklungsumgebung konfiguriert haben, sind Sie gut darauf vorbereitet, Ihr Thema an Ihre spezifischen Anforderungen anzupassen.

Anpassen eines Designs

Das Anpassen eines Designs ist ein mehrstufiger Prozess. Um das Design anzupassen, führen Sie die Schritte in der angegebenen Reihenfolge aus:

  1. Klonen eines Designs
  2. Namen eines Designs festlegen
  3. Anpassen eines Designs
  4. Testen eines Designs
  5. Bereitstellen eines Designs

Die im Dokument bereitgestellten Beispiele basieren auf dem Arbeitsfläche -Design, aber es ist wichtig zu beachten, dass Sie jedes Thema klonen und es mit denselben Anweisungen anpassen können. Diese Anweisungen gelten für jedes Thema, sodass Sie Designs entsprechend Ihren spezifischen Anforderungen ändern können.

1. Ein Design klonen

Um ein Design für die auf Kernkomponenten basierende adaptive Forms zu klonen, wählen Sie eines der folgenden Designs:

Um ein Design zu klonen, führen Sie die folgenden Anweisungen aus:

  1. Öffnen Sie die Eingabeaufforderung oder das Terminal-Fenster in Ihrer lokalen Entwicklungsumgebung.

  2. Führen Sie die git clone -Befehl zum Klonen eines Designs.

       git clone [Path of Git Repository of the theme]
    

    Ersetzen Sie die [Pfad des Git-Repositorys des Designs] mit der tatsächlichen URL des entsprechenden Git-Repositorys des Designs

    Um beispielsweise das Canvas-Design zu klonen, führen Sie den folgenden Befehl aus:

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

    Nachdem Sie den Befehl erfolgreich ausgeführt haben, steht auf Ihrem Computer eine lokale Kopie des Designs im aem-forms-theme-canvas Ordner.

2. Namen eines Designs festlegen

  1. Öffnen Sie den Ordner "Design"in einem Texteditor. Um beispielsweise die aem-forms-theme-canvas Ordner im Visual Studio-Code-Editor.

  2. Navigieren Sie zum Ordner aem-forms-theme-canvas.

  3. Führen Sie den folgenden Befehl aus:

          code .
    

    Öffnen Sie den Designordner in einem Texteditor.

    Der Ordner wird im Visual Studio-Code geöffnet.

  4. Öffnen Sie die Datei package.json, um sie zu bearbeiten.

  5. Legen Sie die Werte für die name und description -Attribute.

    Das Attribut name wird verwendet, um das Design eindeutig zu identifizieren, z. B. "aem-forms-wknd-theme", das im Stil Tab von Assistent zum Erstellen von Formularen. Das Attribut description enthält zusätzliche Details zum Thema, einschließlich seines Zwecks und der Szenarien, für die es entwickelt wurde. Sie können auch die Version, Beschreibung und Lizenz für das Design angeben.

  6. Speichern und schließen Sie die Datei.

Bild beim Namen des Arbeitsflächendesigns ändern

3. Anpassen eines Designs

Sie können einzelne Komponenten anpassen oder Änderungen auf Designebene mithilfe globaler Variablen eines Designs vornehmen. Änderungen an globalen Variablen wirken sich auf alle einzelnen Komponenten aus. Sie können beispielsweise globale Variablen verwenden, um die Rahmenfarbe aller Komponenten eines adaptiven Formulars und eine helle Füllfarbe zu ändern, um CTA (Aktionsaufruf) mithilfe der Schaltflächenkomponente festzulegen:

Festlegen von Stilen auf Designebene

Die variable.scss -Datei enthält die globalen Variablen des Designs. Durch Aktualisierung dieser Variablen können Sie stilistisch relevante Änderungen auf der Designebene vornehmen. Gehen Sie wie folgt vor, um Stile auf Designebene anzuwenden:

  1. Öffnen Sie die Datei <your-theme-sources>/src/site/_variables.scss, um sie zu bearbeiten.

  2. Ändern Sie den Wert einer beliebigen Eigenschaft. Die standardmäßige Fehlerfarbe lautet beispielsweise red. So ändern Sie die Fehlerfarbe von red nach blueändern Sie den Farb-Hex-Code des $errorvariable. Zum Beispiel: $error: #196ee5.

  3. Speichern und schließen Sie die Datei.

    Bearbeiten eines Designs

Auf ähnliche Weise können Sie die variable.scss -Datei, um Schriftfamilie und -typ, Design- und Schriftfarben, Schriftgröße, Designabstand, Fehlersymbol, Designrahmenstile und mehr Variablen festzulegen, die sich auf mehrere adaptive Formularkomponenten auswirken.

Festlegen von Stilen auf Komponentenebene

Sie können auch Schriftart, Farbe, Größe und andere CSS-Eigenschaften einer bestimmten Kernkomponente des adaptiven Formulars ändern. Beispiel: Schaltfläche, Kontrollkästchen, Container, Fußzeile usw. Sie können die Schaltfläche oder das Kontrollkästchen formatieren, indem Sie die CSS-Datei der jeweiligen Komponente bearbeiten und sie an den Stil Ihres Unternehmens anpassen. So passen Sie einen Stil einer Komponente an:

  1. Öffnen Sie die Datei <your-theme-sources>/src/components/<component>/<component.scss> zur Bearbeitung. Um beispielsweise die Schriftfarbe der Schaltflächenkomponente zu ändern, öffnen Sie die <your-theme-sources>/src/components/button/button.scss, Datei .

  2. Ändern Sie den Wert von beliebig gemäß Ihren Anforderungen. So ändern Sie beispielsweise die Farbe der Schaltflächenkomponente beim Maushover auf green, ändern Sie den Wert der color: $white -Eigenschaft in der cmp-adaptiveform-button__widget:hover -Klasse in Hex-Code #12B453 oder anderen Schatten von green. Der endgültige Code sieht wie folgt aus:

    .cmp-adaptiveform-button__widget:hover {
    background: $dark-gray;
    color: #12B453;
    }
    
  3. Speichern und schließen Sie die Datei.

    Bearbeiten der CSS-Textbox

    Wenn ein Stil sowohl auf Design- als auch auf Komponentenebene definiert ist, hat der auf Komponentenebene definierte Stil Priorität.

4. Testen eines benutzerdefinierten Designs

Um die Änderungen in der lokalen Umgebung in der Vorschau anzuzeigen und zu testen und das Design entsprechend den Anforderungen für verschiedene AEM anzupassen, führen Sie die folgenden Schritte aus:

4.1. Konfigurieren der lokalen Umgebung für Tests
  1. Öffnen Sie den Ordner "Design"in einem Texteditor. Öffnen Sie beispielsweise die aem-forms-theme-canvas Ordner im Visual Studio-Code-Editor.

  2. Benennen Sie die env_template Datei in .env -Datei im Ordner "Design"und fügen Sie die folgenden Parameter hinzu:

    * **AEM url**
    AEM_URL=https://[author-instance]
    
    * **AEM Adaptive form name**
    AEM_ADAPTIVE_FORM=Form_name
    
    * **AEM proxy port**
    AEM_PROXY_PORT=7000
    

    Beispielsweise lautet die URL des Formulars http://localhost:4502/editor.html/content/forms/af/contactusform.html. Die Werte von:

    • AEM_URL = http://localhost:4502/
    • AEM_ADAPTIVE_FORM = contactusform
  3. Speichern Sie die Datei.

    Canvas-Design-Struktur

4.2 Thema mithilfe einer lokalen Umgebung testen
  1. Navigieren Sie zum Stammverzeichnis des Designordners. In diesem Fall lautet der Name des Designordners aem-forms-theme-canvas.

  2. Öffnen Sie die Eingabeaufforderung oder das Terminal.

  3. Ausführen npm install , um die Abhängigkeiten zu installieren.

  4. Ausführen npm run live , um eine Vorschau des Formulars mit dem aktualisierten Design in Ihrem lokalen Browser anzuzeigen.

    HINWEIS

    Wenn während der Ausführung des npm run live Befehl, führen Sie die folgenden Befehle aus, bevor npm run live command:

    • npm install parcel --save-dev
    • npm i @parcel/transformer-sass

Dies ist eine heiße Implementierung. Wann immer Sie also Änderungen vornehmen und die _variables.scss und button.scss -Dateien, wählt der Server automatisch die Änderungen aus und zeigt eine Vorschau der neuesten Ausgabe an. Die Zeile [Browsersync] File event [change] bedeutet, dass der Server die neuesten Änderungen erkannt hat und die Änderungen in der lokalen Umgebung bereitstellt.

Proxy-Browser-Synchronisierung

Nach den Beispielen, die sowohl auf Design- als auch auf Komponentenebene für Designanpassungen bereitgestellt werden, werden die Fehlermeldungen eines adaptiven Formulars in blue Farbe, während sich die Beschriftungsfarbe für die Schaltflächenkomponente in green beim Bewegen der Maus.

Vorschau des Designstufenstils

Beispiel: Fehlerfarbe auf blau eingestellt

Vorschau des Stils auf Komponentenebene

Beispiel: Hover-Farbe auf Grün eingestellt

Testen des Designs für Formulare, die in einer Cloud Service-Umgebung gehostet werden

Sie können das Design auch für das adaptive Formular testen, das auf Ihrer as a Cloud Service AEM Forms-Instanz gehostet wird. Führen Sie die folgenden Schritte aus, um die lokale Umgebung für das Testen der Designs mit dem auf der Cloud-Instanz gehosteten adaptiven Forms zu konfigurieren und festzulegen:

  1. Öffnen Sie den Ordner "Design"in einem Texteditor. Öffnen Sie beispielsweise die aem-forms-theme-canvas Ordner im Visual Studio-Code-Editor.

  2. Benennen Sie die env_template Datei in .env und fügen Sie die folgenden Parameter hinzu:

    * **AEM url**
    AEM_URL=https://[author-instance]
    
    * **AEM Adaptive form name**
    AEM_ADAPTIVE_FORM=Form_name
    
    * **AEM proxy port**
    AEM_PROXY_PORT=7000
    

    Beispielsweise lautet die URL des Formulars in der Cloud-Umgebung . https://author-XXXX.adobeaemcloud.com/editor.html/content/forms/af/contactusform.html. Die Werte von:

    • AEM_URL = https://author-XXXX-cmstg.adobeaemcloud.com/
    • AEM_ADAPTIVE_FORM = contactusform
  3. Speichern Sie die Datei.

  4. Erstellen Sie einen lokalen Benutzer.

    HINWEIS

    So erstellen Sie einen lokalen Benutzer:

    • Navigieren Sie zu AEM > Instrumente > Sicherheit > Benutzer .
    • Stellen Sie sicher, dass der Benutzer Mitglied der forms-users hinzugefügt.
  5. Navigieren Sie zum Stammverzeichnis des Designordners. In diesem Fall lautet der Name des Designordners aem-forms-theme-canvas.

  6. Ausführen npm run live und Sie werden zu einem lokalen Browser weitergeleitet.

  7. Klicks SIGN IN LOCALLY (ADMIN TASKS ONLY) und melden Sie sich mit den Anmeldeinformationen des lokalen Benutzers an.

Sie können eine Vorschau des adaptiven Formulars mit den neuesten Änderungen anzeigen. Sobald Sie mit den Änderungen in einem Designordner zufrieden sind, stellen Sie das Design mithilfe der Frontend-Pipeline in Ihrer AEM Cloud Service-Umgebung bereit.

5. Bereitstellen eines Designs

So stellen Sie das Design mithilfe der Frontend-Pipeline in Ihrer Cloud Service-Umgebung bereit:

5.1 Repository für Design erstellen

Sie benötigen ein Repository, um das Design bereitzustellen. Melden Sie sich bei Ihrer AEM Cloud Manager-Repository und fügen Sie ein neues Repository für Ihr Design hinzu.

  1. Erstellen Sie ein neues Repository für Design, indem Sie auf Repositorys > Repository hinzufügen.

    Erstellen eines neuen Design-Repo

  2. Geben Sie die Repository-Name im Repository hinzufügen Dialogfeld. Der angegebene Name lautet beispielsweise custom-canvas-theme-repo.

  3. Klicken Sie auf Speichern.

    Hinzufügen eines Repository für das Canvas-Design-Repo

  4. Klicks Repository-URL kopieren zum Kopieren der URL des Repositorys.

    URL des Canvas-Designs

    HINWEIS
    • Sie können ein einzelnes Repository für mehrere Designs verwenden.
    • Um verschiedene Designs bereitzustellen, müssen Sie separate Front-End-Pipelines erstellen.
    • Sie können beispielsweise dasselbe Repository wie custom-canvas-theme-repo, für Canvas-Design, WKND-Design und EASEL-Design. Um die Designs bereitzustellen, müssen Sie jedoch separate Front-End-Pipelines erstellen. Zukünftige Anpassungen für ein bestimmtes Design werden mithilfe der entsprechenden Frontend-Pipeline bereitgestellt.
5.2. Übertragen Sie die Änderungen in das Repository

Nun können Sie die Änderungen an das Design-Repository Ihres AEM Forms-Cloud Service übertragen.

  1. Navigieren Sie zum Stammverzeichnis des Designordners. In diesem Fall lautet der Name des Designordners aem-forms-theme-canvas.

  2. Öffnen Sie die Eingabeaufforderung oder das Terminal.

  3. Führen Sie den folgenden Befehl in der angegebenen Reihenfolge aus:

    git remote add [alias-name-for-repository] [URL of repository]
    git add .
    git commit
    git push [name-for-createdrepository]
    

    Beispiel:

    git remote add canvascloudthemerepo https://git.cloudmanager.adobe.com/stage-aemformsdev/customcanvastheme/
    git add .
    git commit
    git push canvascloudthemerepo
    

    Vorgenommene Änderungen

5.3 Ausführen der Frontend-Pipeline

Das Design wird mithilfe der Front-End-Pipeline.. Um Design bereitzustellen, führen Sie die folgenden Schritte aus:

  1. Melden Sie sich bei Ihrem AEM Cloud Manager-Repository an.

  2. Klicks Hinzufügen -Schaltfläche in der Pipelines Abschnitt.

  3. Auswählen Hinzufügen einer produktionsfremden Pipeline oder Produktions-Pipeline hinzufügen basierend auf der Cloud Service-Umgebung. Hier finden Sie beispielsweise die Produktions-Pipeline hinzufügen ausgewählt ist.

  4. Im Produktions-Pipeline hinzufügen Dialog als Teil der Konfiguration -Schritte, geben Sie den Namen für Ihre Pipeline an. Beispielsweise lautet der Name der Pipeline customcanvastheme.

  5. Klicken Sie auf Weiter.

  6. Wählen Sie die Zielgerichtete Implementierung > die Frontend-Code -Optionen in der Quellcode Schritte.

  7. Wählen Sie die Repository und Git-Verzweigung -Werte, die Ihre neuesten Änderungen aufweisen. Hier lautet beispielsweise der ausgewählte Repository-Name . custom-canvas-theme-repo und die Git-Verzweigung main.

  8. Wählen Sie die Code-Speicherort as /, wenn sich Ihre Änderungen im Stammordner befinden.

  9. Klicken Sie auf Speichern.
    Front-End-Pipeline erstellen

    Nachdem die Pipelineeinrichtung abgeschlossen ist, wird die Aktionsaufruf-Karte aktualisiert.

  10. Klicken Sie mit der rechten Maustaste auf die erstellte Pipeline.

  11. Klicken Sie auf Ausführen .

    run-a-piplein

Sobald der Build abgeschlossen ist, wird das Design in der Autoreninstanz zur Verwendung verfügbar. Sie wird unter dem Stil Registerkarte im Assistenten zur Erstellung adaptiver Formulare beim Erstellen eines adaptiven Formulars.

Benutzerdefiniertes Design auf der Registerkarte "Stil"

Anwenden eines Designs auf ein adaptives Formular

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.

  5. Wählen Sie das Design im Stil Registerkarte.

  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.

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 Bearbeiten-Schaltfläche > 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.

Häufig gestellte Fragen

F: Welche Anpassung hat bei der Anpassung in einem Designordner sowohl auf globaler Ebene als auch auf Komponentenebene Priorität?

Ans: Wenn Anpassungen sowohl auf globaler als auch auf Komponentenebene vorgenommen werden, hat die Anpassung auf Komponentenebene Priorität.

Siehe auch

Auf dieser Seite