Mobile Card Builder Komponenten

  • Freigeben Version: Yokohama
  • Aktualisiert 30. Januar 2025
  • 6 Minuten Lesedauer

    • Erfahren Sie mehr über die Komponenten, aus denen Mobile-Karten bestehen

    Komponenten hinzufügen und entfernen

    Schaltflächen

    Mit Schaltflächenkomponenten können Anwender eine Aktion ausführen, wenn die Schaltfläche ausgewählt wird. Verwenden Sie Schaltflächen, um Ihren Karten Aktionen hinzuzufügen.

    Tabelle : 1. Eigenschaften für die Schaltflächenkonfiguration
    Eigenschaft Beschreibung
    Element-ID Das eindeutige JSON-ID-Attribut der Schaltfläche
    Bildschirm
    Höhe Höhe Ihrer Schaltfläche in Pixel
    Breite Breite Ihrer Schaltfläche in Pixel. Wenn diese Eigenschaft leer gelassen wird, füllt die Schaltfläche den verfügbaren Platz aus.
    Corner radius (Eckradius) Der Eckradius Ihrer Schaltfläche. Erhöhen Sie diesen Wert, um abgerundete Ecken für Ihre Schaltfläche zu erstellen.
    Rand oben Der obere Rand Ihrer Schaltfläche in Pixel
    Rand unten Der untere Rand Ihrer Schaltfläche in Pixel
    Rand links Der linke Rand Ihrer Schaltfläche in Pixel
    Rand rechts Der rechte Rand Ihrer Schaltfläche in Pixel
    Rahmenbreite Breite des Rahmens Ihrer Schaltfläche in Pixel.
    Schaltflächen-Eigenschaften
    Format

    Legen Sie fest, ob Ihre Schaltfläche mit einer Textbezeichnung, einem Symbol oder beidem angezeigt wird.

    Wählen Sie unter den folgenden Optionen aus:
    • Bezeichnung
    • Symbol
    • Bezeichnung und Symbol
    Bezeichnung Die Textbezeichnung der Schaltfläche.
    Hinweis:
    Diese Option wird nur angezeigt, wenn entweder das Format „Bezeichnung“ oder „Bezeichnung und Symbol“ ausgewählt ist.
    Symbol Das Symbol, das auf Ihrer Schaltfläche angezeigt wird. Wählen Sie ein Symbol aus der bereitgestellten Dropdown-Liste.
    Hinweis:
    Diese Option wird nur angezeigt, wenn entweder das Format Symbol oder Bezeichnung und Symbol ausgewählt ist.
    Zugänglicher Name Der alternative Text, der Personen, die Hilfsgeräte verwenden, laut vorgelesen wird, damit sie den Zweck der Schaltfläche kennen.
    Hinweis:
    Diese Option wird nur angezeigt, wenn das Format Symbol ausgewählt ist.
    Aktionen
    Mehrfach Erstellen Sie ein Menü mit mehreren verschiedenen Aktionen, aus denen Anwender beim Klicken auf die Schaltfläche auswählen können.
    Funktion

    Wählen Sie entweder eine vordefinierte oder eine konfigurierbare Funktion aus. Konfigurierbare Funktionen werden der Tabelle „sys_sg_button“ entnommen.

    Verfügbare vordefinierte Funktionen:
    • Abbrechen
    • Fortsetzen
    • Abmelden
    Schaltflächendarstellung
    Text- und Symbolstil Der Formatierungsstil Ihres Texts und/oder Symbols.
    Variable der Hintergrundfarbe Die Farbvariable des Schaltflächenhintergrunds.
    Hintergrundfarbe Die Hintergrundfarbe der Schaltfläche. Der Wert für diese Eigenschaft ist ein HTML-Farbcode, z. B. #A0522D für Ockergelb.
    Text- und Symbolfarbvariable Der Text und die Farbvariable des Symbols der Schaltfläche.
    Text- und Symbolfarbe Text- und Variablenfarbe der Schaltfläche. Der Wert für diese Eigenschaft ist ein HTML-Farbcode, z. B. #A0522D für Ockergelb.
    Rahmenfarbvariable Die Farbvariable des Schaltflächenrahmens.
    Rahmenfarbe Die Farbe des Schaltflächenrahmens. Der Wert für diese Eigenschaft ist ein HTML-Farbcode, z. B. #A0522D für Ockergelb.

    Container

    Containerkomponenten enthalten andere Komponenten. Ein Container kann eine beliebige Kartenkomponente enthalten, einschließlich eines anderen Containers. Verwenden Sie Container, um Kartenkomponenten zu organisieren und zu bestimmen, wie die Komponenten im Container ausgerichtet und verteilt werden.

    Tabelle : 2. Containerkonfiguration – Eigenschaften
    Eigenschaft Beschreibung
    Eigenschaften
    Element-ID Das eindeutige JSON-ID-Attribut des Containers.
    Bildschirm
    Höhe Höhe des Containers in Pixel
    Width (Breite) Breite des Containers in Pixel. Wenn diese Eigenschaft leer ist, füllt der Container den verfügbaren Platz.
    Margin top (Oberer Rand) Der obere Rand des Containers in Pixel
    Margin bottom (Unterer Rand) Der untere Rand des Containers in Pixel
    Margin left (Linker Rand) Der linke Rand des Containers in Pixel
    Margin right (Rechter Rand) Der rechte Rand des Containers in Pixel
    Corner radius (Eckradius) Der Eckradius des Containers. Erhöhen Sie diesen Wert, um abgerundete Ecken für den Container zu erstellen.
    Darstellung
    Containerrichtung Bestimmt das Ausrichtungsformat der Komponenten im Container. Wählen Sie einen dieser Werte aus:
    • Horizontal
    • Vertical (Vertikal)
    Alignment (Ausrichtung) Bestimmt die Ausrichtung der Komponenten im Container. Wählen Sie einen dieser Werte aus:
    • Stretch (Strecken)
    • Center (Mitte)
    • Links
    • Rechts
    • Top (Oben)
    • Bottom (Unten)
    Distribution (Verteilung) Bestimmt die Verteilung der Komponenten im Container. Wählen Sie einen dieser Werte aus:
    • Equal (Gleich)
    • Automatisch
    Hintergrund-Typ Die Art des Hintergrunds, den der Container hat. Wählen Sie einen dieser Werte aus:
    • Keine
    • Farbe
    • Image

    Symbole

    Symbolkomponenten werden verwendet, um ein Symbol auf Ihrer Karte anzuzeigen. Sie können ein Symbol aus dem Dropdown-Menü Symbol auf dem Bildschirm Konfiguration auswählen.

    Tabelle : 3. Symbolkonfigurationseigenschaften
    Eigenschaft Beschreibung
    Eigenschaften
    Element-ID Das eindeutige JSON-ID-Attribut des Symbols.
    Bildschirm
    Symbol Das anzuzeigende Symbol.
    Rand oben Der obere Rand Ihres Symbols in Pixel.
    Rand rechts Der rechte Rand Ihres Symbols in Pixel.
    Rand unten Der untere Rand Ihres Symbols in Pixel.
    Rand links Der linke Rand Ihres Symbols in Pixel.
    Darstellung
    Farbvariable Die Farbvariable Ihres Symbols.
    Farbe Die Farbe Ihres Symbols. Der Wert für diese Eigenschaft ist ein HTML-Farbcode, z. B. #A0522D für Ockergelb.

    Bilder

    Bildkomponenten werden zum Anzeigen von Bildern verwendet. Sie definieren ein anzuzeigendes Bild, indem Sie ein Feld in einem Datensatz auswählen, das ein Bild enthält, z. B. das Feld Avatar in einem User-Datensatz (Benutzer-Datensatz).

    Tabelle : 4. Bildkonfiguration – Eigenschaften
    Eigenschaft Beschreibung
    Eigenschaften
    Element-ID Das eindeutige JSON-ID-Attribut des Bildes.
    Bildschirm
    Höhe Höhe Ihres Bildes in Pixel.
    Breite Breite Ihres Bildes in Pixel.
    Rand oben Der obere Rand Ihres Bildes in Pixel.
    Rand rechts Der rechte Rand Ihres Bildes in Pixel.
    Rand unten Der untere Rand Ihres Bildes in Pixel.
    Rand links Der linke Rand Ihres Bildes in Pixel.
    Corner radius (Eckradius) Der Eckradius des Bilds. Erhöhen Sie diesen Wert, um abgerundete Ecken für das Bild zu erstellen.
    Image
    Zugeordnetes Feld verwenden Wählen Sie aus, ob das Bild ein zugeordnetes Feld verwendet.
    Feldwert Der Wert des zugeordneten Felds für Ihr Bild. Diese Eigenschaft ist nur sichtbar, wenn Zugeordnetes Feld verwenden ausgewählt ist.
    Anhang Das zu verwendende angehängte Bild. Diese Eigenschaft ist nur sichtbar, wenn Zugeordnetes Feld verwenden nicht ausgewählt ist.
    Bildskalierung Die Skalierung für das Bild. Wählen Sie einen dieser Werte aus:
    • Fill (Ausfüllen)
    • Fit (Anpassen)

    Text

    Mit Textkomponenten wird Text auf der Karte angezeigt. Dies kann statischer Text oder Text aus der Bezeichnung des Werts eines Felds sein. Verwenden Sie Textkomponenten für Informationen, die Benutzer beim Anzeigen von Datensatzlisten zuerst sehen müssen.

    Tabelle : 5. Textkonfiguration – Eigenschaften
    Eigenschaft Beschreibung
    Eigenschaften
    Element-ID Das eindeutige JSON-ID-Attribut des Texts
    Bildschirm
    Feldtyp Der Typ des Textfelds. Wählen Sie einen dieser Werte aus:
    • Field value (Feldwert)
    • Field label (Feldbezeichnung)
    • Statischer Text
    Textwert Der Text, der in der Textkomponente angezeigt wird. Dieser Wert wird nur verwendet, wenn Sie in der Eigenschaft Feldtyp die Option Static Text (Statischer Text) ausgewählt haben.
    Höhe Höhe Ihrer Textkomponente in Pixel.
    Breite Breite Ihrer Textkomponente in Pixel.
    Rand oben Der obere Rand Ihrer Textkomponente in Pixel.
    Rand rechts Der rechte Rand Ihrer Textkomponente in Pixel.
    Rand unten Der untere Rand Ihrer Textkomponente in Pixel.
    Rand links Der linke Rand Ihrer Textkomponente in Pixel.
    Darstellung
    Textstil Der Formatierungsstil Ihres Texts.
    Textausrichtung Ausrichtung des Texts in der Komponente. Wählen Sie einen dieser Werte aus:
    • Left (Links)
    • Mitte
    • Right (Rechts)
    Max number of lines (Maximale Anzahl von Zeilen) Die maximale Anzahl von Zeilen für den Text im Element
    Textfarbvariable Die Farbvariable für Ihren Text.
    Textfarbe Die Farbe des Texts. Der Wert für diese Eigenschaft ist ein HTML-Farbcode, z. B. #A0522D für Ockergelb.
    Hinweis:
    Sie können die Hintergrundfarbe einer Textkomponente nicht ändern, aber Sie können die Textkomponente innerhalb einer Containerkomponente platzieren und die Hintergrundfarbe des Containers ändern.

    Videos

    Videokomponenten zeigen ein eingebettetes Video auf Ihrer Karte an. Sowohl Youtube- als auch Viemo-Video-URLs werden unterstützt.

    Tabelle : 6. Videokonfigurationseigenschaften
    Eigenschaft Beschreibung
    Eigenschaften
    Element-ID Eindeutiges JSON-ID-Attribut des Videos.
    Bildschirm
    Zugeordnetes Feld verwenden Wählen Sie aus, ob das Video ein zugeordnetes Feld verwendet.
    Feldwert Der Wert des zugeordneten Felds für Ihr Video. Diese Eigenschaft ist nur sichtbar, wenn Zugeordnetes Feld verwenden ausgewählt ist.
    URL Die URL des einzubettenden Videos. Diese Eigenschaft ist nur sichtbar, wenn Zugeordnetes Feld verwenden nicht ausgewählt ist.
    Wiedergabemodus Wie das Video auf einem Mobilgerät angezeigt wird. Wählen Sie einen dieser Werte aus:
    • Vollbild
    • Inline
    Breite Breite Ihrer Videokomponente in Pixel.
    Höhe Höhe Ihrer Videokomponente in Pixel.
    Rand oben Der obere Rand Ihrer Videokomponente in Pixel.
    Rand rechts Der rechte Rand Ihrer Videokomponente in Pixel.
    Rand unten Der untere Rand Ihrer Videokomponente in Pixel.
    Rand links Der linke Rand Ihrer Videokomponente in Pixel.