So passen Sie die Anmeldeseite im Jitterbit App Builder an

Einführung

Die Anmeldeseite des App Builders kann nach Ihren Wünschen angepasst werden. Diese Seite zeigt Ihnen, wie Sie diese Anpassung vornehmen können, indem Sie die von Jitterbit empfohlenen Best Practices befolgen. Sie können sowohl das Logo als auch das Anmeldeformular anpassen, einschließlich des Headers des Formulars, der Steuerelemente oder des Anmelde-Buttons.

Diese Anpassung betrifft die Hauptanmeldeseite des App Builders, die von Entwicklern, Testern und Endbenutzern verwendet wird. Da jedoch jede Umgebung (Entwicklung, QA und Produktion) ihre eigene Anmeldeseite hat, werden die Anpassungen, die Sie in der Entwicklungsumgebung vornehmen, nicht sofort von den Endbenutzern gesehen. Übertragen Sie das neue Design, das Sie aus einer Umgebung in die nächste erstellt haben, mithilfe des Release-Managements.

Logo anpassen

Es gibt zwei Möglichkeiten, das Logo anzupassen: ein Bild hochladen oder ein base64-kodiertes Bild verwenden.

• Erstellen Sie ein benutzerdefiniertes Anmeldethema

• Verwenden Sie ein von App Builder gehostetes Bild

Wenn Sie ein neues Anmeldethema in einer Entwicklungsumgebung verwenden und es in die Produktion übertragen möchten, speichern Sie das benutzerdefinierte Thema in der Sammlung von Themen, die in die Produktion übertragen wird.

Erstellen eines benutzerdefinierten Anmelde-Themes

1. Navigieren Sie zu IDE > Aussehen und Verhalten.

2. Bestätigen Sie, dass Sie eine Sammlung ausgewählt haben, die Sie ändern können.

3. Klicken Sie auf die Schaltfläche + Theme.

4. Geben Sie im Feld Theme Name einen Namen für das neue benutzerdefinierte Theme ein.

5. Öffnen Sie das Menü Basis-Theme und wählen Sie dann Anmelde-Basis-Theme.

6. Klicken Sie auf die Schaltfläche Speichern.

7. Wählen Sie im Panel Komponenten das Anmeldeformular aus.

8. Im Panel Stile klicken Sie auf die Schaltfläche + Stil. Der Dialog Stileinstellungen öffnet sich.

9. Öffnen Sie das Menü Bereich und wählen Sie Anmelde-Logo.

10. Öffnen Sie das Menü Stiltyp und wählen Sie Hintergrundbild.

11. Geben Sie die korrekt formatierte Syntax für ein Base64-kodiertes Bild im Feld 1 - Hintergrundbild ein. Um den Base64-Code zu generieren, folgen Sie den Anweisungen in Erstellen eines Base64-kodierten Hintergrundbildes. Zum Beispiel:

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

12. Geben Sie eine Beschreibung im Feld Technische Hilfe ein.

13. Klicken Sie auf die Schaltfläche Speichern.

Erstellen eines Base64-kodierten Hintergrundbildes

Um eine lokale JPG-, PNG- oder GIF-Bilddatei zur Anpassung Ihrer Anmeldeseite zu verwenden, müssen Sie eine Base64-Kodierung für das Bild generieren. Gehen Sie dazu wie folgt vor:

1. Greifen Sie auf den Base64 Image Encoder zu.

   

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

3. Nachdem Ihre Datei verarbeitet wurde, klicken Sie auf die resultierende Schaltfläche Code anzeigen.

4. Klicken Sie auf die Schaltfläche Alle auswählen im Abschnitt Für die Verwendung in <img>-Elementen.

   

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

6. Dies ist die korrekt formatierte Bildcode-Syntax, die Sie in den Wert für das Hintergrundbild im App Builder für Ihr benutzerdefiniertes Anmeldethema einfügen werden.

Mehrere Anmeldethemen

Wenn Sie mehrere Anmeldethemen erstellen, muss ein Benutzer mit Administratorzugriff festlegen, welches davon verwendet wird. Gehen Sie dazu wie folgt vor:

1. Wählen Sie IDE > Sicherheitsanbieter.

2. Klicken Sie im Panel Konfiguration auf Bearbeiten.

3. Verwenden Sie das Dropdown-Menü unter Anmeldeseiten-Thema, um zu konfigurieren, welches der erstellten Anmeldethemen von Ihrer Anwendung verwendet werden soll.

4. Verlassen Sie den App Builder und aktualisieren Sie Ihren Webbrowser, um die Ergebnisse zu testen.

