Widget-Downloadbibliothek in Jitterbit App Builder

Übersicht

Diese Seite enthält eine Bibliothek mit Widget-Downloads zur Verwendung in App Builder. Widgets bieten einen Code-Hook in App Builder, mit dem ein Designer vollständig kontrollieren kann, wie das Feld gerendert wird. Widgets können verwendet werden, um die Benutzeroberfläche für Benutzer zu verbessern. (Siehe auch Widgets und Widget-Fehlerbehebung.)

Ace Editor

Download

ace.zip

Beschreibung und Parameter

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

Weitere Informationen und Dokumentation finden Sie unter Ace Code Editor. Seit App Builder 4.61 verwendet dieses Widget ACE v1.43.6. Frühere Versionen verwenden ACE v1.4.6.

Implementierungshinweise

• Stellen Sie beim Hinzufügen und Definieren des Widgets in App Builder den Wert Modes Supported auf View and Edit
• Beim Hinzufügen von Widget Parameters können Sie Static Values definieren, zum Beispiel:
  • fontSize, Static Value, 14
  • height, Static Value, 500
  • mode, Static Value, xml

Auto Event Runner

Download

AutoEventRunner.zip

Beschreibung und Parameter

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

Ein weiterer möglicher Anwendungsfall für dieses Widget besteht darin, ein Panel nach 10 Sekunden zu schließen. Fügen Sie Ihrer Seite eine Schaltfläche hinzu, die ein Event ausführt. Stellen Sie das Event optional so ein, dass es Daten aktualisiert. Fügen Sie dieses Widget zur Button Control hinzu.

Wenn Text leer und ShowTimestamp auf 0 gesetzt ist, kann es verborgen ausgeführt werden. Die 90000 sind Millisekunden oder 90 Sekunden.

Beispiel

Barcode-/QR-Code-Scanner

Download

qr_scanner2.zip

Beschreibung

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

Implementierungshinweise

• Stellen Sie beim Hinzufügen und Definieren des Widgets in App Builder den Wert Modes Supported auf View Only. Platzieren Sie das Widget nach dem Hinzufügen über der Control, in die der gescannte Wert eingefügt werden soll. Diese Control sollte einer String/NVarchar-Spalte in einer zugrunde liegenden Tabelle zugeordnet werden. Wenn der Name dieser Control den Text qr enthält, wird das QR-Code-Scanner-Widget automatisch oben platziert.

• Bestätigen Sie, dass der Bedienfeldzustand, in dem das Widget angezeigt wird, auf Standard eingestellt ist. Überprüfen Sie Panel > Edge Case > Initial Panel State Wert = Standard.

• Erwägen Sie, dem Bedienfeld ein zweites Text-Steuerelement mit Edit State = Read Only hinzuzufügen. Dieses Steuerelement rendert und zeigt den gescannten QR- oder Barcode-Ausgabewert an.

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

Github-Bibliothekslink zum Anzeigen unterstützter Widget-Konfigurationen: HTML5 QR Code

Beispiel

Zeichenzähler

Download

character_counter_v2.zip

Beschreibung

Dieses SRP/Form-Bedienfeld-Widget ermöglicht es Ihnen, einen oberen Zeichengrenzwert (Limit) zu konfigurieren. Es erfordert einen definierten Parameter für CharLimit (Zeichenbegrenzung) sowie TextFieldID (ID für das Feld, in dem das Widget platziert wird). Nachdem das Widget in einem Textfeld aktiviert ist, zeigt das Widget sowohl den Zeichengrenzwert (Limit) als auch die Verbleibend-Werte im Bearbeitungsmodus an.

Um die TextFieldID zu finden, navigieren Sie von der Anwendungsbenutzeroberfläche zum Textfeld, öffnen Sie das Feld im Bearbeitungsmodus, und verwenden Sie ein Web-Browser-Entwicklertool, um das Feld zu untersuchen. Beispiel: Text-Area_0aae73c8-2002-42a2-99c4-242dac4f84db

Konfigurieren Sie optional einen Index-Parameter mit dem Widget, falls Sie das Widget mehrmals auf einem Bedienfeld konfigurieren möchten.

Parameter

Implementierungshinweise

