Connector SDK UI- Endpoint

Endpoint und Aktivitätssymbole

Die Integration Studio Benutzeroberfläche für einen mit dem Jitterbit Connector SDK erstellten Connector verwendet Symbole in der Benutzeroberfläche, um den Endpoint und seine Aktivitäten darzustellen.

In der Komponentenpalette stellen Symbole sowohl den konfigurierten Endpoint als auch seine Aktivitäten dar. Dieser Screenshot des Dropbox-Connectors zeigt, wie verschiedene Symbole verwendet werden:

Für die Verbindung wird ein Symbol (ein Ordner) verwendet, für die Aktivitäten ein anderes Symbol. Es ist möglich, für jede Aktivität ein anderes Symbol zu verwenden, es wird jedoch ein einheitliches Farb- und Formthema für einen Endpoint empfohlen. Da der Text, der die Aktivität beschreibt, über das Symbol gelegt wird, ist es am besten, die untere Hälfte des Symbols einfarbig zu belassen, damit der weiße Text, der bis zu zwei Zeilen umfassen kann, einen einfarbigen Hintergrund hat, vor dem er erscheinen kann.

Beachten Sie, dass nicht konfigurierte Endpoints im Vergleich zu den konfigurierten Endpoints leicht ausgegraut sind. Vergleichen Sie die beiden Amazon S3-Symbole in diesem Bild:

In einem Operation stellen Symbole die Aktivitäten des Dropbox-Connectors dar:

Wie im JSON-Schema des Connectors zu sehen ist können Sie Symbole für die Verbindung und die einzelnen Aktivitäten (zusammen als Endpoint bezeichnet) definieren. Symbole werden im SVG-Format definiert und als Pfad zu einer SVG-Datei bereitgestellt.

Um in der Integration Studio Benutzeroberfläche sowohl grafisch als auch ästhetisch ordnungsgemäß zu funktionieren, müssen Symbole bei ihrem Entwurf und ihrer Erstellung bestimmten Konventionen folgen.

Wie aus diesen Beispielen ersichtlich, besteht das Designmuster für ein Symbol aus einem farbigen Hintergrund, auf den ein weißes Logo angewendet wird. Weiße Schrift wird zur Laufzeit von der Integration Studio-Benutzeroberfläche hinzugefügt, um die Aktivitäten zu kennzeichnen. Aus diesem Grund muss im Design eines Symbols Platz für diesen Text gelassen werden, der bis zu zwei Zeilen umfassen kann.

Symbolgrößen, Dateityp und Farbregeln

Es werden zwei Symbole benötigt: ein Endpoint und ein Aktivitätssymbol.

Beide Symbole haben die gleiche Größe (90 x 90 Pixel), wobei das Logo darin eine maximale Breite von 74 Pixel und eine maximale Höhe von 38 Pixel (Endpoint ) und 42 Pixel (Aktivitätssymbol) hat.

Ein Icon muss als SVG-Datei gespeichert werden.

Um zur Ästhetik von Integration Studio zu passen, sollten die Symbole diese Farbregeln befolgen:

• Logofarbe: Weiß. Keine Ausnahmen.

• Helle Farbe: Die Hauptmarkenfarbe, vorzugsweise so gewählt, dass sie die weiße Schrift oben unterstützt.

• Dunkle Farbe: Dunklerer Farbton der hellen Farbe. Normalerweise bedeutet dies, dass die Helligkeit auf 80 % des ursprünglichen Werts reduziert wird.

• Farbverlauf: Wird auf das Aktivitätssymbol angewendet, mit der hellen Farbe oben und der dunklen Farbe unten.

• Größe: Die Symbole müssen innerhalb der Richtlinien passen, wie in den Beispielbildern unten gezeigt.

• Platzierung: Zentrieren Sie die Symbole entweder mithilfe der mathematischen oder optischen Zentrierung für die horizontale Achse und zentrieren Sie sie dann vertikal in den Richtlinien, wie in den Beispielbildern unten gezeigt.

Endpoint

Das Endpoint besteht aus einer Reihe von Ordnern mit einem weißen Logo oben drauf. Der hinterste Ordner ist dunkel und der vorderste Ordner hell. Diese Farben können mithilfe der verschiedenen Vorlagenebenen zugewiesen werden.

Das Logo muss mit einem transparenten Hintergrund erstellt werden, damit beim Platzieren auf den Ordnerbildern die Farben um das Logo herum und durch es hindurch entsprechend sichtbar sind.

Dieses Bild zeigt ein Endpoint mit hinzugefügten Richtlinien, die die Grenzen für die Platzierung des Symbols angeben:

Aktivitätssymbol

Das Aktivitätssymbol hat einen durchgehenden Farbverlauf, oben hell und unten dunkel. Das Logo kann dasselbe sein wie das im Endpoint oder ein anderes, je nach Bedarf. In den meisten Fällen ist es jedoch dasselbe wie das in der Endpoint, aber weiter oben platziert, sodass unten Platz für die Aktivitätsbeschriftungen bleibt.

Der Mindestabstand unten sollte 40 Pixel betragen (50 % der Höhe).

Wie beim Endpoint muss das Logo mit einem transparenten Hintergrund erstellt werden, damit beim Platzieren auf den Ordnerbildern die Farben um das Logo herum und durch es hindurch entsprechend angezeigt werden.

Dieses Bild zeigt ein Aktivitätssymbol mit hinzugefügten Richtlinien, die die Grenzen für die Platzierung des Symbols angeben:

Abzeichen

Symbole können mit einem Beta- oder veraltet-Symbol in der oberen linken Ecke angezeigt werden. Diese können auf den Endpoint und Aktivitätssymbolen festgelegt werden und werden konfiguriert, indem den Metadaten eines Endpoint oder einer Aktivität entsprechende Eigenschaften hinzugefügt werden.

• Um ein beta-Abzeichen hinzuzufügen, setzen Sie die isPreview Eigentum an true:

"isPreview": true,

• Um ein veraltetes Abzeichen hinzuzufügen, setzen Sie das isDeprecated Eigentum an true:

"isDeprecated": true,

Um beispielsweise einen Salesforce Endpoint, der ein Beta-Abzeichen hat:

{
  "name": "Salesforce",
  "id": "salesforce",
  "type": "salesforce",
  "isPreview": true,
  "availability": "PUBLIC",
  "endpoint": {},
  "activities": {}
}

Um ein Salesforce Endpoint und seine Query Aktivität, die ein veraltetes Abzeichen erhält:

{
  "name": "Salesforce",
  "id": "salesforce",
  "type": "salesforce",
  "isDeprecated": true,
  "availability": "PUBLIC",
  "endpoint": {},
  "activities": {
    "query": {
      "name": "Query",
      "kind": "outbound",
      "polarity": "source",
      "isDeprecated": true,
      "properties": []
    }
  }
}

Arbeitsbeispiele

Die oben gezeigten Beispiele liegen als SVG-Dateien vor:

• Endpoint: endpoint.svg
• Aktivitätssymbol: activity.svg

Siehe den Dropbox-Connector adapter.json-Datei für ein funktionierendes Beispiel mit Symboldateien.

Beispiele für verschiedene Logos und Farbbehandlungen finden Sie in der aktuellen Auswahl der im Integration Studio verfügbaren Konnektoren.