Widget-Downloadbibliothek im Jitterbit App Builder

Übersicht

Diese Seite enthält eine Bibliothek von Widget-Downloads zur Verwendung im App Builder. Widgets bieten einen Code-Hook in den App Builder, der es einem Designer ermöglicht, die vollständige Kontrolle darüber zu übernehmen, wie das Feld dargestellt wird. Widgets können verwendet werden, um die Benutzeroberfläche für die Nutzer zu verbessern. (Siehe auch Widgets und Widget-Fehlerbehebung.)

Textformat

Download

text_mask.zip

Beschreibung

Erstellt eine Maske im Ziel-Textfeld basierend auf der Benutzereingabe und speichert die eingegebenen Daten.

Parameter

• TextFormat: Zeichenfolge
• TextPlaceholder: Zeichenfolge

Textformat

Wie Sie möchten, dass der Wert maskiert wird. Beispiel: "(999) 999-9999" oder "99/99/9999"

Hier sind die Maskendefinitionen:

• "a" steht für ein alphanumerisches Zeichen (A-Z, a-z)
• "9" steht für ein numerisches Zeichen (0-9)
• "*" steht für ein alphanumerisches Zeichen (A-Z, a-z, 0-9)

Wenn Sie eine Maskendefinition benötigen, die von den vordefinierten abweicht (z. B. Hex), können Sie Ihre eigene Definition im jQuery hinzufügen. Zum Beispiel:

$.mask.definitions['h'] = "[A-Fa-f0-9]";

Datumsauswahl mit aktivierten Daten

Download

datepickerenableddates.zip

Dokumentation

bootstrap-datepicker

Beschreibung

Dieses Widget bietet Parameter für ein Datumsauswahlsteuerung, um spezifische Daten im Kalender zu aktivieren, die vom Benutzer ausgewählt werden können. Alle anderen Daten werden von der Auswahl ausgeschlossen.

Parameter

• DatesToEnable: Zeichenfolge von Daten, die durch ein Leerzeichen getrennt und im Format MM/DD/YYYY formatiert sind. Zum Beispiel: 08/03/2022 08/12/2022 10/11/2022
• MinAvailableDate: Zeichenfolge und ist das Datum, das der Datumsauswähler verwendet, um abzuleiten, in welchem Monat er geöffnet werden soll. Zum Beispiel: 08/03/2022
• SelectedDateString: Zeichenfolge und ist der Wert der Tabellen-Spalte, in der Sie in der Zeile speichern. Stellen Sie sicher, dass Sie die Datums-Spalte im Geschäftsobjekt in eine Zeichenfolge umwandeln, bevor Sie sie als Parameter übergeben. Zum Beispiel: 08/12/2022

Implementierungsnotizen

Beim Hinzufügen und Definieren des Widgets innerhalb des App Builders setzen Sie den Wert für Unterstützte Modi auf Anzeigen und Bearbeiten.

Isdesktop

Download

isdesktop.zip

Beschreibung

Das IsDesktop-Widget wird beim Laden der Seite ausgeführt und überprüft, ob der resultierende Viewport als Desktop-Browser betrachtet wird. Wenn das Widget feststellt, dass es sich um einen Desktop-Browser handelt, wird ein Boolean-Feld (IsDesktop) auf 1 gesetzt. Das Widget umschließt die Ausgabe in einer .widget-template-output-text-Klasse, die von einem Entwickler angesprochen werden kann, wenn zusätzliche Kontrolle über das Aussehen und die Gestaltung der Elemente auf dem Bildschirm erforderlich ist.

Parameter

• IsDesktop: Boolean

Implementierungsnotizen

• Fügen Sie eine IsDesktop-Boolean-Spalte zu einer Tabelle hinzu. Zum Beispiel: Sitzung
• Um es auf einem Panel zu implementieren, können Sie eine Checkbox-Steuerung hinzufügen, die die neue IsDesktop-Steuerung auf einem Panel anvisiert, das vollständig transparent mit einer Höhe von 0 eingestellt ist. Dies stellt sicher, dass die Steuerung keinen Platz auf der Seite einnimmt, aber geladen wird.
• Sobald es wie oben beschrieben konfiguriert ist, können Sie jetzt die Sichtbarkeits-Spalte verwenden, um die Sichtbarkeit des Panels zu steuern.

