Zum Inhalt springen

Widget-Download-Bibliothek 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, sodass ein Designer die vollständige Kontrolle über die Darstellung des Felds hat. Widgets können verwendet werden, um das Benutzererlebnis für Benutzer zu verbessern. (Siehe auch Widgets und Widget-Fehlerbehebung.)

Textformat

Herunterladen

text_mask.zip

Beschreibung

Erstellt basierend auf der Benutzereingabe eine Maske im Zieltextfeld und speichert dann die eingegebenen Daten.

Parameter

  • TextFormat: Zeichenfolge
  • TextPlaceholder: Zeichenfolge

Textformat

Wie der Wert maskiert werden soll. Beispiel: "(999) 999-9999" oder "99/99/9999"

Hier sind die Maskendefinitionen:

  • „a“ steht für einen Buchstaben (A-Z, a-z)
  • „9“ steht für einen numerischen Buchstaben (0-9)
  • „*“ steht für einen alphanumerischen Buchstaben (A-Z, a-z, 0-9)

Wenn Sie eine andere Maskendefinition als die vordefinierten (z. B. Hex) benötigen, können Sie Ihre eigene Definition in die jQuery einfügen. Beispiel:

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

Datumsauswahl mit aktivierten Daten

Herunterladen

datepickerenableddates.zip

Dokumentation

Bootstrap-Datumsauswahl

Beschreibung

Dieses Widget stellt Parameter für ein Datumsauswahl-Steuerelement bereit, um bestimmte Daten im Kalender zu aktivieren, die vom Benutzer ausgewählt werden können. Alle anderen Daten werden von der Auswahl ausgeschlossen.

Parameter

  • DatesToEnable: Zeichenfolge mit durch Leerzeichen getrennten Daten, formatiert als MM/DD/YYYY. Zum Beispiel: 08/03/2022 08/12/2022 10/11/2022- MinAvailableDate: Zeichenfolge und ist das Datum, das der Datumswähler verwendet, um abzuleiten, für welchen Monat er geöffnet werden soll. Beispiel: 08/03/2022- SelectedDateString: String und ist der Wert der Tabellenspalte, in der Sie die Zeile speichern. Stellen Sie sicher, dass Sie die Datumsspalte im Geschäftsobjekt in einen String konvertieren, bevor Sie sie als Parameter übergeben. Beispiel: 08/12/2022

Hinweise zur Implementierung

Beim Hinzufügen und Definieren des Widgets innerhalb App Builder, setzen Sie den Wert „Unterstützte Modi“ auf Anzeigen und Bearbeiten.

Isdesktop

Herunterladen

isdesktop.zip

Beschreibung

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

Parameter

  • IsDesktop: Boolesch

Hinweise zur Implementierung

  • Fügen Sie einer Tabelle eine boolesche Spalte „IsDesktop“ hinzu. Beispiel: Sitzung
  • Um sie auf einem Panel zu implementieren, können Sie ein Kontrollkästchen-Steuerelement hinzufügen, das auf das neue Steuerelement „IsDesktop“ auf einem Panel abzielt, das auf vollständig transparent mit einer Höhe von 0 eingestellt ist. Dadurch wird sichergestellt, dass das Steuerelement keinen Platz auf der Seite einnimmt, aber geladen wird.
  • Nach der Konfiguration wie oben beschrieben können Sie nun die Sichtbarkeitsspalte verwenden, um die Sichtbarkeit des Panels zu steuern.

Top-Redakteur

Herunterladen

ace.zip

Beschreibung und Parameter

Das Ace Editor-Widget ist ein Open-Source-Programm zum Bearbeiten von Code, das in JavaScript geschrieben ist. App Builder verwendet diesen Editor innerhalb der IDE. Fügen Sie dieses Widget überall in Ihrem App Builder App, in die Sie ein Code-Editor-Dienstprogramm einbetten möchten.

Weitere Informationen und Dokumentation finden Sie unter: Ace Code Editor v1.4.6

