Zum Inhalt springen

Widget-Download-Bibliothek im Jitterbit App Builder

Übersicht

Diese Seite enthält eine Bibliothek mit Widget-Downloads für den App Builder. Widgets ermöglichen einen Code-Hook in den App Builder und ermöglichen dem Designer die vollständige Kontrolle über die Darstellung des Felds. Widgets können die Benutzeroberfläche verbessern. (Siehe auch Widgets und Widget-Fehlerbehebung.)

Textformat

Herunterladen

text_mask.zip

Beschreibung

Erstellt basierend auf der Benutzereingabe eine Maske im Zieltextfeld und speichert 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. Hexadezimal) benötigen, können Sie in der JQuery-Abfrage eine eigene Definition hinzufü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 eine Datumsauswahl bereit, mit denen der Benutzer bestimmte Daten im Kalender auswählen kann. Alle anderen Daten sind nicht auswählbar.

Parameter

  • DatesToEnable: Zeichenfolge mit Datumsangaben, getrennt durch Leerzeichen und formatiert als MM/DD/YYYY. Zum Beispiel: 08/03/2022 08/12/2022 10/11/2022- MinAvailableDate: Zeichenfolge. Dies ist das Datum, anhand dessen die Datumsauswahl den Monat ermittelt, in dem sie geöffnet werden soll. Beispiel: 08/03/2022- SelectedDateString: Zeichenfolge und ist der Wert der Tabellenspalte, in der Sie die Zeile speichern. Stellen Sie sicher, dass Sie die Datumsspalte im Geschäftsobjekt in eine Zeichenfolge konvertieren, bevor Sie sie als Parameter übergeben. Beispiel: 08/12/2022

Hinweise zur Implementierung

Wenn Sie das Widget im App Builder hinzufügen und definieren, legen Sie den Wert „Unterstützte Modi“ auf Anzeigen und Bearbeiten fest.

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 gilt. Wenn das Widget erkennt, dass es sich um einen Desktop-Browser handelt, setzt es das Boolesche Feld (IsDesktop) auf 1. Das Widget umschließt die Ausgabe mit einem .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 benötigt wird.

Parameter

  • IsDesktop: Boolesch

Hinweise zur Implementierung

  • Fügen Sie einer Tabelle eine boolesche Spalte „IsDesktop“ hinzu. Beispiel: Sitzung.
  • Zur Implementierung auf einem Panel können Sie ein Kontrollkästchen-Steuerelement hinzufügen, das das neue „IsDesktop“-Steuerelement auf einem Panel anspricht, das vollständig transparent ist und eine Höhe von 0 hat. Dadurch wird sichergestellt, dass das Steuerelement keinen Platz auf der Seite einnimmt, aber geladen wird.
  • Nach der oben beschriebenen Konfiguration können Sie die Sichtbarkeit des Panels über die Spalte „Sichtbarkeit“ steuern.

Ass-Redakteur

Herunterladen

ace.zip

Beschreibung und Parameter

Das Ace Editor-Widget ist ein Open-Source-Programm zur Codebearbeitung in JavaScript. App Builder verwendet diesen Editor innerhalb der IDE. Fügen Sie dieses Widget überall in Ihrer App Builder App ein, wo Sie ein Programm zur Codebearbeitung 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

  • Wenn Sie das Widget im App Builder hinzufügen und definieren, 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 der jeweiligen 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. Beispiel: red, #f00, oder #ff0000.

Parameter

N / A

Hinweise zur Implementierung

  • Wenn Sie das Widget im App Builder hinzufügen und definieren, setzen Sie den Wert Unterstützte Modi auf Anzeigen und Bearbeiten
  • Die Zeilenfarbe wird anhand des dem Widget zugeordneten Steuerelements 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, wie z. B. eine IIF-Anweisung, enthalten, 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 Textsteuerelement zum MRP hinzu und legen Sie den Widget-Wert für die Verwendung dieses Widgets fest.

    • Setzen Sie die Priorität auf 1.
    • Definieren Sie die Breite auf 1.
    • Setzen Sie die Sichtbarkeit der Beschriftung auf Ausgeblendet.
  • Wenn Sie nicht das gewünschte Ergebnis sehen, überprüfen Sie die Panel-Designs, um zu sehen, ob für die aktive Zeile ein Farbwert (einschließlich Weiß) definiert ist. 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/Formular-Panel-Widget können Sie einen Parameterwert für die Zeichenbegrenzung konfigurieren. Dazu müssen sowohl die Parameter CharLimit (Zeichenbegrenzung) als auch TextFieldID (ID des Felds, in dem das Widget platziert wird) definiert sein. Sobald das Widget in einem Textfeld aktiviert ist, zeigt es im Bearbeitungsmodus sowohl die Werte für die Zeichenbegrenzung als auch für die verbleibenden Werte an.