Ace-Editor

Download

ace.zip

Beschreibung und Parameter

Das Ace Editor-Widget ist ein Open-Source-Codebearbeitungswerkzeug, das in JavaScript geschrieben ist. Der App Builder verwendet diesen Editor innerhalb der IDE. Fügen Sie dieses Widget überall in Ihrer App Builder-App hinzu, wo Sie ein Codebearbeitungswerkzeug einbetten möchten.

Für weitere Informationen und Dokumentation siehe: Ace Code Editor v1.4.6

Implementierungsnotizen

• Beim Hinzufügen und Definieren des Widgets im App Builder den Wert Unterstützte Modi auf Ansicht und Bearbeitung setzen.
• Beim Hinzufügen von Widget-Parametern können Statische Werte definiert werden, zum Beispiel:
  • fontSize, Statischer Wert, 14
  • height, Statischer Wert, 500
  • mode, Statischer Wert, xml

Dynamische Zeilenfarbe

Herunterladen

dynamic_row_color.zip

Beschreibung

Das Widget für die Dynamische Zeilenfarbe ermöglicht es, die Hintergrundfarbe für Zeilen in einem Mehrzeilen-Panel dynamisch festzulegen. Der Wert der Spalte, an die das Widget gebunden ist, bestimmt die Hintergrundfarbe für die jeweilige Zeile. Ein Spaltenwert von " oder null setzt den Zeilenhintergrund auf die Standardfarbe, die für MRP-Zeilen verwendet wird.

Die Farbe kann als Farbname oder CSS-Wert angegeben werden. Zum Beispiel: red, #f00 oder #ff0000.

Parameter

N/A

Implementierungsnotizen

• Beim Hinzufügen und Definieren des Widgets im App Builder den Wert Unterstützte Modi auf Ansicht und Bearbeitung setzen.
• Die Zeilenfarbe wird basierend auf der Steuerung bestimmt, die dem Widget zugeordnet ist. Diese Steuerung muss einer Spalte zugeordnet sein, die den Farbwert definiert.

