Erweiterte Anpassung > Neue Aufgaben für ThingWorx Navigate erstellen
  
Neue Aufgaben für ThingWorx Navigate erstellen
Bausteine einer Aufgabe
Eine Aufgabe besteht aus mehreren grundlegenden Teilen:
Mashup: Die Benutzeroberfläche einer Aufgabe
Diensten: Java oder Java Script, das die Aktionen durchführt. Die Dienste befinden sich auf ptc-windchill-integration-connector.
Windchill: Der Quelle der Daten.
Verwenden Sie ThingWorx Composer, um das Mashup zu erstellen und es mit den Diensten zu verbinden.
Beispiel: Neue Aufgabe erstellen
In den nachfolgenden Abschnitten zeigen wir alle Schritte, die notwendig sind, um eine neue 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 ptc-windchill-integration-connector 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.
Aufgaben planen
Es ist hilfreich, die Funktion und das Layout Ihrer Aufgabe zu planen, bevor Sie anfangen. Sie wissen dann, welche Dienste Sie benötigen, die Bereiche die jeder Dienst braucht und wie diese angeordnet sein sollen. Wenn Ihr Plan fertig ist, können Sie die Dienste zusammenstellen, die Sie für den Konnektor benötigen. Fahren Sie mit den Schritten im nächsten Abschnitt fort.
Integrations-Konnektor und Medieneinheit duplizieren
1. Wählen Sie links auf der Registerkarte Durchsuchen unter VISUALISIERUNG die Option Medien aus. Rechts wird die Liste der Medieneinheiten geöffnet.
2. Wählen Sie das Kontrollkästchen neben ptc-windchill-integration-connector-proxy aus und klicken Sie anschließend auf Duplizieren. Das Fenster "Neue Medien" wird auf der rechten Seite geöffnet, wobei die Einstellungen von ptc-windchill-integration-connector-proxy verwendet werden:
3. Legen Sei einen Namen für die neue Medieneinheit fest. Lassen Sie uns für dieses Beispiel sample-connector-proxy verwenden.
* 
Stellen Sie sicher, dass die Namen der Medieneinheit und des Integrations-Konnektors zueinander in Beziehung stehen.
<connector_name>
<connector_name>-proxy
4. Klicken Sie auf Speichern. Die Medieneinheit wird dupliziert.
5. Als Nächstes duplizieren wir den Integrations-Konnektor. Wählen Sie links auf der Registerkarte Durchsuchen unter MODELLIERUNG die Option Integrations-Konnektoren aus. Die Liste der Integrations-Konnektoren wird auf der rechten Seite geöffnet.
6. Wählen Sie das Kontrollkästchen neben ptc-windchill-integration-connector aus und klicken Sie anschließend auf Duplizieren. Das Fenster "Neues Ding" wird auf der rechten Seite geöffnet, wobei die Einstellungen von ptc-windchill-integration-connector verwendet werden:
Tags: PTC Navigate
Basis-Dingvorlage: WindchillSwaggerConnector
Implementierte Formen: WindchillContentProxyServiceProvider
7. Legen Sei einen Namen für den neuen Konnektor fest. Lassen Sie uns für dieses Beispiel sample-connector verwenden. Klicken Sie anschließend auf Speichern.
8. Klicken Sie auf Dienste, um die Dienste für den neuen Integrations-Konnektor zu öffnen. Suchen Sie nach dem Dienst Search_Get_SavedSearches und klicken Sie auf ihn, um ihn zu öffnen und zu bearbeiten.
9. Klicken Sie unter Routing-Informationen auf Neue API-Zuordnung. Das Dialogfenster Neue API-Zuordnung wird geöffnet.
10. Legen Sie die folgenden Eigenschaften fest:
Zuordnungs-ID: SavedSearch
Endpunkt: findSavedSearch
Data Shape auswählen: ptc-savedSearch-demo-shape
11. Ziehen Sie das Attribut name vom Baum Endpunkt zum Attribut name des Data Shape.
12. Ziehen Sie id vom Baum Endpunkt zum Attribut objectid des Data Shape. Ihre neue API-Zuordnung sollte jetzt wie folgt aussehen:
13. Klicken Sie auf Fertig und anschließend auf der Routing-Seite Search_Get_SavedSearches auf Speichern und Weiter.
14. Testen Sie den Dienst, indem Sie Folgendes unter Eingaben eingeben:
$filter: scope ne null
$select: name
Klicken Sie auf Ausführen. Unter Ausgabe werden die gespeicherten globalen Suchen aus Windchill in der Ergebnistabelle angezeigt.
15. Klicken Sie auf Fertig. Das Routing ist aktualisiert.
Neuen lokalen Dienst hinzufügen: ExecuteSavedSearch (gespeicherte Suche ausführen)
1. Klicken Sie auf der Seite Dienste auf Hinzufügen und wählen Sie Lokal (JavaScript) aus. Die Seite Neuer Dienst wird geöffnet.
2. Geben Sie in Dienstinformationen unter NameExecuteSavedSearch ein.
3. Klicken Sie auf den Abschnitt Eingaben und anschließend auf Hinzufügen.
4. Geben Sie der Eingabe im Dialogfenster Neue Eingabe den Namen oid und stellen Sie sicher, dass die Option Basis-Typ auf STRING festgelegt ist.
5. Klicken Sie auf Fertig.
6. Legen Sie im Abschnitt Ausgabe die folgenden Parameter fest:
Ausgabetyp: INFOTABLE
Data Shape: ptc-part-demo-shape
7. Kopieren Sie den folgenden Code in das Snippets-Tool:
// result: JSON
var csrf_token = me.Security_Get_CSRF().items[0].attributes.nonce;
var params = {
infoTableName : "InfoTable",
dataShapeName : "ptc-part-demo-shape"
};
// CreateInfoTableFromDataShape(ptc-part-demo-shape)
var result = Resources["InfoTableFunctions"].CreateInfoTableFromDataShape(params);
var select = "";
// infotable datashape iteration
var dataShapeFields = result.dataShape.fields;
for (var fieldName in dataShapeFields) {
select += ',' + fieldName;
}
// result: JSON
var searchResult = me.Search_Get_SavedSearch_Results({
arguments: undefined /* JSON */,
oid: oid /* STRING */,
CSRF_NONCE: csrf_token /* STRING */,
$select: select /* STRING */
});
var row = {};
for each (var hit in searchResult.items) {
row = hit.attributes;
row.objectId = hit.id;
result.AddRow(row);
}
8. Klicken Sie auf Fertig.
Neuen lokalen Dienst hinzufügen: GetViewableLinks (Links für Visualisierungsobjekte abrufen)
1. Klicken Sie zurück auf der Seite Dienste erneut auf Hinzufügen > Lokal (JavaScript), um einen weiteren neuen Dienst hinzuzufügen.
2. Geben Sie dem Dienst unter Serviceinformationen den Namen GetViewableLinks.
3. Klicken Sie auf Eingaben, und fügen Sie die folgende Eingabe hinzu:
Name: oid
Basis-Typ: STRING
4. Klicken Sie auf Fertig.
5. Klicken Sie auf Ausgabe und machen Sie folgende Angaben:
INFOTABLE
Data Shape: ptc-creoview-info-shape
6. Kopieren Sie den folgenden Code in das Snippets-Tool:
var params = {
infoTableName : "InfoTable",
dataShapeName : "ptc-creoview-info-shape"
};
// CreateInfoTableFromDataShape(infoTableName:STRING("InfoTable"), dataShapeName:STRING):INFOTABLE(ptc-creoview-info-shape)
var result = Resources["InfoTableFunctions"].CreateInfoTableFromDataShape(params);
// result: JSON
var vizResult = me.Visualization_Get_Viewable({
forceCreoViewPlugin: undefined /* BOOLEAN */,
navigationCriteria: undefined /* STRING */,
oid: oid /* STRING */
});
// ptc-creoview-info-shape object
for each (var rep in vizResult.attributes.representations) {
// loop through all reps until the default rep is discovered
if (rep.attributes.default) {
// result: JSON
var fieldvalues = me.RewriteContentProxyFieldValues({
object:
{"twodthumbnail":rep.attributes.twodthumbnail,
"threedthumbnail" :
rep.attributes.threedthumbnail, // STRING
"structure":
vizResult.attributes.structure } /* JSON */
});
fieldvalues.launchCreoViewUrl = rep.attributes.launchCreoView; // HYPERLINK
result.AddRow(fieldvalues);
result.AddRow(fieldvalues);
break;
}
}
Ihr Dienst sieht jetzt wie folgt aus:
7. Klicken Sie auf Fertig. Der Dienst wurde erstellt.
8. Klicken Sie jetzt auf Speichern, um Ihren Konnektor zu speichern.
Neues Mashup erstellen und Layout festlegen
Wenn der Integrations-Konnektor bereit ist, ist es an der Zeit, das Mashup für die Aufgabe zu erstellen.
1. Klicken Sie im oberen Menü von ThingWorx Composer auf + NEU. Geben Sie die ersten Buchstaben von mashup ein, und wählen Sie dann Mashup aus der Liste aus. Das Dialogfenster Neues Mashup wird geöffnet.
2. Wählen Sie unter Leer als Layout Reaktionsfähig aus, und klicken Sie dann auf OK.
3. Geben Sie auf der Seite Allgemeine Informationen einen Namen für das Mashup ein, und klicken Sie dann auf Speichern.
4. Klicken Sie auf Entwerfen. Der Mashup Builder wird geöffnet.
5. Ziehen Sie auf der Registerkarte Widgets die Option Layout in den Workspace des Mashup Builder. Das Dialogfenster Layout konfigurieren wird geöffnet.
* 
Sie können den Namen in das Feld eingeben, um schnell nach einem Widget zu suchen, ohne durch die Liste scrollen zu müssen.
6. Klicken Sie auf Horizontal, und konfigurieren Sie dann unter Layout-Optionen dieses Layout:
Linke Seitenleiste: Wählen Sie das Kontrollkästchen aus.
Spalten: 1
7. Klicken Sie auf Fertig.
8. Ziehen Sie ein weiteres Layout in den Spaltenbereich (auf der rechten Seite). Definieren Sie die folgenden Optionen:
Vertikal
Kopfzeile: Wählen Sie das Kontrollkästchen aus.
Zeilen: 2
9. Klicken Sie auf Fertig und anschließend auf Speichern.
So sieht Ihr Mashup bisher aus:
Nun fügen Sie Widgets hinzu.
Widgets zum Layout hinzufügen
Jetzt verfügen Sie über das grundlegende Framework für Ihre Aufgabe. Fügen Sie als nächstes Widgets hinzu, um die visuellen Komponenten für jedes Fenster zu definieren.
1. Suchen Sie nach den folgenden Widgets, und ziehen Sie sie an die folgenden Stellen:
Liste: Linke Seitenleiste. Zeigt eine Liste der gespeicherten Suchen von Windchill an. Wenn Sie ein Element aus der Liste auswählen, werden dessen Details im Fenster Raster angezeigt.
Raster: Oberste Zeile des rechten Layouts. Zeigt die Details des vom Benutzer ausgewählten Elements an.
Fensterbereich: Unterste Zeile des rechten Layouts. Zeigt eine 3D-Visualisierung des Teils oder der Baugruppe sowie die Eigenschaften der ausgewählten Teile an.
2. Wählen Sie das Fensterbereich-Widget aus, und ziehen Sie das Eigenschaftsanzeige-Widget auf die linke Seite des Bereichs.
3. Ziehen Sie ein ThingView-Widget auf die rechte Seite desselben Bereichs neben Eigenschaftsanzeige. Dieses Widget zeigt eine 3D-Ansicht des ausgewählten Elements an.
4. Klicken Sie auf Speichern.
Die Benutzeroberfläche der Aufgabe ist bereit. Fahren Sie mit dem nächsten Abschnitt fort, um Dienste hinzuzufügen.
Dienste hinzufügen
Jetzt, da wir die Widgets erstellt haben, machen wir mit der Benutzeroberfläche weiter. Verbinden Sie nun Informationsquellen über den zuvor erstellten Integrations-Konnektor sample-connector. 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 Bereich des Mashup Builder auf , um eine neue Datenquelle hinzuzufügen. Das Dialogfenster Daten hinzufügen wird geöffnet.
2. Geben Sie im Feld Entitäten suchen die ersten Buchstaben des Namens Ihres Integrations-Konnektors ein, z.B. sample-connector.
3. Wählen Sie in den Suchergebnissen den Integrations-Konnektor aus. Die Dienste, die für diese Einheit zur Verfügung stehen, werden auf der linken Seite angezeigt.
4. Suchen Sie diese Dienste, und klicken Sie dann auf , um die einzelnen Dienste auszuwählen:
Search_Get_SavedSearches
ExecuteSavedSearch
GetViewableLinks
Die Dienste werden der Liste unter Ausgewählte Dienste hinzugefügt.
5. Aktivieren Sie unter Ausgewählte Dienste für Search_Get_SavedSearches das Kontrollkästchen Mashup geladen?. Mit dieser Einstellung werden gespeicherte Suchen aus Windchill angezeigt, sobald das Mashup geladen wurde.
6. Klicken Sie auf Fertig und dann auf Speichern, um das Mashup im derzeitigen Stadium zu speichern.
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 im Bereich Daten unter Search_Get_SavedSearches den Abschnitt Zurückgegebene Daten.
2. Ziehen Sie Alle Daten in das Liste-Widget. Es werden alle Daten aus einer gespeicherten Suche zurückgegeben.
3. Wählen Sie für Bindendes Ziel auf auswählen die Option Daten aus. Die Verbindung wurde hergestellt. 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 auf der Registerkarte Widget-Eigenschaften auf der linken Seite des Mashup Builder die folgenden Parameter fest:
AutoSelectFirstRow: Ausgewählt
DisplayField: name
ValueField: objectid
DisplayName: Geben Sie Gespeicherte Suchen ein.
* 
Klicken Sie außerhalb des Textfelds, um jede Entität zu speichern.
5. Stellen Sie sicher, dass Search_Get_SavedSearches auf der Registerkarte Daten weiterhin ausgewählt ist. Fügen Sie auf der Registerkarte Dateneigenschaften diese Werte in der Spalte Wert hinzu:
$filter: scope ne null
$select: name
6. Klicken Sie ganz oben auf Speichern.
Daten zwischen Diensten binden
Einige der Dienste basieren auf Daten von einem anderen Dienst. Beispiel: Der Benutzer wählt eine gespeicherte Suche aus der Liste aus und möchten diese ausführen. In den nächsten Schritten erstellen wir Verbindungen zwischen den Diensten. Dieser Vorgang wird "Binden" genannt.
1. Erweitern Sie Parameters unter ExecuteSavedSearch.
2. Erweitern Sie unter Search_Get_SavedSearches den Knoten Zurückgegebene Daten 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 Search_Get_SavedSearches aus. Im unteren rechten Bereich auf der Registerkarte Dateneigenschaften werden die Ereignisse angezeigt.
5. Ziehen Sie jetzt SelectedRowsChanged aus dem Bereich Dateneigenschaften in ExecuteSavedSearch.
Diese Verbindung führt den ExecuteSavedSearch-Dienst aus, wenn der Benutzer eine Zeile in der Liste auswählt.
Binden Sie für die nächste Verbindung Daten an das Raster und das ThingView-Widget.
1. Erweitern Sie auf der Registerkarte Daten im oberen Bereich ExecuteSavedSearch und ziehen Sie anschließend die Option Alle Daten in das Raster-Widget.
2. Wählen Sie zum Binden der Daten unter Bindendes Ziel auf auswählen die Option Daten aus.
3. Wenn Sie die Anzeige der Spalten ändern möchten, bewegen Sie im Raster-Widget die Maus über , und klicken Sie dann auf Widget konfigurieren. Das Dialogfenster Widget konfigurieren wird geöffnet. Sie können die Reihenfolge, die Formatierung, die Anzeige sowie andere Attribute formatieren. Klicken Sie anschließend auf Fertig.
3D-Darstellung einer Struktur anzeigen
Wir binden die Struktur an das ThingView Widget, um den anzeigbaren Bereich zur Aufgabe hinzuzufügen.
1. Erweitern Sie ExecuteSavedSearch und dann Ausgewählte Zeilen. Erweitern Sie anschließend GetViewableLinks.
2. Ziehen Sie die Ausgabe objectId aus ExecuteSavedSearch in die oid des Eingabeparameters GetViewableLinks.
3. Erweitern Sie GetViewableLinks, und erweitern Sie dann Alle Daten. Ziehen Sie den structure-Ausgabeparameter auf das ThingView-Widget. Damit wird die Produktstruktur im ThingView Widget angezeigt.
4. Wählen Sie unter Bindendes Ziel auswählenProductToView aus.
5. Wählen Sie ExecuteSavedSearch aus. Die Ereignisse werden unten auf der Registerkarte Dateneigenschaften angezeigt.
6. Ziehen Sie das Ereignis SelectedRowsChanged in GetViewableLinks im oberen Bereich. Dadurch wird die Visualisierungsobjekt-Struktur aktualisiert, wenn der Benutzer eine andere Zeile im Raster auswählt.
7. Klicken Sie auf Speichern.
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
Search_Get_SavedSearches
GetViewableLinks
Neue Aufgabe anzeigen
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:
Widgets
Data Services and Linking
Advanced Grid Widgets Extension
3D-Visualisierung zu Aufgaben hinzufügen