Um die TextFieldID zu finden, navigieren Sie in der Anwendungs-UI-Ansicht zum Textfeld, öffnen Sie es im Bearbeitungsmodus und verwenden Sie ein Entwickler im 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 in einem Panel konfigurieren möchten.

Parameter

Parametername Standard Übersetzbar
CharLimit 32 Ja
TextFieldID Ja
Index Ja

Hinweise zur Implementierung

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

Wenn Sie das Widget „Zeichenanzahl“ auf das Vorlagen-Steuerelement anwenden, geben Sie im Widget-Parameter unbedingt die TextFieldID an.

Sollten Sie die Informationen zur Zeichenanzahl außerhalb des Bearbeitungsmodus nicht sehen, deaktivieren Sie das Feld „Zielcontainer“ in der Widget-Definition.

Beispiel

Bild

Barcode-/QR-Code-Scanner

Hinweis

Seit 4.0.35771 (11.34), ist das QR-Reader-Widget in App Builder integriert 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 im App Builder setzen Sie den Wert Unterstützte Modi auf Nur anzeigen. Platzieren Sie das Widget anschließend ü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 sein. Enthält der Name dieses Steuerelements den Text qr Das QR-Code-Scanner-Widget wird automatisch im Vordergrund angezeigt.

  • Stellen Sie sicher, dass der Panel-Status des Widgets auf Standard eingestellt ist. Aktivieren Sie Panel > Edge Case > Initial Panel State, um den Wert Standard festzulegen.

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

  • Wenn Sie eine NotReadableError Dies zeigt an, dass die vom Widget verwendete Kamera bereits verwendet wird. Beispiel: Wenn Sie während einer Videokonferenz Ihre Kamera für die Videoübertragung verwenden, müssen Sie die Videoübertragung möglicherweise stoppen, wenn Sie gleichzeitig eine App mit dem Barcode-/QR-Code-Scanner-Widget testen möchten.

Link zur GitHub-Bibliothek mit unterstützten Widget-Konfigurationen: HTML5 QR Code

Beispiel

Bild

Automatischer Event-Runner

Herunterladen

AutoEventRunner.zip

Beschreibung und Parameter

Dieses Widget aktualisiert die App Builder Seite automatisch 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. Optional können Sie das Ereignis so einstellen, dass Daten aktualisiert werden. Fügen Sie dieses Widget zum Schaltflächen-Steuerelement hinzu.

Wenn Sie Text auf leer und ShowTimestamp auf 0 setzen, wird es ausgeblendet ausgeführt. 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

range-slider.zip

Dokumentation

http://refreshless.com/nouislider

Beschreibung und Parameter

Mit diesem Schieberegler können Sie ein numerisches Feld bearbeiten, indem Sie den Schieberegler über eine Linie bewegen.

Sie können als Designer die gewünschten Min-, Max- und Schrittweitenwerte festlegen. Der Standardwert liegt zwischen 0 und 100, die Schrittweite beträgt 1.

Das Widget setzt automatisch die kleinen Punkte unter der Linie, um die Skalierung anzuzeigen.

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

Beispiel

Bild

Zweipunkt-Schieberegler

Herunterladen

Zwei-Punkt-Schieberegler.zip

Dokumentation

http://refreshless.com/nouislider

Beschreibung und Parameter

Mit diesem Schieberegler können zwei numerische Felder über eine Linie bearbeitet werden.

Sie können als Designer die unterstützten Min-, Max- und Schrittweitenwerte festlegen. Der Standardwert liegt zwischen 0 und 100, die Schrittweite beträgt 1.

Das Widget setzt automatisch die kleinen Punkte unter der Linie, um die Skalierung der Linie anzuzeigen.

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

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

Erfasst Seitenänderungen und Authentifizierung. Sendet Daten an Google Analytics.

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

Beispiel

Bild

Ab sofort Datumsformatierer

Herunterladen

ab-jetzt-Datumsformatierer.zip

Parameter