Parametername Standard Übersetzbar
autoComplete.mvSqlQueryId Nein
autoComplete.tableId Nein
bottom Nein
fontSize Nein
height Nein
left Nein
mode Text Nein
position Nein
right Nein
singleLine 0 Nein
theme morgen_Nacht Nein
top Nein
width Nein

Hinweise zur Implementierung

  • Beim Hinzufügen und Definieren des Widgets innerhalb App Builder, setzen Sie den Wert Unterstützte Modi auf Anzeigen und Bearbeiten
  • Beim Hinzufügen von Widget-Parametern können Sie Statische Werte definieren, zum Beispiel:
    • Schriftgröße, Statischer Wert, 14
    • Höhe, Statischer Wert, 500
    • Modus, Statischer Wert, XML

Dynamische Zeilenfarbe

Herunterladen

dynamic_row_color.zip

Beschreibung

Mit dem Widget „Dynamische Zeilenfarbe“ können Sie die Hintergrundfarbe für Zeilen in einem mehrzeiligen Panel dynamisch festlegen. 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 zurück, die für MRP-Zeilen verwendet wird.

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

Parameter

N / A

Hinweise zur Implementierung

  • Beim Hinzufügen und Definieren des Widgets innerhalb App Builder, setzen Sie den Wert Unterstützte Modi auf Anzeigen und Bearbeiten
  • Die Zeilenfarbe wird basierend auf dem dem Widget zugeordneten Steuerelement bestimmt. Dieses Steuerelement muss einer Spalte zugeordnet sein, die die Farbe definiert
  • Fügen Sie der Geschäftsregel des MRP-Bereichs eine abgeleitete Spalte 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 Geschäftsregel als Texttyp-Steuerelement zum MRP hinzu und legen Sie den Widget-Wert fest, um dieses Widget zu verwenden

    • Setzen Sie die Priorität auf 1
    • Definieren Sie die Breite als 1
    • Setzen Sie die Sichtbarkeit der Beschriftung auf Ausgeblendet
  • Wenn Sie nicht das gewünschte Ergebnis sehen, überprüfen Sie alle Panel-Designs, 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

Bild

Zeichenanzahl

Herunterladen

character_counter_v2.zip

Beschreibung

Mit diesem SRP/Formularfeld-Widget können Sie einen Parameterwert für die obere Zeichengrenze Limit konfigurieren. Es erfordert einen Parameter, der sowohl für CharLimit (Zeichengrenze) als auch für TextFieldID (ID für das Feld, in dem das Widget platziert wird) definiert ist. Sobald das Widget in einem Textfeld aktiviert ist, zeigt das Widget im Bearbeitungsmodus sowohl die Feldzeichenwerte Limit als auch Remaining an.

Um die TextFieldID zu finden, navigieren Sie in der Benutzeroberflächenansicht der Anwendung zum Textfeld, öffnen Sie das Feld im Bearbeitungsmodus und verwenden Sie ein Entwickler für den Webbrowser, um das Feld zu überprüfen. Beispiel: Text-Area_0aae73c8-2002-42a2-99c4-242dac4f84db

Konfigurieren Sie optional einen Indexparameter mit dem Widget, wenn Sie das Widget mehr als einmal auf einem Panel konfigurieren möchten.

Parameter

Parametername Standard Übersetzbar
CharLimit 32 Jawohl
TextFieldID Jawohl
Index Jawohl

Hinweise zur Implementierung

  • Für dieses Widget müssen Sie eine leere Vorlage erstellen und diese leere Vorlage auf ein Vorlagensteuerelement auf der Seite anwenden. Fügen Sie der Vorlage einen Kommentar wie „Hallo Welt“ hinzu.

    Wenn Sie das Widget „Zeichenanzahl“ auf das Vorlagensteuerelement anwenden, geben Sie unbedingt TextFieldID im Widgetparameter an.

  • Wenn Sie die Informationen zur Zeichenanzahl außerhalb des Bearbeitungsmodus nicht klar sehen, deaktivieren Sie das Feld Zielcontainer in der Widgetdefinition.

Beispiel

Bild