• Dieses Widget erfordert, dass Sie eine leere Vorlage erstellen und diese leere Vorlage auf ein Template-Steuerelement auf der Seite anwenden. Fügen Sie einen Kommentar in die Vorlage ein, wie „Hello World"

  Wenn Sie das Character Count Widget auf das Template-Steuerelement anwenden, geben Sie TextFieldID unbedingt im Widget-Parameter an

• Wenn die Zeichenzählungsinformationen nicht außerhalb des Bearbeitungsmodus angezeigt werden, deaktivieren Sie das Feld Target Container in der Widget-Definition.

Beispiel

In Zwischenablage kopieren (mit Schaltfläche)

Download

copytoclipboardbutton.zip

Beschreibung

Mit diesem Widget erstellen Sie ein Steuerelement für eine Zwischenablage-Schaltfläche in App Builder, das Benutzern ermöglicht, die konfigurierten Informationen/Daten in ihren Computer-Zwischenspeicher 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, den Sie kopieren möchten, als Steuerfeld an.

• Falls Sie das Widget-Erscheinungsbild von der Zwischenablage-Schaltfläche in etwas anderes ändern müssen, bearbeiten Sie den Wert i class aus der Datei view.html
• Der Tooltip-Text, der beim Kopieren angezeigt wird, kann auch durch Bearbeiten des Werts title in der Datei view.html angepasst werden. Dieser Wert ist standardmäßig auf „Copied!" eingestellt

Beispiel

In Zwischenablage kopieren (mit Symbol)

Download

clipboardwidget.zip

Beschreibung

Mit diesem Widget erstellen Sie ein Steuerelement für eine Zwischenablage-Schaltfläche in App Builder, das Benutzern ermöglicht, die konfigurierten Informationen/Daten in ihren Computer-Zwischenspeicher 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, den Sie kopieren möchten, als Steuerfeld an.

• Wenn Sie das Widget-Aussehen von der Zwischenablage-Schaltfläche in etwas anderes ändern möchten, bearbeiten Sie den i class-Wert aus der Datei view.html
• Der Tooltip-Text, der beim Kopieren angezeigt wird, kann auch angepasst werden, indem Sie den title-Wert in der Datei view.html bearbeiten. Dieser Wert ist standardmäßig auf "Copied!" eingestellt

Beispiel

Währungsformat

Download

currencyformatwidget.zip

Beschreibung

Dieses Widget ist für Steuerelemente verfügbar und wandelt eine Eingabe in das USD-Format um, wobei die Cents optional sind.

Parameter

Nicht zutreffend

Beispiel

Date Picker mit aktivierten Daten

Download

datepickerenableddates.zip

Dokumentation

bootstrap-datepicker

Beschreibung

Dieses Widget bietet Parameter für ein Date-Picker-Steuerelement zum Aktivieren bestimmter Daten im Kalender, die vom Benutzer ausgewählt werden können. Alle anderen Daten werden für die Auswahl deaktiviert.

Parameter

• DatesToEnable: Zeichenkette von Datumsangaben, getrennt durch ein Leerzeichen und im Format MM/DD/YYYY. Beispiel: 08/03/2022 08/12/2022 10/11/2022
• MinAvailableDate: Zeichenkette und das Datum, das der Date Picker verwendet, um abzuleiten, welcher Monat geöffnet werden soll. Beispiel: 08/03/2022
• SelectedDateString: Zeichenkette und der Wert der Tabellenspalte, in der Sie in der Zeile speichern. Stellen Sie sicher, dass Sie die Datimspalte im Geschäftsobjekt in eine Zeichenkette konvertieren, bevor Sie diese als Parameter übergeben. Beispiel: 08/12/2022

Implementierungshinweise

Wenn Sie das Widget in App Builder hinzufügen und definieren, legen Sie den Wert „Unterstützte Modi" auf Ansicht und Bearbeitung fest.

Dial

Download

dial.zip

Beschreibung

Erstellen Sie ein anpassbares UI-Dial-Steuerelement zur Anzeige in App Builder.

