So verbergen Sie ein Auf-Ab-Steuerelement in einem numerischen Feld im Jitterbit App Builder

Numerische Felder zeigen standardmäßig einen Auf-Ab-Inkrementierer an, wenn sich das Feld im Bearbeitungszustand befindet. Ein Benutzer kann auf die Auf- oder Ab-Schaltflächen klicken, um einen entsprechenden numerischen Wert zu erhöhen oder zu verringern. Es kann Fälle geben, in denen Sie dieses Auf-Ab-Steuerelement ausblenden möchten. In diesem Artikel erfahren Sie Schritt für Schritt, wie Sie es ausblenden können.

Beispiel, das die Auf-Ab-Steuerung sichtbar macht

Beispiel, das die Auf-Ab-Steuerung versteckt zeigt

Erstellen Sie eine benutzerdefinierte Designoberfläche (Chrome, Safari, Edge, Opera).

1. Navigieren Sie zur IDE > Zusätzliche Einstellungen
2. Klicken Sie auf die Schaltfläche Designschnittstellen
3. Klicken Sie auf + Schnittstelle

4. Geben Sie die folgenden Eingaben ein:

   • Immobilien = Steuerelemente
   • Gruppe = Felder
   • Sammlung = Kunde
   • Name = Auf-Ab-Steuerelement
   • Selektor = input::-webkit-outer-spin-button, input::-webkit-inner-spin-button

5. Klicken Sie zum Speichern auf das Häkchen-Symbol

Erstellen Sie eine benutzerdefinierte Designoberfläche (Firefox)

1. Navigieren Sie zu IDE > Weitere Einstellungen
2. Klicken Sie auf die Schaltfläche Theme Interfaces
3. Klicken Sie auf + Schnittstelle

4. Geben Sie die folgenden Eingaben ein:

   • Immobilien = Kontrollen
   • Gruppe = Felder
   • Collectione = Kunde
   • Name = Auf-Ab-Steuerung (Firefox)
   • Selektor = input[type=number]

5. Klicken Sie zum Speichern auf das Häkchen-Symbol

Option 1: Das benutzerdefinierte Design auf der gesamten Site anwenden

Folgen Sie diesen Schritten, wenn Sie diese Anpassung auf eine ganze App anwenden möchten.

1. Navigieren Sie zur IDE > Look and Feel
2. Wählen Sie die Sammlung aus, die Ihrer App zugewiesen ist
3. Gehen Sie zum Basisdesign
4. Wählen Sie Steuerelemente unter Komponenten
5. Wählen Sie Felder unter Unterkomponenten
6. Klicken Sie auf die Schaltfläche + Stil

7. Geben Sie die folgenden Eingaben ein:

   1. Bereich = Auf-Ab-Steuerelement
   2. Stiltyp = Anzeige
   3. 1-Anzeige = ; -webkit-appearance: none; margin: 0
   4. 2-Deckkraft = 0

8. Klicken Sie auf Speichern

9. Klicken Sie auf die Schaltfläche + Stil

10. Geben Sie die folgenden Eingaben ein:

    1. Bereich = Auf-Ab-Steuerung (Firefox)
    2. Stiltyp = Anzeige
    3. 1-Anzeige = ;-moz-appearance: textfield

11. Klicken Sie auf Speichern

Option 2: Anwenden des benutzerdefinierten Designs auf ein bestimmtes Steuerelement

Folgen Sie diesen Schritten, wenn Sie diese Anpassung auf granularer Ebene anwenden möchten, beispielsweise auf ein bestimmtes Steuerelement.

1. Navigieren Sie zur IDE > Look and Feel
2. Wählen Sie die Kundensammlung
3. Klicken Sie auf die Schaltfläche + Design
4. Weisen Sie einen Designnamen zu. Beispiel: Up-Down-Steuerelement ausblenden
5. Stellen Sie den Typ auf Feld ein
6. Klicken Sie auf Speichern
7. Wählen Sie Steuerelemente unter Komponenten
8. Wählen Sie Felder unter Unterkomponenten
9. Klicken Sie auf die Schaltfläche + Stil

10. Geben Sie die folgenden Eingaben ein:

    1. Bereich = Up-Down-Steuerelement
    2. Stiltyp = Anzeige
    3. 1-Anzeige = ; -webkit-appearance: none; margin: 0
    4. 2-Deckkraft = 0

11. Klicken Sie auf Speichern

12. Klicken Sie auf die Schaltfläche + Stil

13. Geben Sie die folgenden Eingaben ein:

    1. Bereich = Auf-Ab-Steuerung (Firefox)
    2. Stiltyp = Anzeige
    3. 1-Anzeige = ;-moz-appearance: textfield

14. Klicken Sie auf Speichern

Anwenden eines Designs auf ein Steuerelement

1. Navigieren Sie zu der Seite mit dem zu ändernden Steuerelement.
2. Gehen Sie zu Action Drawer > Live Designer
3. Wählen Sie das Steuerelement aus der Seitendesignansicht aus.
4. Gehen Sie zu Mehr > Stile
5. Klicken Sie auf + Bedingte Formatierung
6. Wählen Sie Unbedingt
7. Klicken Sie auf die Schaltfläche Stil auswählen
8. Suchen Sie das benutzerdefinierte Design. Beispiel: Auf-Ab-Steuerelement ausblenden
9. Klicken Sie auf die Schaltfläche + Auswählen
10. Navigieren Sie zurück zur App-Ansicht, aktualisieren Sie den Browser und testen Sie das Update.