Strichcode-/QR-Code-Lesegerät

Hinweis

Seit 4.0.35771 (11.34), ist das QR-Reader-Widget integriert in App Builder und wird ausgewählt, wenn ein Feld die Namen enthält QRCode oder Barcode.

Herunterladen

qr_scanner2.zip

Beschreibung

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

Hinweise zur Implementierung

  • Beim Hinzufügen und Definieren des Widgets innerhalb App Builder, setzen Sie den Wert Unterstützte Modi auf Nur anzeigen. Platzieren Sie das Widget nach dem Hinzufügen über dem Steuerelement, das mit dem gescannten Wert gefüllt werden soll. Dieses Steuerelement sollte einer String/NVarchar-Spalte in einer zugrunde liegenden Tabelle zugeordnet werden. Wenn der Name dieses Steuerelements den Text enthält qr, wird das QR-Code-Scanner-Widget automatisch oben platziert.

  • Bestätigen Sie, dass der Panel-Status, in dem das Widget angezeigt wird, auf Standard eingestellt ist. Aktivieren Sie Panel > Edge Case > Initial Panel State-Wert = Standard.

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

  • Wenn Sie eine NotReadableError, dies zeigt an, dass die Kamera, die das Widget zu verwenden versucht, bereits verwendet wird. Beispiel: Wenn Sie an einer Videokonferenz teilnehmen und Ihre Kamera für die Videoübertragung verwenden, müssen Sie die Videoübertragung möglicherweise stoppen, wenn Sie gleichzeitig eine App mit dem Strichcode-/QR-Code-Scanner-Widget vorführen möchten.

Link zur Github-Bibliothek zum Anzeigen unterstützter Widget-Konfigurationen: HTML5 QR Code

Beispiel

Bild

Automatischer Event-Runner

Herunterladen

AutoEventRunner.zip

Beschreibung und Parameter

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

Ein weiterer möglicher Anwendungsfall für dieses Widget ist beispielsweise das Schließen eines Panels nach 10 Sekunden. Fügen Sie Ihrer Seite eine Schaltfläche hinzu, die ein Ereignis ausführt. Stellen Sie das Ereignis optional so ein, dass Daten aktualisiert werden. Fügen Sie dieses Widget zur Schaltflächensteuerung hinzu.

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

Parametername Standard Übersetzbar
Interval 90000 Nein
ClassNames Nein
Text Daten geladen Nein
ShowTimestamp 1 Nein
Clickable 1 Nein

Beispiel

Bild

Bereichsregler

Herunterladen

Bereichsschieberegler.zip

Dokumentation

http://refreshless.com/nouislider

Beschreibung und Parameter

Mit diesem Schieberegler kann der Benutzer ein numerisches Feld bearbeiten, indem er einen Schieberegler über eine Linie bewegt.

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 den Maßstab der Linie anzuzeigen.

Parametername Standard Übersetzbar
Max 100 Nein
Min 0 Nein
Step 1 Nein

Beispiel

Bild

Zweipunktschieber

Herunterladen

Zweipunkt-Schieberegler.zip

Dokumentation

http://refreshless.com/nouislider

Beschreibung und Parameter

Mit diesem Schieberegler kann der Benutzer zwei numerische Felder bearbeiten, indem er einen Schieberegler über eine Linie bewegt.

Als Designer können Sie die 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 den Maßstab der Linie anzuzeigen.

Die Parameter LowColumn und HighColumn haben keine Standardwerte und müssen auf die Steuerelementnamen eingestellt werden, an die Sie die Schiebereglerwerte binden möchten.

Parametername Standard Übersetzbar
Min 0 Nein
Max 100 Nein
Step 1 Nein
LowColumn Nein
HighColumn Nein

Beispiel

Bild

Google Analytics

Herunterladen

google-analytics.zip

Beschreibung und Parameter

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

Parametername Standard Übersetzbar
Debug 0 Nein
GA4Tag Nein
ObsoleteOptimizeCode Nein
ObsoleteTrackingCode Nein

Beispiel

Bild

