So erstellen Sie eine benutzerdefinierte Anmeldeseite im Jitterbit App Builder

Wenn Sie die App Builder-Anmeldeseite ändern möchten, beschreibt dieser Artikel die empfohlene Vorgehensweise. Diese Methode ist alternativen Methoden vorzuziehen, da Ihre Änderungen bei zukünftigen App Builder Upgrades erhalten bleiben. Alternative Methoden wie das Erstellen von Skripten für die Datenbank oder das Entsiegeln von App Builder werden nicht empfohlen und bleiben bei einem Update nicht erhalten.

Bilder können entweder mit der korrekten Syntax Base64-kodiert werden oder direkt in den App Builder hochgeladen werden (bevorzugte Methode), um sie auf der App Builder Anmeldeseite zu verwenden. Die Schritte zur Konfiguration finden Sie im Abschnitt „So verwenden Sie ein im App Builder gehostetes Bild“. Hier ist ein Link zu einer Base64 Bildkodierungsseite: https://www.base64-image.de/. Nachfolgend finden Sie Anweisungen zum Generieren eines Base64 codierten Bildes.

Um das Bild in den App Builder hochzuladen, öffnen Sie die App Builder-IDE > Erscheinungsbild > Bilder > wählen Sie die von Ihrer App verwendete Sammlung aus, klicken Sie auf „+Bild“ und laden Sie das Bild hoch. Nach dem Hochladen können Sie auf das Popup-Symbol klicken, um die Bilddetails anzuzeigen, und mit der rechten Maustaste auf das Bild klicken, sobald es im Bereich „Foto“ angezeigt wird. Eine Schritt-für-Schritt-Anleitung finden Sie weiter unten im Abschnitt „So erstellen Sie ein benutzerdefiniertes Login-Design“.

Beim Verweisen auf Bildpfade in Designs kann die genaue Syntax je nach Konfiguration der App Builder Hosting-URL leicht abweichen. Die empfohlene Vorgehensweise zum Verweisen auf einen Bildpfad besteht darin, den Pfadwert mit ./, Zum Beispiel ./service/image/153f5b0b-c367-4409-a428-23813b6a5ab2.

Um ein neues Login-Design aus Entwicklung > QA > Produktion zu übernehmen, speichern Sie Ihr benutzerdefiniertes Design in Ihrer Design-Sammlung, die den Pfad Entwicklung > QA > Produktion durchführt.

So erstellen Sie ein benutzerdefiniertes Anmeldedesign

1. Navigieren Sie zu Look and Feel
2. Bestätigen Sie, dass Sie eine Sammlung ausgewählt haben, die Sie ändern können
3. Klicken Sie auf + Design
4. Geben Sie einen eindeutigen Themennamen für das neue benutzerdefinierte Theme an. Beispiel: Customer Login Theme
5. Wählen Sie "Login Base Theme" als Basisthema
6. Klicken Sie auf die Schaltfläche Speichern
7. Wählen Sie Anmeldeformular aus dem Bereich Komponenten
8. Klicken Sie auf die Schaltfläche + Stil unter dem Bedienfeld Stile
9. Wählen Sie Login-Logo als Bereich
10. Wählen Sie Hintergrundbild als Stiltyp

11. Geben Sie die korrekt formatierte Syntax für ein Base64 kodiertes Bild ein. Beispiel:

    `data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7`
    

12. Geben Sie die Beschreibung der Technischen Hilfe ein und klicken Sie auf Speichern

13. Melden Sie sich vom App Builder ab und aktualisieren Sie Ihren Browser. Das benutzerdefinierte Bild sollte nun auf dem Anmeldebildschirm des App Builder angezeigt werden.

So erstellen Sie ein Base64 kodiertes Hintergrundbild

1. Um die richtige Base64 Kodierung für Ihr Bild zu generieren, empfehlen wir die Verwendung der Online-Site: https://www.base64-image.de/

   

2. Ziehen Sie Ihre JPG-, PNG- oder GIF-Bilddatei per Drag & Drop oder klicken Sie auf die Schaltfläche „Oder hier klicken“, um sie hochzuladen.

3. Klicken Sie nach der Verarbeitung Ihrer Datei auf die Schaltfläche Code anzeigen.

4. Klicken Sie im Bereich Zur Verwendung in auf die Schaltfläche Alle auswählen. <img>Abschnitt „Elemente**“

   

5. Klicken Sie auf die Schaltfläche In die Zwischenablage kopieren

6. Dies ist die korrekt formatierte Bildcode-Syntax, die Sie in den Wert des Hintergrundbilds im App Builder Ihres benutzerdefinierten Login-Themas einfügen.

So verwenden Sie ein von App Builder gehostetes Image