Beim Installieren des Dial-Widgets laden Sie zunächst die Zip-Datei in den Bereich „Widgets" 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 Parameter-Einträge und Werte hinzu, die Sie benötigen (unterstützte Parameter sind unten aufgeführt). Dies setzt voraus, dass Sie bereits eine Spalte in der Datenquelle haben, die Daten enthält, die Sie mit dem Dial anzeigen möchten. Gehen Sie dann zur Seite, auf der Sie das Dial für ein Steuerelement anzeigen möchten. Im Control Designer im Bereich „Widget-Informationen" geben Sie den Namen des Widgets an (z. B. Dial), legen Sie die Parameterinformationen fest, um eine Zuordnung zwischen DialValue und dem Steuerelement-Namen bereitzustellen, den Sie auf dem Dial anzeigen möchten. Legen Sie auch den Widget-Schnittstellenmodus (z. B. Immer) und den Widget-Aktivmodus (z. B. Ansicht und Bearbeitung) fest.

Definition der ursprünglichen Quellbibliothek

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

Parameter

• DialAngleArc: Numerischer Wert von 0–360, 360 ist ein vollständiger Kreis, alles andere macht es eher zu einer Skala. Beispiel: 360
• DialAngleOffset: Numerischer Wert von 0–360, für den Ort, an dem 0 % beginnt und dann herum läuft. Beispiel: 270
• DialColor: Wert nicht erforderlich, definiert die Farbe des Dials im Widget
• DialDisplayInput: Standard = true, wenn Sie die Eingabe ausblenden möchten, setzen Sie auf false
• DialMax: Maximalwert, Standard = 100. Bei Verwendung des Widgets zur Darstellung von Prozentzahlen gilt als bewährte Methode, wenn der Wert über 100 % gehen kann, den Maximum in einem anderen Feld auf 100 zu berechnen. Der übergebene Wert muss mit 100 multipliziert werden. Beispiel: IIF(Value>100, 100, Value) AS Max.
• DialMin: Minimalwert, Standard = 0
• DialReadOnly: Deaktiviert Eingabe und Ereignisse
• DialStep: Schrittgröße, Standard = 1
• DialThickness: Skalierungsdicke
• DialValue: Numerischer Wert, der vom Dial dargestellt werden soll. Beispiel: 98.1
• DialValueSuffix: Maßeinheit, die vom Dial dargestellt wird, Standard ist Prozentsatz. Beispiel: %
• DialWidth: Dial-Breite. Beispiel: 65%
• DialValuePrefix: Maßeinheit, die vom Dial dargestellt wird, positioniert nach/vor dem Wert. Beispiel: $

Beispiele

Dynamische Zeilenfarbe

Download

dynamic_row_color.zip

Beschreibung

Das Widget „Dynamische Zeilenfarbe" ermöglicht es, die Hintergrundfarbe von Zeilen in einem Mehrfach-Zeilen-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 für MRP-Zeilen zurück.

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

Parameter

N/A

Implementierungshinweise

• Legen Sie beim Hinzufügen und Definieren des Widgets im App Builder den Wert Modes Supported auf View und Edit fest
• Die Zeilenfarbe wird anhand des Steuerelements bestimmt, das dem Widget zugeordnet ist. Dieses Steuerelement muss einer Spalte zugeordnet sein, die die Farbe definiert

• Fügen Sie eine abgeleitete Spalte zur Business Rule des MRP-Panels hinzu, die den Farbwert definiert. Beispiel: RowColor. Diese Spalte kann dynamische Logik enthalten, z. B. eine IIF-Anweisung, um den Farbwert zu bestimmen. Beispiel:

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

• Fügen Sie die abgeleitete Spalte aus der Business Rule als Texttypsteuerelement zum MRP hinzu und legen Sie den Widget-Wert fest, um dieses Widget zu verwenden

  • Legen Sie die Priorität auf 1 fest
  • Definieren Sie die Breite als 1
  • Setzen Sie Label-Sichtbarkeit auf Ausgeblendet

• Falls das gewünschte Ergebnis nicht angezeigt wird, überprüfen Sie alle Panel-Designs, um festzustellen, ob die aktive Zeile einen definierten Farbwert enthält (einschließlich Weiß). Möglicherweise muss die Hintergrundfarbe der aktiven Zeile auf transparent gesetzt werden.

Beispiel

Favicon-Loader

Download

faviconwidget.zip

Beschreibung