Ab sofort Datumsformatierung

Herunterladen

from-now-date-formatter.zip

Parameter

Parametername Standard Übersetzbar
FromDate Nein
HideSuffix {falsch} Nein

Beispiel

Bild

Bildrotator

Herunterladen

image-rotater.zip

Beschreibung

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

Funktioniert nur im Bearbeitungsmodus, ist aber so konzipiert, dass es auch im Ansichtszustand ausgeführt werden kann, sodass der Ansichtszustand überhaupt nichts rendert.

Beispiel

Bild

Widget-API Debugger

Herunterladen

widget-api-debugger.zip

Beschreibung und Parameter

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

  • Gebietsschema (CultureId)
  • Sprache (UiCultureId)
  • Alle Parameter
Parametername Standard Übersetzbar
TestBindingControlName Jawohl
TestBindingEmpty Jawohl
TestBindingStringBrace Jawohl
TestBindingStringQuoted Jawohl
TestDefault Mein Standardwert Ja
TestDefaultEmpty Jawohl

Beispiel

Bild

Web-Font-Loader

Herunterladen

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 beim ersten Laden der Site, sodass der Benutzer keinen Inhalt sehen sollte, der nicht die richtige Schriftart hat.

  • WebFontHostName: Hostname zum Abrufen der Schriftarten. Sie können Google oder einen anderen Schriftartenanbieter verwenden. Verwenden Sie // statt http oder https, um eine Nichtübereinstimmung mit dem aktuellen sicheren Status 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. (Wählen Sie nur einen Text über text=Hello aus oder wählen Sie Fettschrift oder normale Schriftstärke.)
  • LinkMediaString: Ein Wert, der die Bedingungen für die Anwendung der Schriftart angibt. Zu den Werten gehört eine Mindestbreite, um mobile Geräte auszuschließen, screen and (min-width:500px)oder beim Drucken ausschließen, not print
Parametername Standard Übersetzbar
LinkMediaString alle Nein
WebFontHostName //fonts.googleapis.com/css?family= Nein
WebFontName Lato Nein

Beispiel

Bild

Telefonnummernformatierer

Herunterladen

Telefonnummernformatter.zip

Beschreibung

Formatiert Telefonnummern und ermöglicht die Bearbeitung.

Bibliotheksdefinition

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

Parameter

  • AllowDropdown: bool
    Symbol im Bearbeitungsmodus anzeigen

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

  • OnlyCountries: string
    Begrenzen Sie Ihre Länderauswahlliste. Im Format „us,gb,cz,mx“ ohne Leerzeichen

  • PreferredCountries: Zeichenfolge
    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

Parametername Standard Übersetzbar
AllowDropdown Wahr Nein
InitialCountry uns Nein
OnlyCountries Nein
PreferredCountries us,gb Nein
UseNationalMode wahr Nein

Beispiel

Bild

Favicon-Lader

Herunterladen

faviconwidget.zip

Beschreibung

Verwenden Sie diese Option, um ein benutzerdefiniertes Favicon-Symbol für das App Builder Instanz, die in der Adressleiste der Browser-Tab angezeigt werden. Das Symbol wird auch auf dem Startbildschirm eines Mobilgeräts (iOS und Android) angezeigt, wenn die Site zum Startbildschirm des Mobilgeräts hinzugefügt wird.

Wenn Sie den Favicon Loader installieren, laden Sie zunächst die Zip-Datei in den Widgets-Bereich der von der App verwendeten Sammlung (in Designs) hoch, wählen Sie „Site-Ebene“ für Unterstützte Modi und fügen Sie die 4 unten aufgeführten Parameterwerte hinzu. Gehen Sie dann zu App Builder IDE > Konfiguration > Site-Widgets, fügen Sie das Widget „Favicon Loader“ hinzu und fügen Sie den Parameter „FaviconUrl“ mit einem der 3 Typen akzeptierter URL Formate (siehe unten) zusammen mit Einträgen 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, Parameter zusammen mit Wert zur Konfiguration hinzufügen. Beispiel: Symbol
  • 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 der Konfiguration den Parameter zusammen 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/...)