Verwenden Sie ein von App Builder gehostetes Bild

1. Navigieren Sie zu Aussehen und Gefühl.

2. Fügen Sie das Bild, das Sie verwenden möchten, zu 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. Befolgen Sie die Schritte 1-10 im Abschnitt Erstellen eines benutzerdefinierten Anmeldethemas.

6. Geben Sie in Schritt 11 die in die Zwischenablage kopierte Syntax für Ihr gehostetes Bild ein. Es wird ungefähr so aussehen: /service/image/ImageID, wobei ImageID den einzigartigen Wert darstellt, der in Ihre Zwischenablage kopiert wurde. Zum Beispiel: /service/image/2bc0d8a0-2cd7-4e8d-b074-eebfb1b9b6d2.

1. Überprüfen Sie den Wert des Bildpfads, und wenn er nicht mit ./ beginnt, passen Sie ihn manuell nach Bedarf an.

2. Geben Sie eine Beschreibung im Feld Technische Hilfe ein und klicken Sie auf Speichern.

Passen Sie das Anmeldeformular an

Sie können andere Teile des Anmeldeformulars sowie das Logo anpassen. Dazu verwenden Sie die verschiedenen verfügbaren Komponente – Unterkomponente-Stile im Bereich Aussehen und Verhalten > Themen des App Builders. Einige Beispiele sind unten beschrieben.

Erweiterte Aspekte der Anpassung erfordern möglicherweise, dass Sie mit benutzerdefinierten Themen-Schnittstellen arbeiten. Wenn Sie beispielsweise nur einen, aber nicht alle Schaltflächen im Anmeldeformular ansprechen möchten, könnten Sie eine benutzerdefinierte Schnittstelle schreiben, um nur eine der Schaltflächen anzusprechen.

Ziel des Anmeldeformular-Headers

1. Navigieren Sie zum benutzerdefinierten Anmeldethema, das für Ihr Anmeldeformular definiert ist.

2. Wählen Sie Anmeldeformular aus dem Panel Komponenten.

3. Klicken Sie auf + Stil im Panel Stile.

4. Wählen Sie Anmeldeformular-Header als Bereich.

5. Wählen Sie den entsprechenden Stiltyp für die Anpassung aus. Wenn Sie beispielsweise die Farbe des Bereichs ändern möchten, wählen Sie Hintergrundfarbe.

6. Geben Sie die entsprechenden Wert-Informationen an. Zum Beispiel: darkviolet

   Hinweis

   Wenn Ihr Thema primäre, sekundäre und ergänzende Farben definiert hat, müssen Sie möglicherweise !important an den Wert anhängen. Zum Beispiel: darkviolet!important.

7. Klicken Sie auf Speichern.

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

Ziel der Anmelde-Schaltfläche

1. Navigieren Sie zum benutzerdefinierten Anmeldethema, das für Ihr Anmeldeformular definiert ist.

2. Wählen Sie das Formular Steuerelemente aus dem Panel Komponenten.

3. Klicken Sie auf + Stil im Panel Stile.

4. Wählen Sie Schaltfläche als Bereich.

5. Wählen Sie den Stiltyp entsprechend der Anpassung aus. Wenn Sie beispielsweise die Farbe des Bereichs ändern möchten, wählen Sie Hintergrundfarbe.

6. Geben Sie die entsprechenden Wert-Informationen an. Zum Beispiel: #ffa500

   Hinweis

   Wenn Ihr Thema primäre, sekundäre und komplementäre Farben definiert hat, müssen Sie möglicherweise !important an den Wert anhängen. Zum Beispiel: #ffa500!important.

7. Klicken Sie auf Speichern.

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

Zielgerichtete Formularelemente

1. Navigieren Sie zu dem benutzerdefinierten Anmeldethema, das für Ihr Anmeldeformular definiert ist.

2. Wählen Sie Steuerelemente aus dem Panel Komponenten.

3. Klicken Sie auf + Stil im Panel Stile.

4. Wählen Sie Formularsteuerelement als Bereich.

5. Wählen Sie den Stiltyp entsprechend der Anpassung aus. Wenn Sie beispielsweise die Farbe des Bereichs ändern möchten, wählen Sie Hintergrundfarbe.

6. Geben Sie die entsprechenden Wert-Informationen an. Zum Beispiel: #ffff60

   Hinweis

   Wenn Ihr Thema primäre, sekundäre und komplementäre Farben definiert hat, müssen Sie möglicherweise !important an den Wert anhängen. Zum Beispiel: #ffff60!important.

7. Klicken Sie auf Speichern.

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