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 und ermöglichen es einem Designer, 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.)

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 Code-Editor-Werkzeug einbetten möchten.

Für weitere Informationen und Dokumentationen siehe Ace Code Editor. Seit App Builder 4.61 verwendet dieses Widget ACE v1.43.6. Frühere Versionen verwenden ACE v1.4.6.

Implementierungsnotizen

• Beim Hinzufügen und Definieren des Widgets im App Builder setzen Sie 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 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 einen Button zu Ihrer Seite hinzu, der ein Ereignis ausführt. Optional können Sie das Ereignis so einstellen, dass es Daten aktualisiert. Fügen Sie dieses Widget zur Schaltflächensteuerung hinzu.

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

Beispiel

Bar Code / 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 Modes Supported auf View Only. Nach dem Hinzufügen platzieren Sie das Widget über der Steuerung, die den gescannten Wert befüllen soll. Diese Steuerung sollte einer String/NVarchar-Spalte in einer zugrunde liegenden Tabelle zugeordnet sein. Wenn der Name dieser Steuerung den Text qr enthält, wird das QR-Code-Scanner-Widget automatisch darüber platziert.

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

• Ziehen Sie in Betracht, ein zweites Textfeld mit Edit State = Nur Lesen zum Panel hinzuzufügen. Dieses Control wird den gescannten QR- oder Barcode-Ausgabewert rendern und anzeigen.

• Wenn Sie einen NotReadableError erhalten, bedeutet dies, dass die Kamera, die das Widget zu verwenden versucht, 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 Bar-/QR-Code-Scanner-Widget demonstrieren möchten.

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

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 zum Textfeld aus der Anwendung UI-Ansicht, ö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

Konfigurieren Sie optional einen Indexparameter mit dem Widget, 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 Vorlagensteuerelement auf der Seite anwenden. Fügen Sie einen Kommentar in der Vorlage hinzu, wie "Hallo Welt"

  Wenn Sie das Zeichenanzahl-Widget auf das Vorlagensteuerelement 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

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 Zwischenspeicher 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 von der Zwischenablageschaltfläche in etwas anderes ändern müssen, bearbeiten Sie den Wert i class in der Datei view.html
• Der Tooltip-Text, der erscheint, wenn Sie kopieren, ist ebenfalls anpassbar, indem Sie den Wert title in der Datei view.html bearbeiten. Dieser Wert ist standardmäßig auf "Kopiert!" gesetzt.

Beispiel

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 Zwischenspeicher 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 Zwischenablageschaltfläche in etwas anderes ändern müssen, bearbeiten Sie den Wert i class in der Datei view.html
• Der Tooltip-Text, der erscheint, wenn Sie kopieren, ist ebenfalls anpassbar, indem Sie den Wert title in der Datei view.html bearbeiten. Dieser Wert ist standardmäßig auf "Kopiert!" gesetzt.

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

Datumsauswahl mit aktivierten Daten

Download

datepickerenableddates.zip

Dokumentation

bootstrap-datepicker

Beschreibung

Dieses Widget bietet Parameter für ein Datumsauswahl-Steuerelement, 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, welchen Monat er öffnen 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.

Dial

Download

dial.zip

Beschreibung

Erstellen Sie ein anpassbares UI-Dial-Steuerelement 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 Themen), wählen Sie "Site-Ebene" 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 Daten enthält, die Sie mit dem Dial anzeigen möchten. Gehen Sie dann zu der Seite, auf der Sie das Dial für ein Steuerelement anzeigen möchten. Geben Sie im Steuerelement-Designer im Abschnitt Widget-Informationen den Namen des Widgets an (z. B. Dial), setzen Sie die Parameterinformationen, um eine Zuordnung zwischen DialValue und dem Steuerelementnamen, den Sie auf dem Dial anzeigen möchten, bereitzustellen. Setzen Sie auch den Widget-Schnittstellenmodus (z. B. Immer) und den aktiven Widget-Modus (z. B. Anzeigen und Bearbeiten).

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, wo die 0% beginnt und dann herumgeht. 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. Wenn das Widget verwendet wird, um Prozentsätze darzustellen, und der Wert über 100% gehen kann, ist es am besten, das Max 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 das Dial dargestellt wird. Beispiel: 98.1
• DialValueSuffix: Maßeinheit, die durch das Dial dargestellt wird, Standard ist Prozent. Beispiel: %
• DialWidth: Breite des Dials. Beispiel: 65%
• DialValuePrefix: Maßeinheit, die durch das Dial dargestellt wird, positioniert nach/vor dem Wert. Beispiel: $

Beispiele

Dynamische Zeilenfarbe

Download

dynamic_row_color.zip

Beschreibung

Das Widget für die dynamische Zeilenfarbe ermöglicht es Ihnen, 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 setzen Sie den Wert für Unterstützte Modi auf Ansicht und Bearbeitung
• Die Zeilenfarbe wird basierend auf der Steuerung bestimmt, die dem Widget zugeordnet ist. Diese Steuerung muss einer Spalte zugeordnet sein, die die Farbe 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 Texttyp-Steuerung 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 Sie nicht das gewünschte Ergebnis sehen, überprüfen Sie die Panel-Themen, um zu sehen, ob die aktive Zeile einen definierten Farbwert hat (einschließlich Weiß). Möglicherweise müssen Sie die Hintergrundfarbe der aktiven Zeile auf transparent ändern.