Parametername Standard Übersetzbar
FaviconRel Symbol Nein
FaviconSizes 16x16 Nein
FaviconType image/png Nein
FaviconUrl Nein

Beispiel

Bild

Zifferblatt

Herunterladen

dial.zip

Beschreibung

Erstellen Sie ein anpassbares UI-Wählrad-Steuerelement für die Anzeige in App Builder.

Wenn Sie das Dial-Widget installieren, laden Sie zuerst die Zip-Datei in den Widget-Bereich der von der App verwendeten Sammlung hoch (in Designs), wählen Sie „Site-Ebene“ für Unterstützte Modi und fügen Sie die benötigten Parametereinträ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 als Nächstes zu der Seite, auf der Sie das Dial für ein Steuerelement anzeigen möchten. Geben Sie im Abschnitt „Widget-Informationen“ des Control Designers den Namen des Widgets an (z. B. Dial) und legen Sie die Parameterinformationen fest, um eine Zuordnung zwischen DialValue und dem Steuerelementnamen bereitzustellen, den Sie auf dem Dial anzeigen möchten. Legen Sie auch den Widget-Schnittstellenmodus (z. B. Immer) und den aktiven Widgetmodus (z. B. Anzeigen und Bearbeiten) fest.

Ursprüngliche Quellbibliotheksdefinition

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

Parameter

  • DialAngleArc: Numerischer Wert von 0-360, 360 ist ein voller Kreis, alles darunter macht es eher zu einem Maß. Beispiel: 360
  • DialAngleOffset: Numerischer Wert von 0-360, für den Beginn der 0 % und den weiteren Verlauf. Beispiel: 270
  • DialColor: Wert nicht erforderlich, Farbe des Zifferblatts im Widget definieren
  • DialDisplayInput: Standard = true, wenn Sie die Eingabe verbergen möchten, setzen Sie es auf false
  • DialMax: Maximalwert, Standard = 100. Wenn Sie das Widget zur Darstellung von Prozentwerten verwenden und der Wert über 100 % liegen kann, ist es am besten, das Maximum in einem anderen Feld als 100 zu berechnen. Der von Ihnen eingegebene Wert muss mit 100 multipliziert werden. Beispiel: IIF(Value>100, 100, Value) AS Max.
  • DialMin: Mindestwert, Standard = 0
  • DialReadOnly: Deaktiviert Eingaben und Ereignisse
  • DialStep: Schrittweite, Standard = 1
  • DialThickness: Messdicke
  • DialValue: Numerischer Wert, der durch das Zifferblatt dargestellt werden soll. Beispiel: 98,1
  • DialValueSuffix: Maßeinheit, die durch das Zifferblatt dargestellt wird, Standard ist Prozent. Beispiel: %
  • DialWidth: Zifferblattbreite. Beispiel: 65 %
  • DialValuePrefix: Maßeinheit, die durch das Zifferblatt dargestellt wird und nach/vor dem Wert steht. Beispiel: $
Parametername Standard Übersetzbar
DialAngleArc 360 Nein
DialAngleOffset 270 Nein
DialColor Nein
DialDisplayInput wahr Nein
DialMax 100 Nein
DialMin 0 Nein
DialReadOnly wahr Nein
DialStep 1 Nein
DialThickness .05 Nein
DialValue Nein
DialValueSuffix % Nein
DialWidth 65 % Nein
DialValuePrefix $ Nein

Beispiele

Bild

Bild

In die Zwischenablage kopieren (mit Symbol)

Herunterladen

clipboardwidget.zip

Beschreibung

Verwenden Sie diese Option, um ein UI-Zwischenablage-Schaltflächensteuerelement zu erstellen in App Builder Damit kann ein Benutzer die konfigurierten Informationen/Daten in die Zwischenablage seines Computers kopieren (um sie dort einzufügen und woanders zu verwenden). Es müssen keine Parameter konfiguriert werden, um dieses Widget zu verwenden. Sie geben den Wert, den Sie kopieren möchten, als Kontrollfeld an.

  • Wenn Sie das Erscheinungsbild des Widgets von der Zwischenablageschaltflä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 ebenfalls angepasst werden, indem Sie den Wert title in der Datei view.html bearbeiten. Dieser Wert lautet standardmäßig „Kopiert!“.