Wird verwendet, um ein benutzerdefiniertes Favicon-Symbol für die App Builder-Instanz anzuzeigen, das im Adressleistenbereich der Browser-Registerkarte angezeigt wird. Das Symbol wird auch auf dem Startbildschirm eines Mobilgeräts (iOS und Android) angezeigt, wenn die Website zum Startbildschirm des Mobilgeräts hinzugefügt wird.

Laden Sie bei der Installation des Favicon-Loaders zuerst die ZIP-Datei in den Bereich „Widgets" der vom App verwendeten Sammlung hoch (unter „Themes"), wählen Sie „Site level" für „Modes Supported" und fügen Sie die 4 unten aufgeführten Parameterwerte hinzu. Gehen Sie anschließend zu App Builder IDE > Configuration > Site Widgets und fügen Sie das Widget „Favicon Loader" hinzu. Fügen Sie dann den Parameter „FaviconUrl" mit einem der 3 akzeptierten URL-Formate (siehe unten) sowie Einträge für die anderen Parameter hinzu. Falls mehrere Favicon-Symbole angegeben werden, müssen mehrere Instanzen des Favicon-Widgets hinzugefügt werden (jeweils eine pro angegebenem Symbol).

Parameter

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

• FaviconUrl: Erforderlicher Wert, fügen Sie den Parameter zusammen mit dem Wert zur Konfiguration 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

Von-jetzt-Datumsformatierer

Download

from-now-date-formatter.zip

Parameter

Beispiel

Geolocation

Download

geolocation.zip

Beschreibung

Dieses Widget ruft den aktuellen Standort des Geräts über HTML5 Geolocation ab. Die Koordinaten werden in den Spalten gespeichert, die an Steuerelemente mit den Namen „Latitude" und „Longitude" gebunden sind. Diese können ausgeblendet werden.

Parameter

• RefreshRate (in Millisekunden)

Der Standard des Widgets ist auf -1 (Deaktiviert) eingestellt. Der Datensatz wird erst geändert/gespeichert, wenn das System eine Standortänderung erkennt, indem es den Tabellendatensatz mit dem aktuellen Standort vergleicht.

Beispiel: RefreshRate=5000 prüft den Standort alle 5 Sekunden. Wenn eine Änderung erkannt wird, wird der Datensatz aktualisiert.

Beispiel

Google Analytics

Download

google-analytics.zip

Beschreibung und Parameter

Verfolgt Seitenwechsel und Authentifizierung. Sendet an Google Analytics.

Beispiel

Iframe Resizer

Download

iframeresizercontent.zip

Beschreibung

Dieses Widget ermöglicht es, einen iframe an seinen jeweiligen Inhalt anzupassen. Es verwaltet die Größenanpassung von Fenster und Inhalt, Links innerhalb der Seite, Verschachtelung und mehrere iframes.

Dokumentation

iframe-resizer

Parameter

Generell 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 iframe, in dem App Builder ausgeführt wird

Weitere Informationen zur Konfiguration finden Sie unter App Builder Seite auf einer Website mit iframe anzeigen

Image Rotater

Download

image-rotater.zip

Beschreibung

Dreht ein Bild, das in einer Binärzelle gespeichert ist. Erstellt zwei Schaltflächen, eine dreht das Bild im Uhrzeigersinn und die andere gegen den Uhrzeigersinn.

Funktioniert nur im Bearbeitungsmodus, ist aber auch für die Ansicht konzipiert, sodass die Ansicht überhaupt nichts anzeigt.

Beispiel

Image Viewer

Beschreibung

Zeigt ein Bild mit zusätzlichen Größenparametern an. Im Lieferumfang der App Builder Sammlung enthalten.

Vollständige Dokumentation finden Sie unter Image Viewer Widget.

Isdesktop

Download

isdesktop.zip

Beschreibung

Das IsDesktop Widget wird beim Laden der Seite ausgeführt und prüft, ob der resultierende Viewport als Desktop-Browser gilt. Falls 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 gezielt angesteuert werden kann, wenn zusätzliche Kontrolle über das Aussehen und Verhalten von Elementen auf dem Bildschirm erforderlich ist.

Parameter

• IsDesktop: Boolean

Implementierungshinweise