• Fügen Sie eine abgeleitete Spalte zur Geschäftsregel des MRP-Panels hinzu, die den Farbwert definiert. Zum Beispiel: RowColor. Diese Spalte kann dynamische Logik enthalten, wie eine IIF-Anweisung, um den Farbwert zu bestimmen. Zum Beispiel:

  IIF((C.CompanyName is null or C.ContactName is null, '#fee', '')

• Fügen Sie die abgeleitete Spalte aus der Geschäftsregel zum MRP als Steuerung vom Typ Text hinzu und setzen Sie den Widget-Wert, um dieses Widget zu verwenden.

  • Setzen Sie die Priorität auf 1.
  • Definieren Sie die Breite als 1.
  • Setzen Sie die Sichtbarkeit des Labels auf Ausgeblendet.

• Wenn das gewünschte Ergebnis nicht sichtbar ist, überprüfen Sie die Panel-Themen, um zu sehen, ob die aktive Zeile einen Farbwert definiert hat (einschließlich Weiß). Möglicherweise müssen Sie die Hintergrundfarbe der aktiven Zeile auf transparent ändern.

Beispiel

Zeichenanzahl

Download

character_counter_v2.zip

Beschreibung

Dieses SRP/Form-Panel-Widget ermöglicht es Ihnen, einen oberen Zeichen Limit-Parameterwert zu konfigurieren und erfordert einen Parameter, der sowohl für CharLimit (Zeichenlimit) als auch für TextFieldID (ID für das Feld, in dem das Widget platziert wird) definiert ist. Sobald das Widget auf einem Textfeld aktiviert ist, zeigt das Widget sowohl den Zeichen Limit- als auch den Verbleibend-Wert im Bearbeitungsmodus an.

Um die TextFieldID zu finden, navigieren Sie im Anwendungs-UI-View zum Textfeld, öffnen Sie das Feld im Bearbeitungsmodus und verwenden Sie ein Entwickler-Tool des Webbrowsers, um das Feld zu inspizieren. Zum Beispiel: Text-Area_0aae73c8-2002-42a2-99c4-242dac4f84db

Optional können Sie einen Indexparameter mit dem Widget konfigurieren, wenn Sie beabsichtigen, das Widget mehr als einmal auf einem Panel zu konfigurieren.

Parameter

Implementierungsnotizen

• Dieses Widget erfordert, dass Sie eine leere Vorlage erstellen und diese leere Vorlage auf ein Vorlagensteuerungselement auf der Seite anwenden. Fügen Sie einen Kommentar in die Vorlage ein, wie "Hallo Welt"

  Wenn Sie das Zeichenanzahl-Widget auf das Vorlagensteuerungselement anwenden, stellen Sie sicher, dass Sie TextFieldID im Widget-Parameter angeben.

• Wenn Sie die Zeichenanzahlinformationen außerhalb des Bearbeitungsmodus nicht sehen, deaktivieren Sie das Feld Zielcontainer in der Widget-Definition.

Beispiel

Barcode / QR-Code-Scanner

Download

qr_scanner2.zip

Beschreibung

Dieses Widget ist ein plattformübergreifender Barcode- und/oder QR-Code-Scanner.

Implementierungsnotizen

• Beim Hinzufügen und Definieren des Widgets im App Builder setzen Sie den Wert für Unterstützte Modi auf Nur Ansicht. Nach dem Hinzufügen platzieren Sie das Widget über dem Steuerelement, dessen gescannter Wert populiert werden soll. Dieses Steuerelement sollte einer String/NVarchar-Spalte in einer zugrunde liegenden Tabelle zugeordnet sein. Wenn der Name dieses Steuerelements den Text qr enthält, wird das QR-Code-Scanner-Widget automatisch darüber platziert.

• Bestätigen Sie, dass der Panelzustand, in dem das Widget erscheint, auf Standard gesetzt ist. Überprüfen Sie den Wert Panel > Edge Case > Anfangszustand des Panels = Standard.

• Ziehen Sie in Betracht, ein zweites Textsteuerelement zum Panel hinzuzufügen mit Bearbeitungszustand = Nur Lesen. Dieses Steuerelement rendert und zeigt den gescannten QR- oder Barcode-Ausgabewert an.

• Wenn Sie einen NotReadableError erhalten, bedeutet dies, dass die Kamera, die das Widget verwenden möchte, bereits in Gebrauch ist. Zum Beispiel: Wenn Sie sich in einem Videokonferenzanruf befinden und Ihre Kamera für den Video-Feed verwenden, müssen Sie den Video-Feed möglicherweise stoppen, wenn Sie gleichzeitig eine App mit dem Barcode-/QR-Code-Scanner-Widget demonstrieren möchten.

Github-Bibliothekslink zur Ansicht der unterstützten Widget-Konfigurationen: HTML5 QR Code

Beispiel

Auto-Event-Runner

Download

AutoEventRunner.zip

Beschreibung und Parameter

Dieses Widget aktualisiert die App Builder-Seite automatisch basierend auf dem angegebenen Intervallparameter.

Ein weiteres mögliches Anwendungsbeispiel für dieses Widget ist das Schließen eines Panels nach 10 Sekunden. Fügen Sie eine Schaltfläche zu Ihrer Seite hinzu, die ein Ereignis ausführt. Optional können Sie das Ereignis so einstellen, dass es Daten aktualisiert. Fügen Sie dieses Widget zum Schaltflächensteuerelement hinzu.

Wenn Sie Text auf leer und ShowTimestamp auf 0 setzen, kann es im Hintergrund ausgeführt werden. Die 90000 sind Millisekunden oder 90 Sekunden.

Beispiel

Bereichsregler

Download

range-slider.zip

Dokumentation

http://refreshless.com/nouislider

Beschreibung und Parameter

Dieser Regler ermöglicht es dem Benutzer, ein numerisches Feld mit einem beweglichen Regler über eine Linie zu bearbeiten.

Als Designer können Sie die Min-, Max- und Schrittwerte festlegen, die Sie unterstützen. Der Standardwert liegt bei 0 bis 100, mit einem Schritt von 1.

Das Widget setzt automatisch die "Pips", oder kleine Punkte unter der Linie, um die Skala der Linie anzuzeigen.

Beispiel

Zwei-Punkte-Regler

Download

two-point-slider.zip

Dokumentation

http://refreshless.com/nouislider

Beschreibung und Parameter

Dieser Regler ermöglicht es dem Benutzer, zwei numerische Felder mit einem beweglichen Regler über eine Linie zu bearbeiten.

Als Designer können Sie die Min-, Max- und Schrittwerte festlegen, die Sie unterstützen. Der Standardwert liegt bei 0 bis 100, mit einem Schritt von 1.

Das Widget setzt automatisch die "Pips", oder kleine Punkte unter der Linie, um die Skala der Linie anzuzeigen.

Die Parameter LowColumn und HighColumn haben keine Standardwerte und müssen auf die Steuerungsnamen gesetzt werden, an die Sie die Reglerwerte binden möchten.

Beispiel

Google Analytics

Download

google-analytics.zip

Beschreibung und Parameter

Verfolgt Seitenänderungen und Authentifizierung. Sendet an Google Analytics.

Beispiel

From now date formatter

Download

from-now-date-formatter.zip

Parameter

Beispiel

Bildrotator

Download

image-rotater.zip

Beschreibung

Rotiert ein Bild, das in einer binären Zelle gespeichert ist. Erstellt zwei Schaltflächen, eine dreht das Bild im Uhrzeigersinn und die andere gegen den Uhrzeigersinn.

Funktioniert nur im Bearbeitungsmodus, ist jedoch so konzipiert, dass es auch im Ansichtsmodus ausgeführt wird, sodass der Ansichtsmodus überhaupt nichts rendert.

Beispiel

Widget API Debugger

Download

widget-api-debugger.zip

Beschreibung und Parameter

Ein einfaches Widget, das die folgenden Widget-API-Werte ausgibt:

• Locale (CultureId)
• Sprache (UiCultureId)
• Alle Parameter

Beispiel

Web Font Loader

Download

web-font-loader.zip

Beschreibung und Parameter

Lädt die über den Parameter angegebene Schriftart. Standardmäßig wird Roboto verwendet.

Das Widget lädt die angegebene Schriftart in den Browser. Dies geschieht, wenn die Seite zum ersten Mal geladen wird, sodass der Benutzer keinen Inhalt sieht, der nicht korrekt formatiert ist.

• WebFontHostName: Hostname, um die Schriftarten zu beziehen. Kann Google oder einen anderen Schriftartenanbieter verwenden. Verwenden Sie // anstelle von http oder https, um eine Nichtübereinstimmung mit dem aktuellen Sicherheitsstatus zu vermeiden.
• WebFontName: Der Name der zu ladenden Schriftart. Dies wird an die URL angehängt, sodass Sie diesen Parameter auch verwenden können, um andere URL-Parameter zu laden, die dieser Host benötigt. (z. B. nur einen bestimmten Text über text=Hello auswählen oder zwischen fetter und normaler Schriftartgewichtung wählen)
• LinkMediaString: Ein Wert, der die Bedingungen angibt, unter denen die Schriftart angewendet werden soll. Werte umfassen eine Mindestbreite, um mobile Geräte auszuschließen, screen and (min-width:500px) oder ausschließen beim Drucken, not print

Beispiel

Telefonnummernformatierer

Herunterladen

telephone-number-formatter.zip

Beschreibung

Formatiert Telefonnummern und ermöglicht die Bearbeitung.

Bibliotheksdefinition

https://github.com/jackocnr/intl-tel-input

Parameter

• AllowDropdown: bool
  Zeigt das Symbol im Bearbeitungsmodus an

• InitialCountry: string
  Einzelner Ländercode, der als Standard verwendet wird, wenn leer

• OnlyCountries: string
  Beschränken Sie Ihre Länderauswahlliste. Im Format "us,gb,cz,mx" ohne Leerzeichen

• PreferredCountries: string
  Diese Länder erscheinen oben in der Liste. Im Format "us,gb,cz,mx" ohne Leerzeichen

• UseNationalMode: bool
  Ob das Widget den Ländercode anzeigen soll oder nicht

Beispiel

Favicon-Lader

Herunterladen

faviconwidget.zip

Beschreibung

Verwenden Sie, um ein benutzerdefiniertes Favicon-Symbol für die App Builder-Instanz anzuzeigen, das im Adressbereich des Browser-Tabs angezeigt wird. Das Symbol wird auch auf dem Startbildschirm eines mobilen Geräts (iOS und Android) angezeigt, wenn die Seite zum Startbildschirm des mobilen Geräts hinzugefügt wird.

Beim Installieren des Favicon Loaders laden Sie zunächst die Zip-Datei in den Widget-Bereich der Sammlung hoch, die von der App verwendet wird (in Themes), wählen Sie "Site level" für die unterstützten Modi aus und fügen Sie die 4 unten aufgeführten Parameterwerte hinzu. Gehen Sie dann zu App Builder IDE > Konfiguration > Site Widgets und fügen Sie das Favicon Loader-Widget hinzu. Fügen Sie den FaviconUrl-Parameter mit einem der 3 akzeptierten URL-Formate (siehe unten) sowie Einträge für die anderen Parameter hinzu. Wenn Sie mehrere Favicon-Icons angeben, müssen Sie mehrere Instanzen des Favicon-Widgets hinzufügen (eine pro angegebenem Icon).

Parameter

• FaviconRel: Erforderlicher Wert, fügen Sie den Parameter zur Konfiguration mit dem Wert hinzu. Beispiel: icon
• FaviconSizes: Wert nicht erforderlich, aber fügen Sie den Parameter zur Konfiguration hinzu. Beispiel: 16x16
• FaviconType: Wert nicht erforderlich, aber fügen Sie den Parameter zur Konfiguration hinzu. Beispiel: .png

• FaviconUrl: Erforderlicher Wert, fügen Sie den Parameter zur Konfiguration mit dem Wert hinzu. Beispiel: https://realfavicongenerator.net/blog/wp-content/uploads/fbrfg/apple-touch-icon.png

  Akzeptierte URL-Werte:

  • Vollständige URL (Beispiel: https://example.com/service/image/4264b246-79d6-40ad-8f38-4213fa955de5?tag=%22eDWmFG%2Bwe4ismdUwh5fW0A%3D%3D%22)
  • Relative URL (Beispiel: /service/image/4264b246-79d6-40ad-8f38-4213fa955de5?tag=%22eDWmFG%2Bwe4ismdUwh5fW0A%3D%3D%22)
  • Base64-kodierte Daten-URL (Beispiel: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABFCAYAAAD6pOBtAAAABmJLR0QA/...)

Beispiel

Dial

Download

dial.zip

Beschreibung

Erstellen Sie eine anpassbare UI-Dial-Steuerung zur Anzeige im App Builder.

Beim Installieren des Dial-Widgets laden Sie zunächst die Zip-Datei in den Widgets-Bereich der Sammlung hoch, die von der App verwendet wird (in Themes), wählen Sie "Site level" für unterstützte Modi und fügen Sie die benötigten Parameter-Einträge und Werte hinzu (unterstützte Parameter sind unten aufgeführt). Dies setzt voraus, dass Sie bereits eine Spalte in der Datenquelle haben, die die Daten enthält, die Sie mit dem Dial anzeigen möchten. Gehen Sie als Nächstes zu der Seite, auf der Sie den Dial für eine Steuerung anzeigen möchten. Geben Sie im Steuerungsdesigner im Abschnitt Widget-Informationen den Namen des Widgets an (z. B. Dial), setzen Sie die Parameterinformationen, um eine Zuordnung zwischen DialValue und dem Steuerungsnamen, den Sie auf dem Dial anzeigen möchten, bereitzustellen. Setzen Sie auch den Widget-Schnittstellenmodus (z. B. Always) und den aktiven Widget-Modus (z. B. View and Edit).

Originalquelle Bibliotheksdefinition

https://github.com/aterrien/jQuery-Knob

Parameter

• DialAngleArc: Numerischer Wert von 0-360, 360 ist ein voller Kreis, alles darunter macht es mehr zu einem Messgerät. Beispiel: 360
• DialAngleOffset: Numerischer Wert von 0-360, für den Punkt, an dem die 0% beginnen und dann herumgehen. Beispiel: 270
• DialColor: Wert nicht erforderlich, definieren Sie die Farbe des Dials im Widget
• DialDisplayInput: Standard = true, wenn Sie die Eingabe ausblenden möchten, setzen Sie auf false
• DialMax: Maximalwert, Standard = 100. Wenn das Widget verwendet wird, um Prozentsätze darzustellen, und der Wert über 100% hinausgehen kann, ist es am besten, das Maximum in einem anderen Feld als 100 zu berechnen. Der Wert, den Sie übergeben, muss mit 100 multipliziert werden. Beispiel: IIF(Value>100, 100, Value) AS Max.
• DialMin: Minimalwert, Standard = 0
• DialReadOnly: Deaktiviert Eingaben und Ereignisse
• DialStep: Schrittgröße, Standard = 1
• DialThickness: Dicke des Messgeräts
• DialValue: Numerischer Wert, der durch den Dial dargestellt werden soll. Beispiel: 98.1
• DialValueSuffix: Maßeinheit, die durch den Dial dargestellt wird, Standard ist Prozent. Beispiel: %
• DialWidth: Breite des Dials. Beispiel: 65%
• DialValuePrefix: Maßeinheit, die durch den Dial dargestellt wird, positioniert nach/vor dem Wert. Beispiel: $

Beispiele

In die Zwischenablage kopieren (mit Symbol)

Download

clipboardwidget.zip

Beschreibung

Verwenden Sie dies, um eine UI-Zwischenablage-Schaltflächensteuerung im App Builder zu erstellen, die es einem Benutzer ermöglicht, die konfigurierten Informationen/Daten in den Speicher der Zwischenablage seines Geräts zu kopieren (um sie an anderer Stelle einzufügen und zu verwenden). Es sind keine Parameter erforderlich, um dieses Widget zu verwenden; Sie geben den Wert an, den Sie als Steuerfeld kopieren möchten.

• Wenn Sie das Erscheinungsbild des Widgets von der Zwischenablage-Schaltfläche in etwas anderes ändern möchten, bearbeiten Sie den i class-Wert in der view.html-Datei.
• Der Tooltip-Text, der erscheint, wenn Sie kopieren, ist ebenfalls anpassbar, indem Sie den title-Wert in der view.html-Datei bearbeiten. Dieser Wert ist standardmäßig auf "Kopiert!" gesetzt.

Beispiel

In die Zwischenablage kopieren (mit Schaltfläche)

Download

copytoclipboardbutton.zip

Beschreibung

Verwenden Sie dies, um eine UI-Zwischenablage-Schaltflächensteuerung im App Builder zu erstellen, die es einem Benutzer ermöglicht, die konfigurierten Informationen/Daten in den Speicher der Zwischenablage seines Geräts zu kopieren (um sie an anderer Stelle einzufügen und zu verwenden). Dieses Widget ermöglicht es Ihnen, eine Schaltfläche anstelle eines Symbols zu verwenden. Es sind keine Parameter erforderlich, um dieses Widget zu verwenden; Sie geben den Wert an, den Sie als Steuerfeld kopieren möchten.

• Wenn Sie das Erscheinungsbild des Widgets vom Zwischenablage-Button in etwas anderes ändern möchten, bearbeiten Sie den i class Wert in der view.html Datei.
• Der Tooltip-Text, der erscheint, wenn Sie kopieren, ist ebenfalls anpassbar, indem Sie den title Wert in der view.html Datei bearbeiten. Dieser Wert ist standardmäßig auf "Copied!" gesetzt.

Beispiel

Mehrfachdatei-Upload

Download

• multifileupload_3.3.zip
• multifileupload_3.0.zip
• multifileupload_2.0.zip

Beschreibung und Parameter

Das Multi File Upload Widget verwendet die FilePond-Bibliothek, Version 4.28.2, die unter https://github.com/pqina/filepond zu finden ist. Dieses Widget ermöglicht das gleichzeitige oder asynchrone Hochladen mehrerer Dateien, indem Dateien vorübergehend in einer einzelnen Spalte gespeichert und das Speicherevent genutzt wird, um die Datei-Binärdaten abzurufen und in eine separate Tabelle zu verschieben, wo sie weiter verarbeitet oder in ein lokales oder Netzwerk-Dateisystem verschoben werden können.

Das Widget ist erforderlich und enthält neue Parameter für allowFileSizeValidation und maxFileSize.

Das Widget der Version 3.0 kann so konfiguriert werden, dass Uploads, die eine bestimmte Größe überschreiten, eingeschränkt werden. Standardmäßig ist das Widget auf "256KB" eingestellt, und dieser Wert kann auf jede MB- oder KB-Datei aus der FilePond-Dokumentation geändert werden, indem die binder.js-Datei bearbeitet wird. Weitere Informationen finden Sie unter Filepond Dateigrößenvalidierung.

Zusätzlich zu den angegebenen Parametern müssen die folgenden Widget-Parameter konfiguriert werden, um die Dateigrößenbeschränkung zu nutzen:

• allowFileSizeValidation: Standardwert von '1'
• maxFileSize: kein Standard

Weitere Parameter können basierend auf der FilePond-Dokumentation konfiguriert werden unter https://pqina.nl/filepond/docs/api/plugins/file-validate-size/ im Abschnitt "Properties". Um zusätzliche Parameter/Eigenschaften hinzuzufügen, müssen Sie die Datei "binder.js" im Widget direkt bearbeiten. Bitte beachten Sie, dass zusätzliche hinzugefügte Parameter/Eigenschaften möglicherweise nicht wie erwartet funktionieren und nur die oben genannten Parameter getestet wurden.

Geolocation

Download

geolocation.zip

Beschreibung

Dieses Widget erfasst den aktuellen Standort Ihres Geräts mithilfe von HTML5 Geolocation. Es speichert die Koordinaten in den Spalten, die mit den Namen "Latitude" und "Longitude" verknüpft sind. Diese können ausgeblendet werden.

Parameter

• RefreshRate (in Millisekunden)

Der Standardwert des Widgets ist auf -1 (Deaktiviert) gesetzt. Der Datensatz wird nicht geändert/gespeichert, bis das System eine Änderung des Standorts erkennt, indem der Tabellen-Datensatz mit Ihrem aktuellen Standort verglichen wird.

Beispiel: RefreshRate=5000 überprüft Ihren Standort alle 5 Sekunden. Wenn eine Änderung festgestellt wird, wird der Datensatz geändert.

Beispiel

Signature

Download

signature.zip

Dokumentation

https://willowsystems.github.io/jSignature

Beschreibung

Dieses Widget ermöglicht es Ihnen, eine gezeichnete Unterschrift direkt im Browser anzuzeigen oder zu bearbeiten.

Es ist mit Touchscreen-Geräten kompatibel und speichert die Unterschrift als Bilddaten in einem Datenbankfeld.

Parameter

• Width: Numerischer Wert für die Breite des Signaturfelds
• Height: Numerischer Wert für die Höhe des Signaturfelds
• BackgroundColor: Hintergrundfarbe des Signaturfelds
• Color
• ImageFieldName: Parameter, der aus der Texteingabe übergeben wird. Ist der Steuerungsname des Bildes.
• LineWidth: Numerischer Wert für die Breite der Linie, auf der die Benutzer unterschreiben

Beispiel

Währungsformat

Download

currencyformatwidget.zip

Beschreibung

Dieses Widget ist für Steuerungen verfügbar und ändert eine Eingabe in das USD-Format, wobei die Cents optional sind.

Parameter

N/A

Beispiel

Bewertungsleisten

Download

rating-bars.zip

Beschreibung

Dieses Widget ermöglicht es dem Benutzer, einen Wert durch Auswahl aus einer grafischen Bewertungsoberfläche einzugeben oder zu ändern.

Parameter

• RatingTheme: Dieser Wert ist eine Zeichenfolge und ändert das Aussehen der Bewertungsleiste
• RatingValueOptions: Dieser Wert ist eine Zeichenfolge und ändert die in der Bewertungsleiste verfügbaren Werte

Beispiel

Organigramm

Herunterladen

org-chart-panel.zip

Beschreibung

Dieses Widget ermöglicht es, ein Organigramm auf einem Panel basierend auf zugrunde liegenden Daten zu generieren.

Parameter

• ApiKey: Dieser Wert repräsentiert den API-Schlüssel, den der App Builder für die konfigurierte REST-API-Ressource ausgibt, die das Widget nutzen wird.
• jsonUrl: Dieser Wert repräsentiert den vollständig qualifizierten URL-Pfad zum Zugriff auf die JSON-Daten.
• property.id: Der Schlüsselwert aus dem Geschäftsobjekt. Zum Beispiel: employeeID
• property.items: Der Wert hierfür sollte 'items' sein.
• property.label: Dieser Wert sollte aus dem Geschäftsobjekt stammen und den Betreffwert darstellen, der im Organigramm erscheint. Zum Beispiel: FullName
• property.parent: Dieser Wert sollte aus dem Geschäftsobjekt stammen und darstellen, wem der Betreff unterstellt ist. Zum Beispiel: reportsTo
• property.subtitle: Dieser Wert sollte aus dem Geschäftsobjekt stammen und die Klassifizierung des Betreffs in der Hierarchie darstellen. Zum Beispiel: title
• support.linktopage: Dieser Wert sollte '1' sein.
• support.wrapping: Dieser Wert sollte '1' sein.

Beispiel

iframe Resizer

Herunterladen

iframeresizercontent.zip

Beschreibung

Dieses Widget unterstützt das Halten eines iframes in der Größe seines jeweiligen Inhalts. Es behandelt das Ändern der Fenster- und Inhaltsgröße, Seitenlinks, Verschachtelung und mehrere iframes.

Dokumentation

iframe-resizer

Parameter

Im Allgemeinen sind zwei Komponenten erforderlich, um das iframe Resizer-Widget für die Verwendung mit einer App Builder-App zu konfigurieren:

1. Die externe Seite, die App Builder in einem iframe hostet
2. Innerhalb des iframes, wo App Builder läuft

Für weitere Informationen zur Konfiguration siehe Eine App Builder-Seite auf einer Website mit iframe anzeigen

Seitenbanner

Download

site_banner.zip

Beschreibung und Parameter

Der Seitenbanner ist ein widget, das auf allen App-Seiten ein Banner oben bereitstellt. Das Banner ist anpassbar und kann leicht so konfiguriert werden, dass es jeden gewünschten Text anzeigt. Das Widget unterstützt die folgenden 2 Parameter:

• BannerText: BannerText sollte den Text enthalten, der im Banner angezeigt werden soll. Zum Beispiel: "Dies ist die Sandbox-Umgebung"
• BannerStyle: BannerStyles enthalten das Inline-CSS, das das Banner gestaltet. Zum Beispiel: text-align:center;background-color:yellow

Beispiel