Beispiel

Bild

In die Zwischenablage kopieren (mit Schaltfläche)

Herunterladen

copytoclipboardbutton.zip

Beschreibung

Verwenden Sie diese Option, um ein UI-Zwischenablage-Schaltflächensteuerelement zu erstellen in App Builder Damit kann ein Benutzer die konfigurierten Informationen/Daten in die Zwischenablage seines Computers kopieren (um sie dort einzufügen und woanders zu verwenden). Mit diesem Widget können Sie eine Schaltfläche statt eines Symbols verwenden. Es müssen keine Parameter konfiguriert werden, um dieses Widget zu verwenden. Sie geben den Wert, den Sie kopieren möchten, als Kontrollfeld an.

  • Wenn Sie das Erscheinungsbild des Widgets von der Zwischenablageschaltflä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 ebenfalls angepasst werden, indem Sie den Wert title in der Datei view.html bearbeiten. Dieser Wert lautet standardmäßig „Kopiert!“.

Beispiel

Bild

Drop-Upload mehrerer Dateien

Herunterladen

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 synchrone oder asynchrone Hochladen mehrerer Dateien, indem es Dateien vorübergehend in einer einzelnen Spalte speichert und das Speicherereignis nutzt, um die Binärdatei abzurufen und in eine separate Tabelle zu verschieben, wo sie weiter verarbeitet oder in ein lokales oder Netzwerkdateisystem verschoben werden kann.

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 „256 KB“ eingestellt und dieser Wert kann in der Filepond-Dokumentation in jede beliebige MB- oder KB-Datei geändert werden, indem die Datei binder.js bearbeitet wird. Weitere Informationen finden Sie unter Filepond-Dateigrößenvalidierung.

Notiz

Wenn Sie Dateien in einen Amazon S3 Bucket hochladen und eine mehrstufige Verzeichnisstruktur für die Dateien erstellen möchten, lesen Sie bitte das Amazon S3 Dateisystem Artikel.

Parametername Standard Übersetzbar Beschreibung
allowImagePreview 1 Nein Vorschau für Bilddateitypen aktivieren (1) oder deaktivieren (0).
allowMultiple 1 Nein Aktivieren (1) oder deaktivieren (0) Sie das Hinzufügen mehrerer Dateien.
forceReload 1 Nein Aktivieren (1) oder deaktivieren (0) Sie die Ausführung einer globalen Aktualisierung, nachdem ein Charge von Dateien hochgeladen wurde.
runSave 1 Nein Aktivieren (1) oder deaktivieren (0) Sie die Ausführung des Speicherereignisses für jede Datei, die in die Dateispalte des Business Objekts hochgeladen wird.
allowFileSizeValidation 1 Nein Aktivieren (1) oder deaktivieren (0), um die Verwendung der Parametereinstellung maxFileSize zuzulassen.
maxFileSize 5000 KB Nein Wert für die größte Dateigröße, die das Widget zulässt. Muss in Kilobyte angegeben werden und ist ein Zeichenfolgenwert.

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

  • allowFileSizeValidation: Standardwert ist „1“
  • maxFileSize: kein Standard

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

Geolokalisierung

Herunterladen

geolocation.zip

Beschreibung

Dieses Widget entnimmt den aktuellen Standort Ihres Geräts aus HTML5 Geolocation. Es speichert die Koordinaten in den Spalten, die mit den Steuerelementen „Breitengrad“ und „Längengrad“ von nsmes verknüpft sind. Diese können ausgeblendet werden.

Parameter

  • RefreshRate (in Millisekunden)

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

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

Parametername Standard Übersetzbar
RefreshRate -1 Nein

Beispiel

Bild

Signatur

Herunterladen

signature.zip