• Fügen Sie einer Tabelle eine IsDesktop-Boolean-Spalte hinzu. Beispiel: Session
• Zur Implementierung in einem Panel können Sie ein Kontrollkästchen-Steuerelement hinzufügen, das das neue IsDesktop-Steuerelement in einem Panel mit vollständiger Transparenz und einer Höhe von 0 anzielt. Dies stellt sicher, dass das Steuerelement keinen Platz auf der Seite einnimmt, aber geladen wird
• Nach der oben beschriebenen Konfiguration können Sie jetzt die Spalte „Sichtbarkeit" verwenden, um die Panel-Sichtbarkeit zu steuern

Markdown-Renderer

Beschreibung und Parameter

Rendert Markdown-formatiertem Text aus einer gebundenen Spalte oder einem Steuerelement als formatiertes HTML. Im Lieferumfang der App Builder-Sammlung enthalten. Verfügbar in App Builder ab Version 4.64.

Vollständige Dokumentation finden Sie unter Markdown-Renderer-Widget.

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. Mit diesem Widget können mehrere Dateien synchron oder asynchron hochgeladen werden, indem Dateien vorübergehend in einer einzelnen Spalte gespeichert werden. Es verwendet das Save-Ereignis, um die Datei-Binary zu extrahieren und in eine separate Tabelle zu verschieben. Von dort aus kann 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. In den Versionen 3.3, 3.0 und 2.0 ist das Löschsymbol vorhanden, aber nicht funktionsfähig. Hochgeladene Dateien können durch Anwendungslogik entfernt werden.

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

Zusätzlich zu den angegebenen Parametern müssen folgende Parameter konfiguriert werden, um die Dateigröße-Beschränkung nutzen zu können:

• allowFileSizeValidation: Standardwert 1.

• maxFileSize: Kein Standardwert.

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

Org Chart

Download

org-chart-panel.zip

Beschreibung

Mit diesem Widget können Sie ein Organigramm auf einem Panel basierend auf zugrunde liegenden Daten generieren.

Parameter

• ApiKey: Dieser Wert stellt den API-Schlüssel dar, den App Builder der konfigurierten REST-API-Ressource zuordnet, die das Widget verwendet
• jsonUrl: Dieser Wert stellt den vollständig qualifizierten URL-Pfad dar, um auf die JSON-Daten zuzugreifen
• property.id: Der Schlüsselwert aus dem Geschäftsobjekt. Beispiel: employeeID
• property.items: Der Wert sollte „items" sein
• property.label: Dieser Wert sollte aus dem Geschäftsobjekt stammen und stellt den Betreffwert dar, der im Organigramm angezeigt wird. Beispiel: FullName
• property.parent: Dieser Wert sollte aus dem Geschäftsobjekt stammen und stellt dar, an wen sich der Betreff meldet. Beispiel: reportsTo
• property.subtitle: Dieser Wert sollte aus dem Geschäftsobjekt stammen und stellt die Klassifizierung des Betreffes in der Hierarchie dar. Beispiel: title
• support.linktopage: Dieser Wert sollte „1" sein
• support.wrapping: Dieser Wert sollte „1" sein

Beispiel

Range Slider

Download

range-slider.zip

Dokumentation

http://refreshless.com/nouislider

Beschreibung und Parameter

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

Als Designer können Sie die Werte für Minimum, Maximum und Schrittweite festlegen, die Sie unterstützen. Der Standard ist 0 bis 100 mit einer Schrittweite von 1.

Das Widget setzt automatisch die „pips" oder kleine Punkte unter der Linie, um die Skalierung der Linie anzuzeigen.

Beispiel

Rating Bars

Download

rating-bars.zip

Beschreibung

Dieses Widget ermöglicht dem Benutzer, einen Wert über eine grafische Bewertungsoberfläche einzugeben oder zu ändern.

Parameter

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

Beispiel

Signatur

Download

signature.zip

Dokumentation

https://willowsystems.github.io/jSignature

Beschreibung

Dieses Widget ermöglicht es dir, eine handschriftliche Signatur direkt im Browser anzuzeigen oder zu bearbeiten.

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

Parameter

