Beispiel: Benutzerdefinierte Aufgabe für ThingWorx Navigate erstellen
In den nachfolgenden Abschnitten zeigen wir alle Schritte, die notwendig sind, um eine benutzerdefinierte Aufgabe in ThingWorx Composer zu erstellen. In der Beispielsaufgabe suchen Benutzer nach Windchill Daten und die Ergebnisse werden in einer Tabelle angezeigt. Wird ein Element aus der Tabelle ausgewählt, werden weitere Eigenschaften in einer nachfolgenden Tabelle angezeigt und das Element wird als interaktiver 3D-Darstellung angezeigt. Es kann ein Link geklickt werden, um die Darstellung in Creo View zu öffnen. Und so sieht die fertige Aufgabe aus:
Das nachfolgende Beispiel zeigt, wie Bausteine einer Aufgabe kombiniert werden müssen, um ein funktionierendes Mashup zu erstellen. Viele der Dienste, die Ihre Organisation nutzt, sind wahrscheinlich bereits im Demo-Mashup und im WindchillSwaggerConnector enthalten.
Deshalb ist es möglich, lediglich unter Verwendung der
ThingWorx Benutzeroberfläche sowie der standardmäßigen Dienste viele benutzerdefinierte Aufgaben zu erstellen. Sollten Sie eigene Dienste schreiben wollen, so haben wir Schritte für einige der meist verwendeten Dienste für Sie zusammengestellt, die hierbei hilfreich sein können. Weitere Informationen finden Sie im Windchill Extension Handbuch auf der PTC Site unter
Referenzdokumente.
Aber lassen Sie uns mit der Beispielsaufgabe anfangen.
Erstellen Sie ein neues Mashup in ThingWorx Composer.
Es ist hilfreich, das Layout Ihrer Aufgabe zu planen, bevor Sie anfangen. Anschließend wissen Sie wie viele Fenster Sie benötigen, welche Dienste in den Fenstern enthalten sein sollen und wie das Layout aussehen soll.
1. Klicken Sie unter VISUALISIERUNG auf Mashups und klicken Sie anschließend auf die Schaltfläche Neu. Das Dialogfenster Neues Mashup wird geöffnet.
2. Wählen Sie unter Mashup-Typ die Option Seite aus.
3. Wählen Sie unter Layout-Optionen die Option Reaktionsfähig aus und klicken Sie anschließend auf Fertig. Der Mashup-Editor wird geöffnet.
4. Wählen Sie auf der Registerkarte Widgets die Option Fenster aus und ziehen Sie das Fenster in die Vorschau für das Layout. Ziehen Sie weitere Fenster-Widgets in Ihr Layout und passen Sie deren Größe an, bis Ihr Layout wie geplant aussieht. Verwenden Sie für unser Beispiel das Layout im Bild oben.
Widgets zu Fenstern hinzufügen
Jetzt verfügen Sie über das grundlegende Framework für Ihre Aufgabe. Als nächstes fügen wir Widgets hinzu, um die visuellen Komponenten für jedes Fenster zu definieren.
1. Ziehen Sie ein Widget in jedes Fenster. Für dieses Beispiel fügen wird die folgenden Widgets hinzu:
◦ Liste: Zeigt eine Liste der gespeicherten Suchen von Windchill an. Wenn Sie ein Element aus der Liste auswählen, werden die Details im Fenster Raster angezeigt.
◦ Textfeld: Gibt Benutzern die Möglichkeit, eine weitere Suche auszuführen.
◦ Schaltfläche: Führt die Suche aus.
◦ Raster: Zeigt die Details des vom Benutzer ausgewählten Elements an.
◦ Eigenschaftsanzeige: Zeigt die Attribute des ausgewählten Elements im Fenster Raster an.
◦ Creo View: Zeigt eine 3D-Ansicht des ausgewählten Elements.
◦ Link: Öffnet das ausgewählte Element in der Creo View Client-Anwendung.
Datenquellen und Dienste hinzufügen
Jetzt, da wir die Widgets erstellt haben, machen wir mit der Benutzeroberfläche weiter. Für die Widgets müssen Informationsquellen angegeben werden. In diesem Beispiel wird die standardmäßige Datenquelle ptc-windchill-demo-thing verwendet. Im nächsten Schritt fügen wir die Datenquelle und Dienste hinzu, die das Mashup benötigt, um zu funktionieren.
1. Klicken Sie auf der Registerkarte Daten im oberen rechten Fenster von ThingWorx auf das Pluszeichen, um eine neue Datenquelle hinzuzufügen. Das Dialogfenster Daten hinzufügen wird geöffnet.
2. Geben Sie im Dialogfenster Entitäten suchen den Namen der benötigten Datenquelle ein, indem Sie anfangen zu tippen. Tippen Sie z.B. ptc-windchill.
3. Wählen Sie die gewünschte Datenquelle aus den Ergebnissen aus. Für unser Beispiel verwenden wir ptc-windchill-demo-thing. Die Dienste, die für diese Einheit zur Verfügung stehen, werden auf der linken Seite angezeigt.
4. Klicken Sie auf den blauen Pfeil, um die benötigten Dienste hinzuzufügen. Für das Beispiel-Mashup wählen wir die folgenden Dienste aus:
◦ GetCreoViewData
◦ ExecuteSavedSearch
◦ ListSavedSearches
In diesem Beispiel möchten wir gespeicherte Suchen aus Windchill anzeigen, sobald das Mashup geladen wurde. Aktivieren Sie das Kontrollkästchen Mashup geladen? für ListSavedSearches.
5. Klicken Sie auf Fertig, sobald alle benötigten Dienste ausgewählt wurden.
Dienste mit den Widgets verbinden
Die Datendienste sowie die Elemente der Benutzeroberfläche sind jetzt vorhanden. In den nächsten Schritten stellen wir die Verbindungen her.
1. Erweitern Sie den Abschnitt Zurückgegebene Daten im Fenster Daten unter ListSavedSearches.
2. Ziehen Sie Alle Daten in das Widget Liste. Es werden alle Daten aus einer gespeicherten Suche zurückgegeben.
3. Wählen Sie für Bindende Ziele die Option Daten aus. Unten im Composer wird ein Verbindungsdiagramm angezeigt.
| Dieser Schritt ersetzt manuelles clientseitiges Java-Scripting, was in früheren Versionen von ThingWorx erforderlich war. |
4. Als nächstes konfigurieren wir das Widget. Legen Sie folgenden Parameter im Listen-Widget fest:
◦ DisplayField: name
◦ ValueField: objectid
◦ Label: Gespeicherte Suchen
| Klicken Sie außerhalb des Textfelds, um jede Entität zu speichern. |
Daten zwischen Diensten binden
Einige der Dienste basieren auf Daten von einem anderen Dienst. Beispiel: Wir wählen eine gespeicherte Suche aus der Liste aus und möchten diese ausführen. In den nächsten Schritten erstellen wir Verbindungen zwischen den Diensten, die bindend sind. Außerdem binden wir Dienste an Widgets, indem wir ExecuteSavedSearch daran binden, dass ein Schlüsselwort in das Suchfeld eingegeben werden muss.
1. Erweitern Sie Parameters unter ExecuteSavedSearch.
2. Erweitern Sie Zurückgegebene Daten, unter ListSavedSearches und erweitern Sie anschließend Ausgewählte Zeile(n).
3. Ziehen Sie unter Ausgewählte Zeile(n) die objectId in oid, was sich im Abschnitt Parameter für ExecuteSavedSearch befindet.
Die erste Verbindung ist hergestellt.
4. Wählen Sie für die zweite Verbindung ListSavedSearches aus.
5. Ziehen Sie anschließend SelectedRowsChanged von unten im Fenster in ExecuteSavedSearch.
Als nächstes verbinden wir die Suchfunktion. Die Eingabe im Textfeld stellt eine Verbindung zum Eingabeparameter Schlüsselwort her und die Schaltfläche bildet die Verbindung zu dem Dienst, um die Daten abzurufen.
1. Erweitern Sie ExecuteSavedSearch und im Anschluss Parameter.
2. Wählen Sie das Textfeld-Widget aus, und klicken Sie auf den Pfeil, um die Liste zu öffnen. Ziehen Sie Text in Schlüsselwort unter ExecuteSavedSearch.
3. Wählen Sie zurück im Suchfeld-Fenster das Schaltflächen-Widget aus und ziehen Sie im Dropdown-Menü Clicked in ExecuteSavedSearch.
4. Jetzt beschriften wird das Suchfeld und die Schaltfläche. Wählen Sie jedes Element aus und wählen Sie dann Beschriftung aus dem Menü. Geben Sie einen Namen für die Entität ein. Beispiel:
◦ Textfeld: Zu suchende Elemente
◦ Schalfläche: Suchen
5. Speichern Sie die Änderungen.
Verbindungen prüfen
Sie sollten zu diesem Zeitpunkt die folgenden Verbindungen sehen. Wählen Sie jede Einheit unten aus, um ihre Verbindung anzuzeigen:
Widget Liste
ExecuteSavedSearch
ListSavedSearches
Teilestruktur als Tabelle anzeigen
Um die Teilestruktur im Tabellen-Widget anzuzeigen, müssen Sie die Teilestrukturdaten mit dem Raster-Widget verbinden. Beachten Sie, dass wir in diesem Schritt einen umgekehrten Ziehvorgang durchführen, und zwar vom Dienst in das Widget.
1. Erweitern Sie unter ExecuteSavedSearch die Option Zurückgegebene Daten und ziehen Sie dann Alle Daten in das Raster-Widget.
2. Wählen Sie unter Bindendes Ziel auswählen die Option Daten aus.
3. Jetzt sind die Daten mit dem Raster verbunden und wir richten die Tabelle ein. Wählen Sie das Raster-Widget aus und wählen Sie anschließend Rasterspalten konfigurieren aus dem Menü.
4. Wählen Sie unter Widget konfigurieren die anzuzeigenden Eigenschaften aus und sortieren Sie sie neu.
5. Speichern Sie die Änderungen.
Visualisierungsobjekt bei Auswahl des Elements anzeigen
Unsere Aufgabe zeigt das Visualisierungsobjekt für ein Element an, wenn das Element im Raster ausgewählt wird. Diese Einstellung wird vorgenommen, indem die Strukturdaten mit dem Widget Creo View verbunden werden. Anschließend können wir das Widget so festlegen, dass es automatisch aktualisiert wird, sobald der Benutzer ein anderes Element auswählt.
1. Erweitern Sie unter dem Dienst GetCreoViewData unter Zurückgegebene Daten die Option Alle Daten und wählen Sie anschließend Struktur aus. Ziehen Sie die Struktur in das Widget Creo View.
2. Wählen Sie unter Bindendes Ziel auswählenProductToView aus.
3. Wählen Sie ExecuteSavedSearch aus, um die dynamische Aktualisierung zu konfigurieren. Ziehen Sie anschließend im linken unteren Fenster SelectedRowsChanged in den Dienst GetCreoViewData.
4. Klicken Sie auf Speichern.
Link hinzufügen, um das Element in Creo View zu öffnen
Damit Benutzer die Möglichkeit haben, die 3D-Visualisierungsobjekt-Datei schnell anzuzeigen, fügen wird einen Link hinzu, um das Element in Creo View zu öffnen. Um diesen Dienst nutzen zu können, müssen Benutzer Creo View installiert haben oder über Windchill Zugriff zu Creo View Lite haben.
1. Erweitern Sie unter GetCreoViewData die Optionen Zurückgegebene Daten und Alle Daten.
2. Wählen Sie launchCreoViewUrl aus und ziehen Sie die Auswahl in das Link-Widget.
3. Wählen Sie unter Bindendes Ziel auswählenSourceURL aus.
4. Dann müssen wir die Windchill Objekt-ID des Elements mit dem Dienst verbinden: Erweitern Sie unter GetCreoViewData die Option Parameter.
5. Erweitern Sie anschließend unter ExecuteSavedSearchZurückgegebene Daten gefolgt von Ausgewählte Zeile(n).
6. Wählen Sie objectId aus und ziehen Sie die Objekt-ID in den Parameter oid unter GetCreoViewData.
7. Jetzt benennen wir den Link. Wählen Sie das Link-Widget aus und wählen Sie Text. Geben Sie Text für den Link ein, z.B. Element in Creo View anzeigen.
8. Klicken Sie auf Speichern.
Eigenschaften für in der Tabelle ausgewähltes Element anzeigen
Die Tabelle mit den Suchergebnissen zeigt einige der Elementeigenschaften an. Um eine detailliertere Liste der Eigenschaften anzuzeigen, muss eine Verbindung zum Widget für die Eigenschaftsanzeige hergestellt werden. Anschließend wählen wir die anzuzeigenden Eigenschaften aus.
1. Erweitern Sie Zurückgegebene Daten unter ExecuteSavedSearch und wählen Sie anschließend Ausgewählte Zeile(n) aus.
2. Ziehen Sie Ausgewählte Zeile(n) vom Dienst in das Widget für die Eigenschaftsanzeige.
3. Wählen Sie unter Bindendes Ziel auswählen die Option Daten aus.
4. Jetzt ist das Anzeige-Widget mit den Daten verbunden und wir können die anzuzeigenden Eigenschaften auswählen. Wählen Sie das Widget aus und klicken Sie anschließend auf den Pfeil in der oberen rechten Ecke.
5. Wählen Sie Widget konfigurieren aus dem Menü.
6. Wählen Sie unter Widget konfigurieren die anzuzeigenden Eigenschaften aus und sortieren Sie sie neu.
Verbindungen erneut prüfen
Zu diesem Zeitpunkt sollten Sie folgende Verbindungen sehen. Wählen Sie jede Einheit unten aus, um ihre Verbindungen anzuzeigen:
GetCreoViewData
ExecuteSavedSearch
ListSavedSearch
Mashup benennen und speichern und neue Aufgabe anzeigen
Wir sind fast fertig. In den letzten Schritten geben wir dem Mashup einen Namen und speichern es. Dann zeigen wir unsere benutzerdefinierte ThingWorx Navigate Aufgabe an.
1. Klicken Sie auf Speichern.
2. Geben Sie unter Allgemeine Informationen den Namen der Aufgabe in das Feld Name ein.
3. Klicken Sie auf Mashup anzeigen. Die neue Aufgabe wird geöffnet.
Sie können die Aufgabe jetzt zur ThingWorx Navigate Homepage hinzufügen und Anpassungen vornehmen. Informationen dazu finden Sie im Thema "Benutzerdefinierte Aufgabe zu Ihrer Homepage hinzufügen".
Wünschen Sie weitere Informationen? Einige Ressourcen:
