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 gerendert wird. Widgets können verwendet werden, um die Benutzeroberfläche für die Benutzer zu verbessern. (Siehe auch Widgets und Widget-Fehlerbehebung.)

Textformat

Download

text_mask.zip

Beschreibung

Erstellt eine Maske im Zieltextfeld 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 Anzeigen und Bearbeiten 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 die Zeilenhintergrundfarbe auf die Standardfarbe für MRP-Zeilen zurück.

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 Anzeigen und Bearbeiten 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 angezeigt wird, überprüfen Sie die Panel-Themen, um zu sehen, ob für die aktive Zeile ein Farbwert definiert ist (einschließlich Weiß). Möglicherweise müssen Sie die Hintergrundfarbe der aktiven Zeile auf transparent ändern.

Beispiel

Zeichenanzahl

Herunterladen

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-Ansicht zum Textfeld, öffnen Sie das Feld im Bearbeitungsmodus und verwenden Sie ein Entwicklerwerkzeug des Webbrowsers, um das Feld zu inspizieren. Zum Beispiel: Text-Area_0aae73c8-2002-42a2-99c4-242dac4f84db

Optional können Sie einen Index-Parameter 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 den Wert Unterstützte Modi auf Nur Ansicht setzen. Nach dem Hinzufügen das Widget über dem Steuerelement platzieren, dessen gescannter Wert angezeigt 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, dass der Status des Panels, in dem das Widget erscheint, auf Standard gesetzt ist. Überprüfen Sie den Wert Panel > Edge Case > Anfangszustand des Panels = Standard.

• Erwägen Sie, 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 Videoanruf 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 Anzeige 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 das Ereignis so einstellen, dass Daten aktualisiert werden. Fügen Sie dieses Widget zum Schaltflächensteuerelement hinzu.

Wenn Text auf leer und ShowTimestamp auf 0 gesetzt wird, 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 mithilfe eines beweglichen Reglers ü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 mithilfe eines beweglichen Reglers ü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 Steuerelementnamen gesetzt werden, an die Sie die Schiebereglerwerte 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

Image Rotater

Download

image-rotater.zip

Beschreibung

Dreht 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.

Nur im Bearbeitungsmodus funktionsfähig, wurde jedoch auch für den Ansichtsmodus konzipiert, 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 Roboto.

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

Download

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

Download

faviconwidget.zip

Beschreibung

Verwenden Sie dies, 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 Website zum Startbildschirm des mobilen Geräts hinzugefügt wird.

Beim Installieren des Favicon Loaders 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-Ebene" für unterstützte 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-Symbole angeben, müssen Sie mehrere Instanzen des Favicon-Widgets hinzufügen (eine pro angegebenem Symbol).

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

Herunterladen

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 "Site-Ebene" für unterstützte Modi aus und fügen 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. Stellen Sie auch den Widget-Schnittstellenmodus (z. B. Immer) und den aktiven Widget-Modus (z. B. Anzeigen und Bearbeiten) ein.

Definition der ursprünglichen Quellbibliothek

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% beginnt und dann herumgeht. 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% gehen 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

Multi File Upload

Download-Links

Verwenden Sie die folgenden Links, um die verschiedenen Versionen des Multi File Upload-Widgets herunterzuladen.

• Multi File Upload - Version 3.4
• Multi File Upload - Version 3.3
• Multi File Upload - Version 3.0
• Multi File Upload - Version 2.0

Beschreibung und Parameter

Das Multi File Upload-Widget verwendet die FilePond-Bibliothek. Dieses Widget ermöglicht das gleichzeitige oder asynchrone Hochladen mehrerer Dateien, indem Dateien vorübergehend in einer einzigen Spalte gespeichert werden. Es verwendet das Speichern-Ereignis, um die Datei-Binärdaten abzurufen und in eine separate Tabelle zu verschieben. Von dort aus können sie weiterverarbeitet oder in ein lokales oder Netzwerk-Dateisystem verschoben werden.

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

Die Version 3.4 des Widgets zeigt kein Löschsymbol für hochgeladene Dateien an. In den Versionen 3.3, 3.0 und 2.0 ist das Löschsymbol vorhanden, jedoch nicht funktionsfähig. Hochgeladene Dateien können mit Anwendungslogik entfernt werden.

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

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

• allowFileSizeValidation: Standardwert von 1.

• maxFileSize: Kein Standardwert.

Weitere Parameter können basierend auf der FilePond-Dokumentation im Abschnitt Eigenschaften konfiguriert werden. Um zusätzliche Parameter/Eigenschaften hinzuzufügen, müssen Sie die Datei binder.js im Widget direkt bearbeiten.

Geolocation

Download

geolocation.zip

Description

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

Parameters

• RefreshRate (in Millisekunden)

Der Standardwert des Widgets ist auf -1 (Deaktiviert) eingestellt. 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.

Example

Signature

Download

signature.zip

Documentation

https://willowsystems.github.io/jSignature

Description

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.

Parameters

• Width: Numerischer Wert für die Breite des Unterschriftenfelds
• Height: Numerischer Wert für die Höhe des Unterschriftenfelds
• BackgroundColor: Hintergrundfarbe des Unterschriftenfelds
• Color
• ImageFieldName: Parameter, der von der Textsteuerung ü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 Steuerelemente 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 einzugeben oder zu ändern, indem er aus einer grafischen Bewertungsoberfläche auswählt.

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

Download

org-chart-panel.zip

Beschreibung

Dieses Widget ermöglicht es Ihnen, ein Organigramm auf einem Panel basierend auf den 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 des Geschäftsobjekts. Zum Beispiel: employeeID
• property.items: Der Wert hierfür sollte 'items' sein.
• property.label: Dieser Wert sollte aus dem Geschäftsobjekt stammen und den Wert darstellen, der im Organigramm erscheint. Zum Beispiel: FullName
• property.parent: Dieser Wert sollte aus dem Geschäftsobjekt stammen und darstellen, wem das Subjekt unterstellt ist. Zum Beispiel: reportsTo
• property.subtitle: Dieser Wert sollte aus dem Geschäftsobjekt stammen und die Klassifizierung des Subjekts 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 die Anpassung der Größe eines iframes an den jeweiligen Inhalt. 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

Site Banner

Herunterladen

site_banner.zip

Beschreibung und Parameter

Site Banner ist ein siteweites Widget, das ein Banner oben auf allen App-Seiten 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