Grundlegende Connector SDK UI-Komponenten

Übersicht

Diese grundlegenden UI-Komponenten sind verfügbar:

• String-Eingabe mit Standardwert
• String-Eingabe ohne Standardwert
• String-Eingabe mit verdeckter Eingabe ("Passwort")
• String-Eingabe mit versteckter Eingabe (Kein sichtbares UI-Element)
• Textbereich
• Zahleneingabe
• Boolean-Eingabe (Checkbox)
• Radio-Auswahl
• Dropdown-Menü

Komplexere UI-Komponenten sind verfügbar und werden als Komplexe Komponenten beschrieben.

Grundlegende UI-Komponenten

Dieses Beispiel zeigt die verfügbaren grundlegenden Komponenten mit detaillierten Codefragmenten in den folgenden Beispielen:

Gemeinsame Merkmale

Alle UI-Komponenten können einen defaultValue und validators haben; siehe das erste String-Feld für ein Beispiel beider. Validatoren werden in Validatoren beschrieben.

Felder, die ein variables Symbol anzeigen, sind Beispiele für UI-Komponenten, die die Variablenersetzung unterstützen. Wenn ein Benutzer eine öffnende eckige Klammer ([) eingibt, wird eine Liste möglicher Variablenvervollständigungen (Jitterbit-, Projekt- und globale Variablen) angezeigt. Derzeit unterstützt nur eine String-Eingabe UI-Komponente die Variablenersetzung.

Werte abrufen

Werte werden aus den Eigenschaften basierend auf ihrem Namen abgerufen. Das bedeutet, dass die Namen für jede Verbindung und Aktivität eindeutig sein müssen.

Die Verbindungsfabrikmethode erhält eine Instanz der Eigenschaften (props), die zum Abrufen von Werten verwendet werden kann:

@Override
public Connection createConnection(Map<String, String> props) {
  String accessToken = props.get(ACCESS_TOKEN);
  String appKey = props.get(APP_KEY);
  String locale = !props.containsKey(LOCALE) ? Locale.getDefault().toString() : "EN_US";
  if (accessToken == null || accessToken.length() == 0) {
    throw new RuntimeException("Access Token property cannot be empty. " +
      "Specify the access token associated with the registered Dropbox application.");
  }
  if (appKey == null || appKey.length() == 0) {
    throw new RuntimeException("App Key property cannot be empty. " +
      "Specify the app key associated with the registered Dropbox application.");
  }
  return new DropboxConnection(appKey, accessToken, locale);
}

Im obigen Beispiel werden die Werte accessToken und appKey aus den Eigenschaften mit den entsprechenden Schlüsselwörtern abgerufen (ACCESS_TOKEN, gesetzt auf "access-token" und APP_KEY, gesetzt auf "app-key").

String-Eingabe mit Standardwert

{
  "name": "example_string_with_default",
  "type": "string",
  "defaultValue": "/",
  "displayName": "Example string...required validator",
  "validators": [
    {
      "name": "required"
    }
  ]
}

String-Eingabe ohne Standardwert

{
  "name": "example_string_without_default",
  "type": "string",
  "displayName": "Example string without a default value"
}

String-Eingabe mit verdecktem Eintrag ("Passwort")

{
  "name": "example_password_string",
  "type": "string",
  "displayName": "Example password string",
  "multiple": false,
  "widgetHint": "password"
}

String-Eingabe mit verborgenem Eintrag (Kein sichtbares UI-Element)

In diesem Fall wird kein sichtbares UI-Element angezeigt. Ein Wert steht zur Verfügung, entweder als Standardwert oder programmgesteuert durch andere Komponenten.

{
  "name": "example_hidden_string",
  "type": "string",
  "displayName": "Example hidden string",
  "defaultValue": "hidden_value",
  "hidden": true,
  "multiple": false
}

Textbereich

Entwickelt für mehrere Textzeilen.

{
  "name": "example_textarea",
  "type": "textarea",
  "displayName": "Example text area",
  "location": "last",
  "multiple": false,
  "widgetHint": "textarea"
}

Zahlen-Eingabe

Für die Eingabe von Zahlen, mit Inkrement-/Dekrement-Pfeilen (sichtbar entweder bei Mouseover oder wenn das Feld im Fokus ist) und Tastaturpfeil-Aktivierung (Pfeiltasten nach oben und unten erhöhen bzw. verringern den Wert).

{
  "name": "example_number",
  "type": "number",
  "displayName": "Example number",
  "multiple": false
}

Boolean-Eingabe (Checkbox)

{
  "name": "example_boolean",
  "type": "boolean",
  "displayName": "Example boolean",
  "defaultValue": true,
  "multiple": false
}

Radio-Auswahl

Verwendet zur Erstellung von Radio-Button-Gruppen. Der realValue ist der Wert, der zurückgegeben wird, wenn er aus den Eigenschaften im Connector abgerufen wird. Der enumValue wird dem Benutzer angezeigt.

{
  "type": "string",
  "multiple": false,
  "name": "radio_choice_example",
  "widgetHint": "radio-choice",
  "displayName": "Example radio choice",
  "enumValues": [
    {
      "enumValue": "Binary",
      "realValue": "1"
    },
    {
      "enumValue": "ASCII",
      "realValue": "2"
    },
    {
      "enumValue": "Other",
      "realValue": "3"
    }
  ],
  "defaultValue": "2"
}

Dropdown-Menü

Wird verwendet, um Dropdown-Menügruppen zu erstellen. Der realValue ist der Wert, der zurückgegeben wird, wenn er aus den Eigenschaften im Connector abgerufen wird. Der enumValue wird dem Benutzer angezeigt.

{
  "name": "enum_example",
  "displayName": "Example menu using enum of values",
  "enumValues": [
    {
      "enumValue": "First Item",
      "realValue": "0"
    },
    {
      "enumValue": "Second Item (default)",
      "realValue": "1"
    },
    {
      "enumValue": "Third Item",
      "realValue": "2"
    }
  ],
  "defaultValue": "1"
}

Dropdown-Menüs unterstützen das Bearbeiten und Suchen. Dies wird durch das Setzen einer zusätzlichen Eigenschaft, enumOptions, spezifiziert, die editable und searchable unterstützt:

• editable: Wenn true, kann ein Benutzer eine neue Option zum Dropdown hinzufügen und diese neue Option auswählen. Der Standardwert ist false.
• searchable: Wenn true, kann ein Benutzer in das Dropdown eingeben, um die vorhandenen Optionen im Dropdown zu filtern. Der Standardwert ist false.

Die beiden Optionen können bei Bedarf kombiniert werden. Das Vorhandensein der einen impliziert nicht die andere. Ein Beispiel für eine Versionsauswahl könnte sein:

{
    "name": "version",
    "displayName": "Version",
    "enumValues": [
        {
            "enumValue": "v33.0",
            "realValue": "v33.0"
        },
        {
            "enumValue": "v33.1",
            "realValue": "v33.1"
        }
    ],
    "enumOptions": {
        "editable": true
    },
    "defaultValue": "v33.1"
}

Beispiel für ein AWS-Region-Dropdown-Menü

Dies ist ein längeres Beispiel, das zeigt, wie Eigenschaften, die ein Benutzer beim Konfigurieren einer Verbindung oder Aktivität bereitstellen muss, für die Auswahl fest codiert werden können. In diesem Beispiel ist die AWS-Region für die Verbindung zum Amazon S3-Endpunkt etwas, das der Benutzer bereitstellen muss. Der realValue ist der Wert, der zurückgegeben wird, wenn er aus den Eigenschaften im Connector abgerufen wird. Der enumValue wird dem Benutzer angezeigt.

Um dies in der adapter.json und in der Benutzeroberfläche anzugeben, könnten Sie eine Dropdown-Auswahl zur Spezifizierung bereitstellen:

Dieser Codeausschnitt definiert das Dropdown-Menü:

{
    "name": "region",
    "displayName": "AWS Region",
    "type": "string",
    "defaultValue": "us-east-1",
    "enumValues": [
        {"realValue": "us-gov-west-1",  "enumValue": "AWS GovCloud (US)"},
        {"realValue": "us-east-1",      "enumValue": "US East (N. Virginia)"},
        {"realValue": "us-east-2",      "enumValue": "US East (Ohio)"},
        {"realValue": "us-west-1",      "enumValue": "US West (N. California)"},
        {"realValue": "us-west-2",      "enumValue": "US West (Oregon)"},
        {"realValue": "eu-west-1",      "enumValue": "EU (Ireland)"},
        {"realValue": "eu-west-2",      "enumValue": "EU (London)"},
        {"realValue": "eu-west-3",      "enumValue": "EU (Paris)"},
        {"realValue": "eu-central-1",   "enumValue": "EU (Frankfurt)"},
        {"realValue": "eu-north-1",     "enumValue": "EU (Stockholm)"},
        {"realValue": "ap-south-1",     "enumValue": "Asia Pacific (Mumbai)"},
        {"realValue": "ap-southeast-1", "enumValue": "Asia Pacific (Singapore)"},
        {"realValue": "ap-southeast-2", "enumValue": "Asia Pacific (Sydney)"},
        {"realValue": "ap-northeast-1", "enumValue": "Asia Pacific (Tokyo)"},
        {"realValue": "ap-northeast-2", "enumValue": "Asia Pacific (Seoul)"},
        {"realValue": "cn-north-1",     "enumValue": "China (Beijing)"},
        {"realValue": "cn-northwest-1", "enumValue": "China (Ningxia)"},
        {"realValue": "ca-central-1",   "enumValue": "Canada (Central)"}
    ],
    "validators": [{
        "name": "required"
    }]
}

Gruppierung

Elemente können gruppiert und vom Benutzer aktiviert oder deaktiviert werden, wie unten gezeigt. In diesem Beispiel sind die Elemente in der Gruppe, die darauf folgt, inaktiv, wenn das Kontrollkästchen falsch ist:

Das Aktivieren des Kontrollkästchens aktiviert die Gruppe und ermöglicht die Eingabe in den zweiten und dritten Punkt:

Der Codeausschnitt dafür:

{
  "name": "example_group",
  "type": "group",
  "displayName": "Example Group",
  "children": [
    {
      "name": "example_group_first_item",
      "type": "boolean",
      "multiple": false,
      "displayName": "Example Group First Item",
      "defaultValue": false
    },
    {
      "name": "example_group_second_item",
      "type": "string",
      "multiple": false,
      "displayName": "Example Group Second Item",
      "location": "last",
      "defaultValue": "1",
      "enumValues": [
        {
          "enumValue": "Postal Code",
          "realValue": "0"
        },
        {
          "enumValue": "ZIP",
          "realValue": "1"
        }
      ],
      "deps": {
        "disabled": {
          "op": "not",
          "args": {
            "op": "prop",
            "args": "example_group_first_item"
          }
        }
      }
    },
    {
      "name": "example_group_third_item",
      "type": "string",
      "multiple": false,
      "displayName": "Example Group Third Item",
      "widgetHint": "password",
      "defaultValue": "",
      "deps": {
        "disabled": {
          "op": "not",
          "args": {
            "op": "prop",
            "args": "example_group_first_item"
          }
        }
      }
    }
  ]
}

Validatoren

Ein Feld kann eine Liste von einem oder mehreren Validatoren enthalten, die die Benutzereingabe überprüfen und deren Richtigkeit bestätigen. Wenn ein Validator fehlschlägt, wird dem Benutzer eine Fehlermeldung angezeigt. Validatoren werden ausgelöst, wenn ein Benutzer ein Feld verlässt, typischerweise mit der Tabulatortaste:

Beispiele für Validatoren sind das Erfordernis einer Eingabe, die Verwendung von nur Ziffern, das Erfordernis einer E-Mail-Adresse oder die Eingabe einer Postleitzahl. Standard-Validatoren für häufige Situationen wie Zeichenlänge und numerischen Wert sind verfügbar, und Muster-Validatoren können nach Bedarf erstellt werden.

Die Validatoren basieren auf den Angular Validators, mit Ausnahme der hasValue und requiredExpr Validatoren, die benutzerdefinierte Validatoren für die Integration Studio sind.

Alle Validatoren werden nach dem Muster aufgerufen, das in diesem Beispiel gezeigt wird:

{
    "displayName": "Number of columns",
    "name": "noOfColumns",
    "type": "number",
    "validators": [
        {
            "name": "required"
        },
        {
            "args": [
                "^([1-9]|[1-9]\\d|1\\d\\d|2[0-4]\\d|25[0-6])$"
            ],
            "errorMessage": "Only whole numbers 1 to 256 are allowed.",
            "name": "pattern"
        }
    ]
}

Hier sind zwei Validatoren für das Feld noOfColumns dargestellt. Der erste Validator ist ein required Validator, der nur erfordert, dass der Name angegeben wird, um ihn auszulösen. Das bedeutet, dass das Feld ausgefüllt werden muss (ist erforderlich). Ein roter Stern im UI des Integration Studio zeigt an, dass das Feld erforderlich ist.

Der zweite Validator ist ein pattern Validator, der nach einer Zeichenfolge sucht, die dem regulären Ausdrucksmuster entspricht, das durch ^([1-9]|[1-9]\\d|1\\d\\d|2[0-4]\\d|25[0-6])$ angegeben ist. Wenn dieser Validator fehlschlägt, wird die Fehlermeldung dem Benutzer angezeigt. Beachten Sie, dass das tatsächliche Muster, das verwendet wird, ^([1-9]|[1-9]\d|1\d\d|2[0-4]\d|25[0-6])$ sein wird, da alle Backslashes im Muster escaped werden müssen.

Ein Validator wird nach Namen aufgerufen, und alle Argumente werden als Liste übergeben, wie in den obigen Beispielen gezeigt. Eine Fehlermeldung, die zurückgegeben werden soll, kann optional angegeben werden. Wenn sie nicht angegeben ist, wird eine Standardfehlermeldung verwendet (wie für jeden Validator unten behandelt). Beachten Sie, wie die Fehlermeldung auf die Attribute des Feldes wie displayName und args zugreifen kann, um Validatoren zu erstellen, die erweiterbar und nicht anfällig für Codeänderungen sind.

Diese Validatoren sind nach Namen verfügbar:

• required

  • Nimmt keine Argumente
  • Standardnachricht: ${displayName} ist erforderlich

• requiredTrue

  • Nimmt keine Argumente
  • Standardnachricht: ${displayName} ist erforderlich
  • Dieser Validator wird häufig für erforderliche Kontrollkästchen verwendet

• email

  • Nimmt keine Argumente
  • Standardnachricht: ${displayName} muss eine gültige E-Mail-Adresse sein

• hasValue (benutzerdefinierter Validator für Integration Studio)

  • Nimmt keine Argumente
  • Standardnachricht: ${displayName} ist erforderlich

• min

  • Nimmt ein Argument: den minimalen numerischen Wert
  • Standardnachricht: ${displayName} muss einen Wert von mindestens ${args[0]} haben

• minlength

  • Nimmt ein Argument: die minimale Anzahl von Zeichen
  • Standardnachricht: ${displayName} muss mindestens ${args[0]} Zeichen lang sein

• max

  • Nimmt ein Argument: den maximalen numerischen Wert
  • Standardnachricht: ${displayName} hat einen Wert größer als ${args[0]}

• maxlength

  • Nimmt ein Argument: die maximale Anzahl von Zeichen
  • Standardnachricht: ${displayName} überschreitet ${args[0]} Zeichen

• pattern

  • Nimmt ein Argument: eine Zeichenkette JavaScript regulärer Ausdruck mit dem die Eingabe übereinstimmen muss
  • Alle Backslashes im Muster müssen escaped werden: das Muster [^\s]+ muss als [^\\s]+ eingegeben werden
  • Standardnachricht: ${displayName} ist ungültig

• requiredExpr (benutzerdefinierter Validator für Integration Studio)

  • Nimmt ein Argument: einen Ausdruck, der erfüllt sein muss
  • Standardnachricht: ${displayName} ist erforderlich

Beispielmuster

Any backslashes in the pattern must be escaped: the pattern [^\s]+ must be entered as [^\\s]+

Arbeitsbeispiel

See the Dropbox connector's adapter.json file for a working example using many of these UI components.