Bestimmte Steuerungsoberflächen-Elemente im Jitterbit App Builder ausblenden

Übersicht

Der Bereich Look and Feel des App Builders ermöglicht es, das Erscheinungsbild deiner Anwendungen durch Designs anzupassen, die ein Ziel-UI-Element mit den darauf angewendeten Stileigenschaften verknüpfen. Weitere Informationen dazu, wie Designs, Komponenten und Stile zusammenhängen, findest du unter Designs. Diese Seite zeigt dir zwei Beispiele für die Verwendung eines benutzerdefinierten Stils zum Ausblenden eines kleinen, integrierten UI-Elements auf einem Steuerelement. In beiden Fällen stellst du die Display-Eigenschaft des Elements auf none:

Das Up-Down-Steuerelement auf einem numerischen Feld ausblenden
Das Chevron auf einem Textfeld mit einem Event ausblenden

Das Up-Down-Steuerelement auf einem numerischen Feld ausblenden

Numerische Felder zeigen standardmäßig ein Up-Down-Steuerelement – einen kleinen Spinner mit Auf- und Ab-Pfeilen – an, wenn sich das Feld im Bearbeitungsmodus befindet. Dies ermöglicht es Nutzern, den Wert durch Klicken auf die Pfeile zu erhöhen oder zu verringern, anstatt ihn einzutippen. Da dieser Spinner kein vordefiniertes Theme Interface ist, bedeutet das Ausblenden, zuerst ein Theme Interface zu erstellen und dann einen Ausblend-Stil darauf anzuwenden – entweder auf deine gesamte App oder auf ein einzelnes Steuerelement.

Beispiel mit sichtbarem Up-Down-Steuerelement

Beispiel mit verborgenem Up-Down-Steuerelement

So blendest du das Up-Down-Steuerelement aus:

Erstelle die Theme Interfaces für das Up-Down-Steuerelement.
Wende dann den Ausblend-Stil an – entweder siteübergreifend für deine gesamte App oder für ein einzelnes Steuerelement.

Theme Interfaces für das Up-Down-Steuerelement erstellen

Erstelle für jede Browser-Engine ein benutzerdefiniertes Theme Interface, indem du die allgemeine Vorgehensweise unter Theme Interfaces konfigurieren befolgst:

Chrome, Safari, Edge und Opera: Stelle Real Estate auf Controls, Group auf Fields, Collection auf die Collection, zu der das Theme Interface gehören soll (z. B. Customer), Name auf Up-Down Control und Selector auf input::-webkit-outer-spin-button, input::-webkit-inner-spin-button.
Firefox: Stelle Real Estate auf Controls, Group auf Fields, Collection auf dieselbe Collection wie oben, Name auf Up-Down Control (Firefox) und Selector auf input[type=number].

Wende nach dem Erstellen beider Theme Interfaces den Ausblend-Stil mit einer der beiden folgenden Methoden an.

Den Stil siteübergreifend anwenden

Befolge diese Schritte, um den Ausblend-Stil auf deine gesamte App anzuwenden, indem du ihn zum Base Theme deiner App hinzufügst:

Wähle IDE > Look and Feel aus.
Wähle die Collection aus, die deiner App zugewiesen ist.
Gehe zum Base Theme, das auf deine gesamte App angewendet wird.
Wähle unter Components die Option Controls aus, was der Real Estate entspricht, die du beim Erstellen des Theme Interface gesetzt hast.
Wähle unter Subcomponents die Option Fields aus, was der Group entspricht, die du gesetzt hast.
Klicke auf die Schaltfläche + Style.
Gib die folgenden Eingaben an:
- Area: Stelle auf Up-Down Control.
- Style Type: Stelle auf Display.
- 1-Display: Stelle auf ; -webkit-appearance: none; margin: 0.
- 2-Opacity: Stelle auf 0.
Klicke auf Save.
Klicke erneut auf die Schaltfläche + Style und gib die folgenden Eingaben an:
- Area: Stelle auf Up-Down Control (Firefox).
- Style Type: Stelle auf Display.
- 1-Display: Stelle auf ;-moz-appearance: textfield.
Klicke auf Save.