1. Navigieren Sie zu IDE > Look and Feel
2. Fügen Sie das gewünschte Bild einer Sammlung hinzu, auf die Ihre Anwendung Zugriff hat
3. Nachdem Sie das Bild hinzugefügt haben, klicken Sie auf das entsprechende Symbol Datensatz öffnen
4. Scrollen Sie zum Feld Relative URL und klicken Sie auf die Schaltfläche Kopieren
5. Folgen Sie den Anweisungen oben unter „So erstellen Sie ein benutzerdefiniertes Anmeldedesign“.
6. Geben Sie in Schritt 12 die in die Zwischenablage kopierte Syntax für Ihr gehostetes Bild ein. Sie sieht ungefähr so aus: /service/image/ImageID, wobei ImageID den eindeutigen Wert darstellt, der in die Zwischenablage kopiert wird. Beispiel: /service/image/2bc0d8a0-2cd7-4e8d-b074-eebfb1b9b6d2
7. Überprüfen Sie den Bildpfadwert. Wenn dieser nicht mit ./ Bei Bedarf manuell anpassen.
8. Technische Hilfe aufrufen und Speichern

Weitere Anpassungsbeispiele

Viele Bereiche des Anmeldeformulars können angepasst werden, über das zuvor beschriebene Logo hinaus. Um weitere Bereiche des Anmeldeformulars anzupassen, können Sie die verschiedenen verfügbaren Komponenten- und Unterkomponenten-Stile im Bereich Erscheinungsbild > Designs des App Builder nutzen. Einige Beispiele werden unten beschrieben.

Für erweiterte Anpassungsaspekte müssen Sie möglicherweise mit benutzerdefinierten Designoberflächen arbeiten. Wenn Sie beispielsweise nur eine, aber nicht alle Schaltflächen im Anmeldeformular ansprechen möchten, können Sie eine benutzerdefinierte Schnittstelle schreiben, die nur eine der Schaltflächen anspricht.

Zielen Sie auf die Header des Anmeldeformulars

1. Navigieren Sie zum benutzerdefinierten Anmeldedesign für Ihr Anmeldeformular.
2. Wählen Sie im Bereich Komponenten die Option Anmeldeformular aus.
3. Klicken Sie im Bereich Stile auf + Stil.
4. Wählen Sie als Bereich die Kopfzeile des Anmeldeformulars aus.
5. Wählen Sie den entsprechenden Stiltyp für die Anpassung aus. Beispiel: "Hintergrundfarbe", wenn Sie die Farbe des Bereichs ändern möchten.

6. Geben Sie den entsprechenden Wert ein. Beispiel: darkviolet

   1. Wenn Ihr Design Primär-, Sekundär- und Komplementärfarben definiert hat, müssen Sie möglicherweise Folgendes hinzufügen: !important zum Wert. Beispiel: darkviolet!important

7. Klicken Sie auf Speichern

8. Beenden Sie den App Builder und aktualisieren Sie Ihren Webbrowser, um die Ergebnisse zu testen

Zielen Sie auf die Schaltfläche „Anmelden“

1. Navigieren Sie zum benutzerdefinierten Anmeldedesign für Ihr Anmeldeformular.
2. Wählen Sie im Bereich Komponenten das Formular Steuerelemente aus.
3. Klicken Sie im Bereich Stile auf + Stil.
4. Wählen Sie Schaltfläche als Bereich aus.
5. Wählen Sie den gewünschten Stiltyp aus. Beispiel: "Hintergrundfarbe", wenn Sie die Farbe des Bereichs ändern möchten.

6. Geben Sie den entsprechenden Wert ein. Beispiel: #ffa500

   1. Wenn Ihr Design Primär-, Sekundär- und Komplementärfarben definiert hat, müssen Sie möglicherweise Folgendes hinzufügen: !important zum Wert. Beispiel: #ffa500!important

7. Klicken Sie auf Speichern

8. Beenden Sie den App Builder und aktualisieren Sie Ihren Webbrowser, um die Ergebnisse zu testen

Zielen Sie auf die Formularsteuerelemente

1. Navigieren Sie zum benutzerdefinierten Anmeldedesign für Ihr Anmeldeformular.
2. Wählen Sie im Bereich Komponenten die Option Steuerelemente aus.
3. Klicken Sie im Bereich Stile auf + Stil.
4. Wählen Sie als Bereich das Formularsteuerelement aus.
5. Wählen Sie den gewünschten Stiltyp aus. Beispiel: "Hintergrundfarbe", wenn Sie die Farbe des Bereichs ändern möchten.

6. Geben Sie den entsprechenden Wert ein. Beispiel: #ffff60

   1. Wenn Ihr Design Primär-, Sekundär- und Komplementärfarben definiert hat, müssen Sie möglicherweise Folgendes hinzufügen: !important zum Wert. Beispiel: #ffff60!important

7. Klicken Sie auf Speichern

8. Beenden Sie den App Builder und aktualisieren Sie Ihren Webbrowser, um die Ergebnisse zu testen