HTML-Vorlage für Fortschrittsbalken im Jitterbit App Builder

HTML-Vorlagen können verwendet werden, um viele verschiedene Arten von UI/UX-Elementen in einer App zu erreichen. Dieser Artikel bietet einen Überblick über die Verwendung einer HTML-Vorlage zur Darstellung eines Fortschrittsbalken in der Anwendungs-UI-Ebene einer App.

So erstellen Sie die HTML-Vorlage

1. Navigieren Sie zur App Workbench
2. Klicken Sie auf die Tab Look & Feel
3. Klicken Sie auf die Registerkarte Tab
4. Bestätigen Sie, dass die ausgewählte Sammlung der Ort ist, an dem Sie die HTML-Vorlage hinzufügen möchten
5. Klicken Sie auf die Schaltfläche +Vorlage
6. Vergeben Sie einen Namen. Zum Beispiel: Fortschrittsbalken
7. Aktivieren Sie ggf. die Option Übersetzungen
8. Klicken Sie auf das Häkchen-Symbol, um zu speichern
9. Geben Sie die HTML-Syntax im Tab Quelle ein. Siehe das HTML-Syntaxbeispiel.
10. Klicken Sie auf Speichern
11. Klicken Sie auf +Parameter und definieren Sie die erforderlichen Parameter. Siehe Vorlagenparameter.

HTML-Syntaxbeispiel

<style>
.progress-ecd {
    width: 100%;
    height: 80px;
}
.progress-ecd .hdr span {
    float: right;
}
.progress-ecd .bar {
    position: relative;
    height: 20px;
    background-color: #ccc;
    border-radius: 3px;
}
.progress-ecd .bar .percent {
    color: {{TextColor}};
    background-color: {{BgColor}};
    width: calc({{Prozent}} - 25%);
    height: 20px;
    border-radius: 3px;
    padding-left: 3px;
    max-width: 100%;
}
.progress-ecd .bar .ref {
    position: absolute;
    left: 75%;
    top: 0;
    width: 2px;
    height: 20px;
    background-color: #737373;
}
.progress-ecd .bar .ref:before {
    content: attr(data-ref);
    font-weight: 300;
    position: absolute;
    width: 100px;
    left: -50px;
    top: 100%;
    color: #888;
    text-align: center;
}
</style>
<div>
<div class="progress-ecd" style="margin-bottom:20px;">
    <div style="font-size: 16px; font-weight:500; height: 20px; margin-bottom: 4px;">{{Title}}</div>
    <div class="hdr" style="font-weight: 200; margin-bottom: 8px;">{{Untertitel}}<span style="font-weight: 500; ">{{Prozent}}</span></div>
    <div class="bar">
        <div class="percent">{{Wert}}</div>
        <div class="ref" data-ref="{{Grenze}}"></div>
    </div>
</div>
</div>

Vorlagenparameter

Die folgende Liste von Parametern sollte konfiguriert werden, wenn Sie einen Fortschrittsbalken als HTML-Vorlage verwenden:

• Textfarbe
• Hintergrundfarbe
• Titel
• Untertitel
• Prozent
• Wert
• Grenze

Farbanpassung für den Parameter „Limit“

Sie können optional die Farben des Fortschrittsbalkens anpassen, um optisch anzuzeigen, ob ein Wert unter oder über dem definierten „Limit“-Parameter liegt. Das Ändern der Farbe bei Überschreiten des Limits hilft dabei, zu visualisieren, dass ein wichtiger Schwellenwert überschritten wurde. Beispielsweise kann die Farbe auf Rot geändert werden, wenn ein Budget überschritten wird, und andernfalls auf Grün. Um dies zu erreichen, können Sie die IIF-Anweisungslogik (siehe Beispiel) im zugrunde liegenden Business-Objekt des Panels definieren, sie als Zeichenfolge für den logischen Datentyp umwandeln und sie dann als Hintergrundfarbe an die Vorlage übergeben. Diese Beispielsyntax veranschaulicht die im Business-Objekt verwendete IIF-Anweisung:

IIF(Value >= Limit, '#Color1', '#Color2')

Einschränkungen und Hinweise

Wenn Sie mehr als einen Fortschrittsbalken auf einer einzelnen Seite oder einem Panel mit mehreren Zeilen wie einer Kachel verwenden, übernehmen alle Fortschrittsbalken standardmäßig die Stile der letzten Instanz. Dies liegt daran, dass die TextColor, BgColor, Und Percent Werte werden in der Stildefinition der Klasse ersetzt. Um diese Einschränkung zu umgehen, können Sie diese Stile stattdessen inline platzieren. Die Fortschrittsbalken verhalten sich dann wie erwartet, wenn sie unterschiedliche Werte haben.

Beispiel für Inline-Stil:

<div class="percent" style="font-size: 16px; width: calc({{Prozent}} - 25%); color: {{TextColor}}; background-color: {{BgColor}};">{{Wert}}</div>