Personnalisation avancée > Création d'une nouvelle tâche à partir de zéro pour ThingWorx Navigate
  
Création d'une nouvelle tâche à partir de zéro pour ThingWorx Navigate
Eléments fondamentaux sur lesquels repose une tâche
Une tâche repose sur plusieurs éléments de base :
Application composite : l'interface utilisateur de la tâche.
Services : script Java ou Java qui exécute les actions. Les services se trouvent sur ptc-windchill-integration-connector.
Windchill : la source de vos données.
Utilisez ThingWorx Composer pour créer l'application composite et la connecter aux services.
Exemple : création d'une nouvelle tâche
Dans les sections ci-dessous, nous allons voir comment créer une nouvelle tâche de bout en bout dans ThingWorx Composer. Dans notre exemple de tâche, les utilisateurs recherchent des données Windchill et reçoivent les résultats dans un tableau. Lorsqu'ils sélectionnent un élément dans le tableau, ils peuvent voir plusieurs propriétés dans un tableau ainsi qu'une représentation 3D interactive de l'élément. Ils peuvent cliquer sur un lien pour ouvrir la représentation dans Creo View. Voici à quoi la tâche ressemblera une fois terminée :
Cet exemple vous montre comment combiner les différentes composantes d'une tâche dans une application composite de travail. Vous aurez peut-être constaté que de nombreux services utiles pour votre organisation sont déjà inclus dans l'application composite de démonstration et ptc-windchill-integration-connector.
Par conséquent, vous pouvez assembler plusieurs tâches personnalisées en utilisant uniquement l'interface utilisateur de ThingWorx et ces services prêts à l'emploi. Si vous avez besoin d'écrire vos propres services, vous serez peut-être intéressé par les instructions que nous avons préparées pour certains services couramment utilisés. Consultez le guide de Windchill Extension à la page Documents de référence sur le site de PTC.
Mais tout d'abord, créons notre exemple de tâche.
Planifier la tâche
Il est utile de planifier les fonctionnalités et la mise en page de votre tâche avant de commencer. Vous saurez ainsi quels sont les services dont vous avez besoin, les panneaux nécessaires pour chaque service et comment ils se présenteront. Une fois que vous disposez de votre plan, vous pouvez commencer à assembler les services requis sur le connecteur. Passez à la section suivante pour suivre la procédure.
Dupliquer le connecteur d'intégration et l'entité de média
1. A gauche, dans l'onglet Parcourir, sous VISUALISATION, sélectionnez Médias. La liste des entités de média s'ouvre à droite.
2. Cochez la case à cocher en regard de ptc-windchill-integration-connector-proxy, puis cliquez sur Dupliquer. La fenêtre Nouveau média s'ouvre à droite, avec les paramètres de ptc-windchill-integration-connector-proxy :
3. Définissez un nom pour votre nouvelle entité de média. Pour cet exemple, utilisons sample-connector-proxy.
* 
Assurez-vous que les noms de l'entité de média et du connecteur d'intégration sont liés :
<connector_name>
<connector_name>-proxy
4. Cliquez sur Enregistrer. L'entité de média est dupliquée.
5. Ensuite, nous allons dupliquer le connecteur d'intégration. A gauche, dans l'onglet Parcourir, sous MODELISATION, sélectionnez Connecteurs d'intégration. La liste des connecteurs d'intégration s'ouvre à droite.
6. Cochez la case à cocher en regard de ptc-windchill-integration-connector, puis cliquez sur Dupliquer. La fenêtre Nouvel objet s'ouvre à droite, avec les paramètres de ptc-windchill-integration-connector :
Tags : PTC Navigate
Modèle d'objet de base : WindchillSwaggerConnector
Formes implémentées : WindchillContentProxyServiceProvider
7. Attribuez un nom à votre nouveau connecteur. Pour cet exemple, utilisons sample-connector. Cliquez ensuite sur Enregistrer.
8. Cliquez sur Services pour ouvrir les services associés au nouveau connecteur d'intégration. Recherchez le service Search_Get_SavedSearches, puis cliquez pour l'ouvrir et le modifier.
9. Sous Informations de routage, cliquez sur +Nouvelle carte API. La boîte de dialogue Nouvelle carte API s'ouvre.
10. Définissez ces propriétés :
ID de mappage : SavedSearch
Point de terminaison : findSavedSearch
Sélectionner une forme de données : ptc-savedSearch-demo-shape
11. Faites glisser l'attribut name depuis l'arborescence Point de terminaison jusqu'à l'attribut name de la forme de données.
12. Faites glisser id depuis l'arborescence Point de terminaison jusqu'à l'attribut objectid de la forme de données. Votre nouvelle carte API doit ressembler à ceci :
13. Cliquez sur Terminé, puis, dans la page de routage Search_Get_SavedSearches, cliquez sur Enregistrer et continuer.
14. Testez le service en saisissant les éléments suivants sous Entrées :
$filter : scope ne null
$select : name
Cliquez sur Exécuter. Sous Sortie, les recherches globales enregistrées dans Windchill apparaissent dans le tableau des résultats.
15. Cliquez sur Terminé. Le routage est mis à jour.
Ajouter un nouveau service local : exécution d'une recherche enregistrée
1. Sur la page Services, cliquez sur +Ajouter, puis sélectionnez Local (JavaScript). La page Nouveau service s'ouvre.
2. Dans Infos service, sous Nom, entrez ExecuteSavedSearch.
3. Cliquez sur la section Entrées, puis sur +Ajouter.
4. Dans la boîte de dialogue Nouvelle entrée, nommez cette entrée oid et assurez-vous que le Type de base est défini sur STRING.
5. Cliquez sur Terminé.
6. Dans la section Sortie, définissez les paramètres suivants :
Type de sortie : INFOTABLE
Forme de données : ptc-part-demo-shape
7. Dans l'outil Extraits, copiez ce code :
// 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. Cliquez sur Terminé.
Ajouter un nouveau service local : obtention de liens pour les objets visualisables
1. Une fois revenu dans la page Services, cliquez à nouveau sur Ajouter > Local (JavaScript) pour ajouter encore un nouveau service.
2. Sous Infos service, nommez le GetViewableLinks.
3. Cliquez sur Entrées, puis ajoutez cette entrée :
Nom : oid
Type de base : STRING
4. Cliquez sur Terminé.
5. Cliquez sur Sortie, puis définissez cette sortie :
INFOTABLE
Forme de données : ptc-creoview-info-shape
6. Dans l'outil Extraits, copiez ce code :
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;
}
}
Votre service ressemble à présent à ceci :
7. Cliquez sur Terminé. Le service est créé.
8. A présent, cliquez sur Save pour enregistrer votre connecteur.
Créer une nouvelle application composite et définir la mise en page
Une fois que le connecteur d'intégration est prêt, vous pouvez créer l'application composite pour la tâche.
1. Dans le menu supérieur de ThingWorx Composer, cliquez sur + NOUVEAU. Commencez à saisir application composite, puis sélectionnez Application composite dans la liste des propositions. La boîte de dialogue Nouvelle application composite s'ouvre.
2. Sous Vide, sélectionnez une mise en page Dynamique, puis cliquez sur OK.
3. Dans la page Informations générales, entrez un nom pour l'application composite, puis cliquez sur Enregistrer .
4. Cliquez sur Conception. Le Mashup Builder s'ouvre.
5. A partir de l'onglet Widgets, faites glisser l'option Mise en page vers l'espace de travail du Mashup Builder. La boîte de dialogue Configurer la mise en page s'ouvre.
* 
Vous pouvez saisir le nom dans la zone pour accéder rapidement au widget sans faire défiler la liste.
6. Cliquez sur Horizontal, puis, sous Options de mise en page, configurez cette mise en page :
Encadré à gauche : cochez la case
Colonnes : 1
7. Cliquez sur Terminé.
8. Faites glisser une autre mise en page dans la zone de la colonne (à droite). Définissez ces options :
Vertical
En-tête : cochez la case
Lignes : 2
9. Cliquez sur Terminé, puis sur Enregistrer.
Voici votre application composite telle qu'elle se présente alors :
Maintenant, nous allons ajouter des widgets.
Ajout de widgets à la mise en page
Vous avez maintenant la structure de base de votre tâche. Ensuite, ajoutez des widgets pour définir les composants visuels de chaque panneau.
1. Recherchez et faites glisser ces widgets vers les emplacements suivants :
Liste : encadré à gauche. Affiche la liste des recherches enregistrées dans Windchill. Lorsque vous sélectionnez un élément dans la liste, ses détails s'affichent dans le panneau Grille.
Grille : ligne supérieure de la mise en page de droite. Affiche les détails de l'élément sélectionné par l'utilisateur.
Panneau : ligne inférieure de la mise en page de droite. Affiche une visualisation 3D de l'article ou de l'assemblage, avec un aperçu des propriétés des articles sélectionnés.
2. Sélectionnez le widget Panneau, puis faites glisser un widget Affichage propriétés vers le côté gauche du panneau.
3. Faites glisser un widget ThingView vers le côté droit du même panneau, à côté du widget Affichage propriétés. Ce widget affiche une vue 3D de l'élément sélectionné.
4. Cliquez sur Enregistrer.
L'interface utilisateur de la tâche est prête. Passez à la section suivante pour ajouter des services.
Ajouter des services
Maintenant que nous avons positionné les widgets, l'interface utilisateur est créée. Nous allons à présent connecter des sources d'informations au moyen du connecteur d'intégration que nous avons créé précédemment, sample-connector. Dans l'étape suivante, nous allons ajouter la source de données et les services dont nous avons besoin pour faire fonctionner l'application composite.
1. Dans l'onglet Données, dans le panneau supérieur droit du Mashup Builder, cliquez sur pour ajouter une nouvelle source de données. La boîte de dialogue Ajouter des données s'ouvre.
2. Dans la zone Rechercher des entités, commencez à saisir le nom de votre connecteur d'intégration, par exemple sample-connector.
3. Dans les résultats, sélectionnez le connecteur d'intégration. Les services disponibles pour cette entité s'affichent sur la gauche.
4. Recherchez ces services, puis cliquez sur pour sélectionner chaque service :
Search_Get_SavedSearches
ExecuteSavedSearch
GetViewableLinks
Les services sont ajoutés à la liste sous Services sélectionnés .
5. Sous Services sélectionnés, pour Search_Get_SavedSearches, sélectionnez la case à cocher Application composite chargée ?. Ce paramètre affiche les recherches enregistrées dans Windchill dès que l'application composite est chargée.
6. Cliquez sur Terminé, puis cliquez sur Enregistrer pour enregistrer votre application composite.
Connexion des services aux widgets
Les services de données sont en place, ainsi que les éléments de l'interface utilisateur. Dans les étapes suivantes, nous allons connecter tous les éléments.
1. Dans le panneau Données, sous Search_Get_SavedSearches, développez la section Données renvoyées.
2. Faites glisser Toutes les données dans le widget Liste. Cela permet de renvoyer toutes les données trouvées dans une recherche enregistrée.
3. Sous Sélectionner une cible de liaison, sélectionnez Données. La connexion est établie. Un diagramme de connexion apparaît en bas de Composer.
* 
Cette étape remplace le script Java manuel côté client requis dans les versions antérieures de ThingWorx.
4. Ensuite, nous pouvons configurer le widget. Dans l'onglet Propriétés du widget, sur le côté gauche du Mashup Builder, définissez les paramètres suivants :
AutoSelectFirstRow : sélectionné
DisplayField : name
ValueField : objectid
DisplayName : saisissez Recherches enregistrées
* 
Cliquez en dehors de la zone de texte pour enregistrer chaque entité.
5. Assurez-vous que Search_Get_SavedSearches est toujours sélectionné dans l'onglet Données. Dans l'onglet Propriétés des données, ajoutez ces valeurs dans la colonne Valeur :
$filter : scope ne null
$select : name
6. En haut de la fenêtre, cliquez sur Enregistrer.
Liaison des données entre les services
Certains services reposent sur les données d'un autre service. Par exemple, lorsque l'utilisateur sélectionne une recherche enregistrée dans la liste, nous voulons qu'elle soit exécutée. Dans les étapes suivantes, nous allons créer ces connexions entre les services. Cette opération est désignée sous le terme de liaison.
1. Sous ExecuteSavedSearch, développez Paramètres.
2. Sous Search_Get_SavedSearches, développez Données renvoyées, puis développez Ligne(s) sélectionnée(s).
3. Sous Ligne(s) sélectionnée(s), faites glisser objectId vers oid, qui se trouve dans la section Paramètres de ExecuteSavedSearch.
La première connexion est terminée.
4. Pour la seconde connexion, sélectionnez Search_Get_SavedSearches. Les événements s'affichent dans l'onglet Propriétés des données, dans le panneau inférieur droit.
5. Ensuite, faites glisser SelectedRowsChanged du panneau Propriétés des données vers ExecuteSavedSearch.
Cette connexion exécute le service ExecuteSavedSearch lorsque l'utilisateur sélectionne une ligne dans la liste.
Pour la prochaine connexion, liez des données à la grille et au widget ThingView.
1. Développez ExecuteSavedSearch dans l'onglet Données, dans le panneau supérieur, puis faites glisser Toutes les données vers le widget de grille.
2. Pour lier les données, sous Sélectionner une cible de liaison, sélectionnez Données.
3. Si vous souhaitez modifier l'affichage des colonnes, positionnez le pointeur sur dans le widget de grille, puis cliquez sur Configurer le widget. La boîte de dialogue Configurer le widget s'ouvre. Vous pouvez configurer l'ordre, la mise en forme, l'affichage ou d'autres attributs, puis cliquez sur Terminé.
Afficher une représentation 3D de la structure
Nous allons lier la structure au widget ThingView pour ajouter notre zone visualisable à la tâche.
1. Développez ExecuteSavedSearch, puis développez Lignes sélectionnées. Ensuite, développez GetViewableLinks.
2. Faites glisser la sortie objectId de ExecuteSavedSearch vers l'oid du paramètre d'entrée GetViewableLinks.
3. Développez GetViewableLinks, puis développez Toutes les données. Faites glisser le paramètre de sortie Structure vers le widget ThingView. En effectuant cette opération, la structure du produit s'affiche dans le widget ThingView.
4. Sous Sélectionner une cible de liaison, sélectionnez ProductToView.
5. Sélectionnez ExecuteSavedSearch. Les événements apparaissent ci-dessous, sous l'onglet Propriétés des données.
6. Faites glisser l'événement SelectedRowsChanged vers GetViewableLinks dans le panneau supérieur. Cette opération entraîne la mise à jour de la structure visualisable lorsque l'utilisateur sélectionne une autre ligne dans la grille.
7. Cliquez sur Enregistrer.
Vérification des connexions
Voici les connexions que vous devriez voir à ce stade. Sélectionnez chaque entité ci-dessous pour voir sa connexion :
Widget Liste
ExecuteSavedSearch
Search_Get_SavedSearches
GetViewableLinks
Afficher la nouvelle tâche
Cliquez sur Afficher l'application composite. Votre nouvelle tâche s'ouvre. Félicitations !
Vous pouvez maintenant ajouter votre tâche à la page d'accueil de ThingWorx Navigate et effectuer sa personnalisation. Consultez la rubrique suivante, "Ajout d'une tâche personnalisée à votre page d'accueil".
Vous souhaitez en savoir plus ? Voici quelques ressources
Widgets
Services de données et liaisons
Advanced Grid Widgets Extension
Ajout de la visualisation 3D à votre tâche