• Width: Numerischer Wert für die Breite des Signaturfeldes
• Height: Numerischer Wert für die Höhe des Signaturfeldes
• BackgroundColor: Hintergrundfarbe des Signaturfeldes
• Color
• ImageFieldName: Parameter, der aus einem Textsteuerelement übergeben wird. Dies ist der Kontrollname des Bildes.
• LineWidth: Numerischer Wert für die Breite der Linie, auf der Benutzer unterschreiben

Beispiel

Website-Banner

Download

site_banner.zip

Beschreibung und Parameter

Der Website-Banner ist ein websiteweites Widget, das ein Banner oben auf allen App-Seiten bereitstellt. Das Banner ist anpassbar und kann leicht so konfiguriert werden, dass es einen beliebigen Text anzeigt. Das Widget unterstützt die folgenden 2 Parameter:

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

Beispiel

Telefonnummernformatierer

Download

telephone-number-formatter.zip

Beschreibung

Formatiert Telefonnummern und ermöglicht das Bearbeiten.

Bibliotheksdefinition

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

Parameter

• AllowDropdown: bool
  Das Symbol im Bearbeitungsmodus anzeigen

• InitialCountry: string
  Einzelner Ländercode, wird als Standard bei Leerzeichen verwendet

• OnlyCountries: string
  Beschränke die 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
  Bestimmt, ob das Widget die Ländervorwahl anzeigt oder nicht

Beispiel

Textformat

Download

text_mask.zip

Beschreibung

Erstellt eine Maske im Zieltext-Eingabefeld basierend auf Benutzereingaben und speichert dann die eingegebenen Daten.

Parameter

• TextFormat: string
• TextPlaceholder: string

Textformat

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

Hier sind die Maskendefinitionen:

• "a" stellt ein alphabetisches Zeichen dar (A-Z, a-z)
• "9" stellt ein numerisches Zeichen dar (0-9)
• "*" stellt ein alphanumerisches Zeichen dar (A-Z, a-z, 0-9)

Wenn Sie eine Maskendefinition benötigen, die nicht vordefiniert ist (z. B. Hex), können Sie Ihre eigene Definition in jquery hinzufügen. Beispiel:

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

Two Point Slider

Download

two-point-slider.zip

Dokumentation

http://refreshless.com/nouislider

Beschreibung und Parameter

Dieser Schieberegler ermöglicht dem Benutzer, zwei numerische Felder mit einem beweglichen Schieberegler über einer Linie zu bearbeiten.

Als Designer können Sie die Werte Min, Max und Step festlegen, die Sie unterstützen. Der Standard liegt zwischen 0 und 100 mit einem Schritt von 1.

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

Die Parameter LowColumn und HighColumn haben keine Standardwerte und müssen auf die Steuernamen gesetzt werden, an die Sie die Schieberegler-Werte binden möchten.

Beispiel

Web Font Loader

Download

web-font-loader.zip

Beschreibung und Parameter

Lädt die über den Parameter angegebene Schriftart. Der Standard ist Roboto.

Das Widget lädt die angegebene Schriftart in den Browser. Dies geschieht beim ersten Laden der Website, damit der Benutzer keinen Inhalt sieht, der nicht korrekt formatiert ist.

• WebFontHostName: Hostname zum Abrufen der Schriftarten. Sie können Google oder einen anderen Schriftartanbieter verwenden. Verwenden Sie // statt http oder https, um Nichtübereinstimmungen mit dem aktuellen Sicherheitsstatus zu vermeiden.
• WebFontName: Der Name der zu ladenden Schriftart. Dieser wird an die URL angehängt, sodass Sie diesen Parameter auch verwenden können, um alle anderen URL-Parameter zu laden, die dieser Host benötigt. (Auswahl nur eines bestimmten Textes über text=Hello oder Auswahl zwischen fetter und normaler Schriftdicke)
• LinkMediaString: Ein Wert, der die Bedingungen für die Anwendung der Schriftart angibt. Werte umfassen eine Mindestbreite, um Mobilgeräte auszuschließen, screen and (min-width:500px) oder zum Ausschließen beim Drucken, not print

Beispiel

Widget API Debugger

Download

widget-api-debugger.zip

Beschreibung und Parameter

Einfaches Widget, das die folgenden Widget-API-Werte ausgibt:

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

Beispiel