Beispiel

Favicon-Loader

Download

faviconwidget.zip

Beschreibung

Verwenden Sie es, 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 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 Parameter FaviconUrl 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

From Now Date Formatter

Download

from-now-date-formatter.zip

Parameter

Beispiel

Geolokalisierung

Herunterladen

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 Steuerungen mit den Namen "Breitengrad" und "Längengrad" verknüpft sind. Diese können ausgeblendet werden.

Parameter

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

Beispiel

Google Analytics

Herunterladen

google-analytics.zip

Beschreibung und Parameter

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

Beispiel

Iframe Resizer

Herunterladen

iframeresizercontent.zip

Beschreibung

Dieses Widget unterstützt die Anpassung der Größe eines Iframes an seinen jeweiligen Inhalt. Es verarbeitet das Ändern der Fenster- und Inhaltsgröße, Seitenlinks, Verschachtelungen 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 ausgeführt wird

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

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 auch für den Ansichtsmodus ausgelegt, sodass der Ansichtsmodus überhaupt nichts rendert.

Beispiel

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 das Gefühl 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 auf voll 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 Sichtbarkeitsspalte verwenden, um die Sichtbarkeit des Panels zu steuern

Markdown-Renderer

Beschreibung und Parameter

Rendert Markdown-formatierten Text aus einer gebundenen Spalte oder Steuerung als formatiertes HTML. Wird als Teil der App Builder-Sammlung ausgeliefert. Verfügbar in App Builder-Versionen 4.64 und höher.

Siehe Markdown Renderer-Widget für die vollständige Dokumentation.

Mehrfachdatei-Upload

Download-Links

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

• Mehrfachdatei-Upload - Version 3.4
• Mehrfachdatei-Upload - Version 3.3
• Mehrfachdatei-Upload - Version 3.0
• Mehrfachdatei-Upload - Version 2.0

Beschreibung und Parameter

Das Mehrfachdatei-Upload-Widget verwendet die FilePond-Bibliothek. Dieses Widget ermöglicht das gleichzeitige oder asynchrone Hochladen mehrerer Dateien, indem Dateien vorübergehend in einer einzelnen 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 256 KB 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 Standard.

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.

Organigramm

Herunterladen

org-chart-panel.zip

Beschreibung

Dieses Widget ermöglicht es Ihnen, 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 des Geschäftsobjekts. Zum Beispiel: employeeID
• property.items: Der Wert hierfür sollte 'items' sein.
• property.label: Dieser Wert sollte vom Geschäftsobjekt stammen und repräsentiert den Betreffwert, der im Organigramm erscheint. Zum Beispiel: FullName
• property.parent: Dieser Wert sollte vom Geschäftsobjekt stammen und repräsentiert, wem der Betreff unterstellt ist. Zum Beispiel: reportsTo
• property.subtitle: Dieser Wert sollte vom Geschäftsobjekt stammen und repräsentiert die Klassifizierung des Betreffs in der Hierarchie. Zum Beispiel: title
• support.linktopage: Dieser Wert sollte '1' sein.
• support.wrapping: Dieser Wert sollte '1' sein.

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 von Ihnen unterstützten Min-, Max- und Schrittwerte festlegen. Der Standardwert liegt zwischen 0 und 100, mit einem Schritt von 1.

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

Beispiel

Bewertungsbalken

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 Zeichenkette und ändert das Aussehen des Bewertungsbalkens.
• RatingValueOptions: Dieser Wert ist eine Zeichenkette und ändert die im Bewertungsbalken verfügbaren Werte.

Beispiel

Unterschrift

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 Unterschriftenfeldes.
• Height: Numerischer Wert für die Höhe des Unterschriftenfeldes.
• BackgroundColor: Hintergrundfarbe des Unterschriftenfeldes.
• Color
• ImageFieldName: Parameter, der aus der Textsteuerung übergeben wird. Ist der Steuerungsname des Bildes.
• LineWidth: Numerischer Wert für die Breite der Linie, auf der die Benutzer unterschreiben.

Beispiel

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

Telefonnummern-Formatter

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

Textformat

Download

text_mask.zip

Beschreibung

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

Parameter

• TextFormat: string
• TextPlaceholder: string

Textformat

Wie der Wert maskiert werden soll. 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]";

Zwei-Punkte-Schieberegler

Download

two-point-slider.zip

Dokumentation

http://refreshless.com/nouislider

Beschreibung und Parameter

Dieser Schieberegler ermöglicht es dem Benutzer, zwei numerische Felder mithilfe eines beweglichen Schiebereglers über eine Linie zu bearbeiten.

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

Das Widget setzt automatisch die "Pips", oder kleinen 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 Schiebereglerwerte binden möchten.

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 beim ersten Laden der Seite, 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 Fehlanpassung 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

Widget API Debugger

Download

widget-api-debugger.zip

Beschreibung und Parameter

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

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

Beispiel