Exemple : Création d'une tâche personnalisée pour ThingWorx Navigate
Dans les sections ci-dessous, nous allons étudier la création d'une tâche personnalisée du début à la fin 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 WindchillSwaggerConnector.
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, essayons de créer notre exemple de tâche.
Création d'une nouvelle application composite dans ThingWorx Composer
Il est utile de prévoir la mise en page de votre tâche avant de commencer. Vous devez savoir de combien de panneaux vous aurez besoin, quels services iront dans chacun d'eux et comment ils seront disposés.
1. Sous VISUALISATION, cliquez sur Applications composites, puis sur le bouton Nouveau. La boîte de dialogue Nouvelle application composite s'ouvre.
2. Sous Type d'application composite, sélectionnez Page.
3. Sous Options de mise en page, sélectionnez Dynamique, puis cliquez sur Terminé. L'éditeur de l'application composite s'ouvre.
4. Dans l'onglet Widgets, sélectionnez Panneau, puis faites glisser le panneau vers la zone d'aperçu de la mise en page. Faites glisser les widgets de panneau supplémentaires et ajustez leur dimension pour obtenir la mise en page souhaitée. Dans notre exemple, utilisez la mise en page illustrée par l'image ci-dessus.
Ajout de widgets aux panneaux
Vous avez maintenant la structure de base de votre tâche. Ensuite, nous allons ajouter des widgets pour définir les composants visuels de chaque panneau.
1. Faites glisser un widget dans chaque panneau. Dans cet exemple, nous allons ajouter les widgets suivants :
◦ Liste : 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.
◦ Zone de texte : offre aux utilisateurs la possibilité d'effectuer une autre recherche.
◦ Bouton : exécute la recherche.
◦ Grille : affiche les détails de l'élément sélectionné par l'utilisateur.
◦ Affichage propriétés : affiche les attributs de l'élément sélectionné dans le panneau Grille.
◦ Creo View : affiche une vue 3D de l'élément sélectionné.
◦ Lien : ouvre l'élément sélectionné dans l'application cliente Creo View.
Ajout de sources de données et de services
Maintenant que nous avons positionné les widgets, l'interface utilisateur est créée. Nous devons attribuer des sources d'informations aux widgets. Cet exemple de tâche utilise notre source de données prête à l'emploi, ptc-windchill-demo-thing. 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 de ThingWorx, cliquez sur le signe + 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 à taper la source de données dont vous avez besoin. Dans notre exemple, nous allons taper ptc-windchill.
3. Dans les résultats, sélectionnez la source de données. Dans cet exemple, il s'agit de ptc-windchill-demo-thing. Les services disponibles pour cette entité s'affichent sur la gauche.
4. Cliquez sur le bouton de flèche bleue pour ajouter les services dont vous avez besoin. Pour cet exemple d'application composite, nous allons sélectionner les services suivants :
◦ GetCreoViewData
◦ ExecuteSavedSearch
◦ ListSavedSearches
Dans cet exemple, nous voulons afficher les recherches enregistrées dans Windchill dès que l'application composite est chargée. Pour ce faire, sélectionnez la case à cocher Application composite chargée ? pour ListSavedSearches.
5. Une fois que vous avez sélectionné tous les services dont vous avez besoin, cliquez sur Terminé.
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 de Données, sous ListSavedSearches, développez la section de Données renvoyées.
2. Faites glisser Toutes les données dans le widget Liste. Cela va permettre de renvoyer toutes les données trouvées dans une recherche enregistrée.
3. Comme Cibles de liaison, sélectionnez Données. 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. Définissez les paramètres suivants dans le widget de liste :
◦ DisplayField : name
◦ ValueField : objectid
◦ Label : Recherches enregistrées
| Cliquez en dehors de la zone de texte pour enregistrer chaque entité. |
Liaison des données entre les services
Certains services reposent sur les données d'un autre service. Par exemple, lorsque nous sélectionnons 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, appelées liaisons. Nous allons également lier des services aux widgets, par exemple en connectant ExecuteSavedSearch à l'entrée d'un mot-clé dans la zone de recherche.
1. Sous ExecuteSavedSearch, développez Paramètres.
2. Sous ListSavedSearches, 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 ListSavedSearches.
5. Ensuite, faites glisser SelectedRowsChanged au bas du panneau vers ExecuteSavedSearch.
Nous allons maintenant connecter la fonctionnalité de recherche. L'entrée dans la zone de texte va se connecter au paramètre d'entrée Mot-clé et le bouton va se connecter au service pour obtenir les données.
1. Développez ExecuteSavedSearch, puis développez Paramètres.
2. Sélectionnez le widget de zone de texte, puis cliquez sur la flèche pour ouvrir la liste. Faites glisser Texte vers Mot-clé, sous ExecuteSavedSearch.
3. Une fois revenu dans le panneau de zone de recherche, sélectionnez le widget de bouton et, dans le menu déroulant, faites glisser Clicked vers ExecuteSavedSearch.
4. Ajoutons des étiquettes pour la zone de recherche et le bouton. Sélectionnez chaque élément, puis choisissez Etiquette dans le menu. Entrez un nom pour chaque entité, comme par exemple :
◦ Zone de texte : Eléments à rechercher
◦ Bouton : Rechercher
5. Enregistrez vos modifications.
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
ListSavedSearches
Affichage de la structure d'article sous forme de tableau
Pour afficher la structure d'article dans notre widget de tableau, vous allez connecter les données de structure d'article au widget de grille. Notez que dans cette étape, nous effectuons un glisser dans la direction opposée, c.-à-d. du service vers le widget.
1. Sous ExecuteSavedSearch, développez Données renvoyées, puis faites glisser Toutes les données vers le widget de grille.
2. Sous Sélectionner une cible de liaison, sélectionnez Données.
3. Maintenant que les données sont liées à la grille, nous allons configurer le tableau. Sélectionnez le widget de grille, puis choisissez Configurer les colonnes de la grille dans le menu.
4. Sous Configurer le widget, sélectionnez et réorganisez les propriétés à afficher.
5. Enregistrez vos modifications.
Affichage de l'objet visualisable lorsque l'élément est sélectionné
Notre tâche va afficher l'objet visualisable de l'élément que vous sélectionnez dans la grille. Pour configurer cela, connectons les données de structure au widget Creo View. Ensuite, nous pouvons définir le widget à mettre à jour dynamiquement lorsque l'utilisateur sélectionne un autre élément.
1. Sous le service GetCreoViewData, sous Données renvoyées, développez Toutes les données, puis sélectionnez structure. Faites-glisser la sélection vers le widget Creo View.
2. Sous Sélectionner une cible de liaison, sélectionnez ProductToView.
3. Pour configurer la mise à jour dynamique, sélectionnez ExecuteSavedSearch. Puis, dans le volet inférieur gauche, faites glisser SelectedRowsChanged vers le service GetCreoViewData.
4. Cliquez sur Enregistrer.
Ajout d'un lien pour ouvrir l'élément dans Creo View
Pour permettre aux utilisateurs d'ouvrir rapidement le fichier de l'objet visualisable 3D, nous allons ajouter un lien pour l'ouvrir dans Creo View. Pour utiliser ce service, les utilisateurs doivent avoir installé Creo View, ou doivent disposer d'un accès à Creo View Lite via Windchill.
1. Sous GetCreoViewData, développez Données renvoyées et Toutes les données.
2. Sélectionnez launchCreoViewUrl, puis faites-le glisser vers le widget de lien.
3. Sous Sélectionner une cible de liaison, sélectionnez SourceURL.
4. Vous devez également connecter l'ID d'objet Windchill de l'élément au service : sous GetCreoViewData, développez Paramètres.
5. Ensuite, sous ExecuteSavedSearch, développez Données renvoyées, puis Ligne(s) sélectionnée(s).
6. Sélectionnez objectId et faites-le glisser vers le paramètre oid sous GetCreoViewData.
7. Pour terminer, nous allons nommer le lien. Sélectionnez le widget de lien, puis choisissez Texte. Entrez le texte du lien, par ex. Afficher l'élément dans Creo View.
8. Cliquez sur Enregistrer.
Affichage des propriétés de l'élément sélectionné dans le tableau
Votre tableau de résultats de la recherche affiche certaines propriétés de l'élément. Pour ajouter une liste plus détaillée de propriétés, nous allons connecter le widget d'affichage des propriétés, puis nous allons sélectionner les propriétés à afficher.
1. Sous ExecuteSavedSearch, développez les Données renvoyées, puis sélectionnez Ligne(s) sélectionnée(s).
2. Faites glisser Ligne(s) sélectionnée(s) du service vers le widget d'affichage des propriétés.
3. Sous Sélectionner une cible de liaison, sélectionnez Données.
4. Maintenant que le widget d'affichage est connecté aux données, nous pouvons sélectionner les propriétés à afficher : sélectionnez le widget, puis cliquez sur la flèche dans le coin supérieur gauche.
5. Choisissez Configurer le widget dans le menu.
6. Sous Configurer le widget, sélectionnez et réorganisez les propriétés à afficher.
Nouvelle vérification des connexions
A ce stade, voici les connexions que vous devriez voir. Sélectionnez chaque entité ci-dessous pour voir ses connexions :
GetCreoViewData
ExecuteSavedSearch
ListSavedSearch
Affichage de la nouvelle tâche, après l'avoir nommée et enregistrée
Nous avons presque terminé. Dans ces dernières étapes, nous allons nommer et enregistrer l'application composite, puis afficher votre tâche ThingWorx Navigate personnalisée.
1. Cliquez sur Enregistrer.
2. Sous Informations générales, tapez un nom pour la tâche dans la zone Nom.
3. 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
