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
Beschreibung
Erstellt basierend auf der Benutzereingabe eine Maske im Zieltextfeld und speichert dann die eingegebenen Daten.
Parameter
TextFormat
: ZeichenfolgeTextPlaceholder
: 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
Dokumentation
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 alsMM/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
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
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
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
Zeichenanzahl
Herunterladen
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
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
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
Automatischer Event-Runner
Herunterladen
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
Bereichsregler
Herunterladen
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
Zweipunktschieber
Herunterladen
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
Google Analytics
Herunterladen
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
Ab sofort Datumsformatierung
Herunterladen
Parameter
Parametername | Standard | Übersetzbar |
---|---|---|
FromDate | Nein | |
HideSuffix | {falsch} | Nein |
Beispiel
Bildrotator
Herunterladen
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
Widget-API Debugger
Herunterladen
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
Web-Font-Loader
Herunterladen
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
Telefonnummernformatierer
Herunterladen
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
Favicon-Lader
Herunterladen
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: SymbolFaviconSizes
: Wert nicht erforderlich, aber Parameter zur Konfiguration hinzufügen. Beispiel: 16x16FaviconType
: 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/...
)
- Vollständige URL (Beispiel:
Parametername | Standard | Übersetzbar |
---|---|---|
FaviconRel | Symbol | Nein |
FaviconSizes | 16x16 | Nein |
FaviconType | image/png | Nein |
FaviconUrl | Nein |
Beispiel
Zifferblatt
Herunterladen
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: 360DialAngleOffset
: Numerischer Wert von 0-360, für den Beginn der 0 % und den weiteren Verlauf. Beispiel: 270DialColor
: Wert nicht erforderlich, Farbe des Zifferblatts im Widget definierenDialDisplayInput
: Standard = true, wenn Sie die Eingabe verbergen möchten, setzen Sie es auf falseDialMax
: 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 = 0DialReadOnly
: Deaktiviert Eingaben und EreignisseDialStep
: Schrittweite, Standard = 1DialThickness
: MessdickeDialValue
: Numerischer Wert, der durch das Zifferblatt dargestellt werden soll. Beispiel: 98,1DialValueSuffix
: 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
In die Zwischenablage kopieren (mit Symbol)
Herunterladen
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
In die Zwischenablage kopieren (mit Schaltfläche)
Herunterladen
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
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
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
Signatur
Herunterladen
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 SignaturfeldsHeight
: Numerischer Wert für die Höhe des SignaturfeldsBackgroundColor
: Hintergrundfarbe des SignaturfeldsColor
-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
Währungsformat
Herunterladen
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
Bewertungsbalken
Herunterladen
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 BewertungsleisteRatingValueOptions
: Dieser Wert ist eine Zeichenfolge und ändert die in der Bewertungsleiste verfügbaren Werte
Parametername | Standard | Übersetzbar |
---|---|---|
RatingTheme | Nein | |
RatingValueOptions | Nein |
Beispiel
Organigramm
Herunterladen
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 wirdjsonUrl
: Dieser Wert stellt den vollqualifizierten URL Pfad für den Zugriff auf die JSON-Daten darproperty.id
: Der Schlüsselwert aus dem Geschäftsobjekt. Beispiel:employeeID
-property.items
: Der Wert hierfür sollte „Artikel“ seinproperty.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“ seinsupport.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
IFrame-Größenanpassung
Herunterladen
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
Parameter
Im Allgemeinen sind zwei Komponenten erforderlich, um das iframe Resizer-Widget für die Verwendung mit zu konfigurieren an App Builder App:
- Das externe Seitenhosting App Builder in einem Iframe
- 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
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 |