Parametername Standard Übersetzbar
FromDate Nein
HideSuffix {falsch} Nein

Beispiel

Bild

Bildrotator

Herunterladen

image-rotater.zip

Beschreibung

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

Funktioniert nur im Bearbeitungsmodus, ist aber auch für die Ausführung im Ansichtsmodus konzipiert, sodass dieser ü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 Ja
TestBindingEmpty Ja
TestBindingStringBrace Ja
TestBindingStringQuoted Ja
TestDefault Mein Standardwert Ja
TestDefaultEmpty Ja

Beispiel

Bild

Web-Font-Loader

Herunterladen

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 Website, sodass dem Nutzer keine Inhalte mit falscher Schriftart angezeigt werden.

  • WebFontHostName: Hostname zum Abrufen der Schriftarten. Sie können Google oder einen anderen Schriftartenanbieter verwenden. Verwenden Sie // anstelle von http oder https, um eine Nichtübereinstimmung mit dem aktuellen Sicherheitsstatus zu vermeiden.
  • WebFontName: Der Name der zu ladenden Schriftart. Dieser wird an die URL angehängt, sodass Sie diesen Parameter auch zum Laden anderer URL-Parameter verwenden können, die dieser Host benötigt. (Auswahl nur eines Texts über „text=Hello“ oder Auswahl von „fett“ statt „normal“)
  • 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

Telefonnummernformatierer.zip

Beschreibung

Formatiert Telefonnummern und ermöglicht deren 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änderauswahl. 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

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

Beispiel

Bild

Favicon-Lader

Herunterladen

faviconwidget.zip

Beschreibung

Hiermit wird ein benutzerdefiniertes Favicon-Symbol für die App Builder Instanz angezeigt, das in der Adressleiste des Browser-Tab angezeigt wird. 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.

Laden Sie bei der Installation des Favicon Loaders zunächst die Zip-Datei in den Widgets-Bereich der von der App verwendeten Sammlung (in den Themes) hoch, wählen Sie „Site-Ebene“ unter „Unterstützte Modi“ und fügen Sie die vier unten aufgeführten Parameterwerte hinzu. Wechseln Sie anschließend 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 drei akzeptierten URL Formate (siehe unten) sowie die Einträge für die anderen Parameter hinzu. Wenn Sie mehrere Favicon-Symbole angeben, müssen Sie mehrere Instanzen des Favicon-Widgets hinzufügen (eine pro angegebenem Symbol).

Parameter

  • FaviconRel: Erforderlicher Wert. Fügen Sie den Parameter zusammen mit dem Wert zur Konfiguration hinzu. 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 -codierte 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 eine anpassbare UI-Wählsteuerung zur Anzeige im App Builder.