Dokumentation

https://willowsystems.github.io/jSignature

Beschreibung

Mit diesem Widget können Sie eine gezeichnete Unterschrift direkt im Browser anzeigen oder 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: Vom Textsteuerelement übergebener Parameter. Ist der Steuerelementname des Bildes.
  • LineWidth: Numerischer Wert der Breite der Zeile, über der der Benutzer unterschreibt
Parametername Standard Übersetzbar
Width Keine Nein
Height Keine Nein
BackgroundColor #FFFFFF Nein
Color #000000 Nein
LineWidth 1 Nein
ImageFieldName Leer (durch gleichnamiges Datenfeld festgelegt) Nein

Beispiel

Bild

Währungsformat

Herunterladen

Währungsformatwidget.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

N / A

Beispiel

Bild

Bewertungsbalken

Herunterladen

rating-bars.zip

Beschreibung

Mit diesem Widget kann der Benutzer einen Wert eingeben/ändern, indem er ihn 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
Parametername Standard Übersetzbar
RatingTheme Nein
RatingValueOptions Nein

Beispiel

Bild

Organigramm

Herunterladen

org-chart-panel.zip

Beschreibung

Mit diesem Widget können Sie auf Grundlage der zugrunde liegenden Daten ein Organigramm auf einem Panel erstellen.

Parameter

  • ApiKey: Dieser Wert stellt den API -Schlüssel dar App Builder gibt die konfigurierte REST- API Ressource aus, die das Widget nutzen wird
  • jsonUrl: Dieser Wert stellt den vollqualifizierten URL Pfad für den Zugriff auf die JSON-Daten dar
  • property.id: Der Schlüsselwert aus dem Geschäftsobjekt. Beispiel: employeeID- property.items: Der Wert hierfür sollte „Artikel“ sein
  • property.label: Dieser Wert sollte aus dem Geschäftsobjekt stammen und stellt den Subjektwert dar, der im Organigramm angezeigt wird. Beispiel: FullName- property.parent: Dieser Wert sollte aus dem Geschäftsobjekt stammen und stellt dar, wem das Subjekt unterstellt ist. Beispiel: reportsTo- property.subtitle: Dieser Wert sollte aus dem Geschäftsobjekt stammen und stellt die Klassifizierung des Subjekts in der Hierarchie dar. Beispiel: title- support.linktopage: Dieser Wert sollte „1“ sein
  • support.wrapping: Dieser Wert sollte „1“ sein
Parametername Standard Übersetzbar
ApiKey Keine Nein
jsonUrl Keine Nein
property.id Keine Nein
property.items Keine Nein
property.label Keine Nein
property.parent Keine Nein
property.subtitle Keine Nein
support.linktopage 1 Nein
support.wrapping 1 Nein

Beispiel

Bild

IFrame-Größenanpassung

Herunterladen

iframeresizercontent.zip

Beschreibung

Dieses Widget unterstützt die Beibehaltung der Größe eines Iframes entsprechend seinem jeweiligen Inhalt. Verwaltet die Größenanpassung von Fenstern und Inhalten, 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 zu konfigurieren an App Builder App:

  1. Das externe Seitenhosting App Builder in einem Iframe
  2. Innerhalb des Iframes, wo App Builder läuft

Weitere Informationen zur Konfiguration finden Sie unter Anzeige an App Builder Seite auf einer Website mit Iframe

Site-Banner

Herunterladen

site_banner.zip

Beschreibung und Parameter

Site Banner ist ein Site-weites Widget, das oben auf allen App-Seiten ein Banner bereitstellt. Das Banner ist anpassbar und kann einfach 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. Beispiel: „Dies ist die Sandbox Umfeld“
  • BannerStyle: BannerStyles enthalten das Inline-CSS, das das Banner stilisiert. Beispiel: text-align:center;background-color:yellow
Parametername Standard Übersetzbar
BannerText Ich bin ein Site-Banner! Nein
BannerStyle Textausrichtung: zentriert; Hintergrundfarbe: gelb Nein

Beispiel

Bild