Den Stil auf ein bestimmtes Steuerelement anwenden

Befolge diese Schritte, um den Ausblend-Stil auf einer präziseren Ebene anzuwenden – auf ein einzelnes Steuerelement anstelle deiner gesamten App:

Wählen Sie IDE > Erscheinungsbild.
Wählen Sie die Kollektion aus, in der Sie die Theme-Schnittstellen erstellt haben.
Klicken Sie auf die Schaltfläche + Theme, um ein neues benutzerdefiniertes Theme für dieses Steuerelement zu erstellen.
Weisen Sie einen Theme-Namen zu. Beispiel: Hide Up-Down Control.
Setzen Sie den Typ auf Field.
Klicken Sie auf Speichern.
Wählen Sie Controls unter Components aus und stimmen Sie mit der Real Estate überein, die Sie beim Erstellen der Theme-Schnittstelle festgelegt haben.
Wählen Sie Fields unter Subcomponents aus und stimmen Sie mit der Gruppe überein, die Sie festgelegt haben.
Klicken Sie auf die Schaltfläche + Style.
Geben Sie die folgenden Eingaben an:
- Area: Setzen Sie auf Up-Down Control.
- Style Type: Setzen Sie auf Display.
- 1-Display: Setzen Sie auf ; -webkit-appearance: none; margin: 0.
- 2-Opacity: Setzen Sie auf 0.
Klicken Sie auf Speichern.
Klicken Sie erneut auf die Schaltfläche + Style und geben Sie die folgenden Eingaben an:
- Area: Setzen Sie auf Up-Down Control (Firefox).
- Style Type: Setzen Sie auf Display.
- 1-Display: Setzen Sie auf ;-moz-appearance: textfield.
Klicken Sie auf Speichern.

Das Theme dem Steuerelement zuweisen

Das Erstellen des obigen benutzerdefinierten Themes wendet es nicht automatisch auf etwas an. Weisen Sie es dem spezifischen Steuerelement zu, bei dem Sie die Auf-Ab-Steuerung ausblenden möchten:

Navigieren Sie zur Seite mit dem zu ändernden Steuerelement.
Wählen Sie Action Drawer > Live Designer.
Wählen Sie das Steuerelement aus der Seitendesignansicht aus.
Wählen Sie More > Styles.
Klicken Sie auf + Conditional Formatting.
Wählen Sie Unconditional aus, damit der Stil immer unabhängig vom Wert des Steuerelements angewendet wird.
Klicken Sie auf die Schaltfläche Choose Style.
Suchen Sie das oben erstellte benutzerdefinierte Theme. Beispiel: Hide Up-Down Control.
Klicken Sie auf die Schaltfläche + Choose.
Aktualisieren Sie den Browser und bestätigen Sie, dass die Auf-Ab-Steuerung nicht mehr im Steuerelement angezeigt wird.

Das Chevron in einem Textfeld mit einem Ereignis ausblenden

Ein Textfeld mit einem angehängten Ereignis zeigt standardmäßig ein kleines Chevron-Symbol an, das andeutet, dass das Anklicken etwas bewirkt. Um diesen visuellen Hinweis mit einem benutzerdefinierten Stil zu entfernen, führen Sie diese Schritte aus:

Wählen Sie IDE > Erscheinungsbild.
Wählen Sie die Kollektion aus, die das Anwendungs-Theme enthält.
Öffnen Sie das Theme zum Bearbeiten.
Wählen Sie Controls unter Components aus.
Klicken Sie auf die Schaltfläche + Style.
Wählen Sie Chevron für das Feld Area aus.
Wählen Sie Display als Style Type aus.
Wählen Sie none für den Display-Wert aus.
Klicken Sie auf Speichern.