Laden Sie bei der Installation des Dial-Widgets zunächst die Zip-Datei in den Widget-Bereich der von der App verwendeten Sammlung (in den Designs) hoch, wählen Sie „Site-Ebene“ für die unterstützten 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. Wechseln Sie anschließend zu der Seite, auf der Sie den Dial für ein Steuerelement anzeigen möchten. Geben Sie im Control Designer im Abschnitt „Widget-Informationen“ den Namen des Widgets an (z. B. Dial) und legen Sie die Parameterinformationen fest, um eine Zuordnung zwischen DialValue und dem Steuerelementnamen herzustellen, der auf dem Dial angezeigt werden soll. Legen Sie außerdem den Widget-Schnittstellenmodus (z. B. Immer) und den Widget-Aktivmodus (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 Vollkreis, alles darunter macht es eher zu einem Maß. Beispiel: 360
  • DialAngleOffset: Numerischer Wert zwischen 0 und 360, der angibt, wo die 0 % beginnen und weiterlaufen. Beispiel: 270
  • DialColor: Wert nicht erforderlich. Definieren Sie die Farbe des Zifferblatts im Widget.
  • DialDisplayInput: Standardwert = „true“. Wenn Sie die Eingabe verbergen möchten, setzen Sie sie auf „false“.
  • DialMax: Maximalwert, Standard = 100. Wenn Sie das Widget zur Darstellung von Prozentsätzen verwenden und der Wert 100 % überschreiten kann, empfiehlt es sich, 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 des Zifferblatts, Standard ist Prozent. Beispiel: %
  • DialWidth: Zifferblattbreite. Beispiel: 65 %
  • DialValuePrefix: Maßeinheit des Drehreglers, nach/vor dem Wert positioniert. 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

Erstellen Sie im App Builder eine UI-Zwischenablage-Schaltfläche, mit der Benutzer die konfigurierten Informationen/Daten in die Zwischenablage ihres Computers kopieren (zum Einfügen und Weiterverwenden). Für die Verwendung dieses Widgets sind keine Parameter erforderlich. Geben Sie den zu kopierenden Wert als Steuerelement an.

  • Wenn Sie das Erscheinungsbild des Widgets 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 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

Erstellen Sie im App Builder eine UI-Zwischenablage-Schaltflächensteuerung, mit der Benutzer die konfigurierten Informationen/Daten in die Zwischenablage ihres Computers kopieren (zum Einfügen und Weiterverwenden). Mit diesem Widget können Sie eine Schaltfläche anstelle eines Symbols verwenden. Für die Verwendung dieses Widgets sind keine Parameter erforderlich. Geben Sie den zu kopierenden Wert als Steuerelement an.

  • Wenn Sie das Erscheinungsbild des Widgets 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 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 Widget für den Multi-File-Upload 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. Dateien werden temporär in einer einzigen Spalte gespeichert. Das Speichern-Ereignis nutzt die Binärdatei, um sie in eine separate Tabelle zu ziehen und dort weiterzuverarbeiten oder in ein lokales oder Netzwerkdateisystem zu verschieben.

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 über eine bestimmte Größe hinaus eingeschränkt werden. Standardmäßig ist das Widget auf „256 KB“ eingestellt. Dieser Wert kann in der Filepond-Dokumentation in der Datei binder.js auf eine beliebige MB- oder KB-Dateigröße geändert werden. Weitere Informationen finden Sie unter Filepond-Dateigrößenvalidierung.

Notiz

Wenn Sie Dateien in den 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 Hinzufügen mehrerer Dateien aktivieren (1) oder deaktivieren (0).
forceReload 1 Nein Aktivieren (1) oder deaktivieren (0) Sie die Ausführung einer globalen Aktualisierung, nachdem ein Batch 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 zu nutzen:

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

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

Geolokalisierung

Herunterladen

geolocation.zip

Beschreibung

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

Parameter

  • RefreshRate(in Millisekunden)

Der Widget-Standardwert ist -1 (Deaktiviert). Der Datensatz wird erst geändert/gespeichert, wenn das System eine Standortänderung durch Vergleich des Tabellendatensatzes mit Ihrem aktuellen Standort erkennt.

Beispiel: RefreshRate=5000 Überprüft Ihren Standort alle 5 Sekunden. Bei einer Änderung wird der Datensatz geändert.

Parametername Standard Übersetzbar
RefreshRate -1 Nein

Beispiel

Bild

Unterschrift

Herunterladen

signature.zip

Dokumentation

https://willowsystems.github.io/jSignature

Beschreibung

Mit diesem Widget können Sie Ihre 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 für die 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

currencyformatwidget.zip

Beschreibung

Dieses Widget ist für Steuerelemente verfügbar und konvertiert Eingaben in das USD-Format, wobei die Cent-Angaben optional sind.

Parameter

N / A

Beispiel

Bild

Bewertungsbalken

Herunterladen

Bewertungsbalken.zip

Beschreibung

Mit diesem Widget können Nutzer Werte über eine grafische Bewertungsoberfläche eingeben oder ändern.

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 Basis der zugrunde liegenden Daten ein Organigramm in einem Panel erstellen.

Parameter

  • ApiKey: Dieser Wert stellt den API Schlüssel dar, den App Builder ausgibt, die konfigurierte REST API -Ressource, die das Widget verwenden 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ößenänderung

Herunterladen

iframeresizercontent.zip

Beschreibung

Dieses Widget unterstützt die Anpassung der Größe eines IFrames an den jeweiligen Inhalt. Es verwaltet Fenster- und Inhaltsgrößenänderungen, 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 den App Builder in einem Iframe hostet
  2. Innerhalb des Iframes, in dem App Builder ausgeführt wird

Weitere Informationen zur Konfiguration finden Sie unter Anzeigen einer 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 ein Banner oben auf allen App-Seiten bereitstellt. Das Banner ist anpassbar und kann einfach so konfiguriert werden, dass es jeden gewünschten Text anzeigt. Das Widget unterstützt die folgenden zwei Parameter:

  • BannerText: Der 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