Personnaliser ThingWorx Navigate > Créer des tâches personnalisées > Utiliser des composants ThingWorx Navigate dans une tâche personnalisée > Personnaliser les composants > Créer des composants personnalisés
Créer des composants personnalisés
Comme décrit dans la rubrique Architecture de composant, chacun des composants ThingWorx Navigate est constitué de deux sous-composants, le sous-composant d'interface utilisateur et le sous-composant de logique métier. Le sous-composant de logique métier est également constitué de deux parties, la logique métier de base et l'implémentation de la logique métier, auxquelles nous allons faire référence dans cette rubrique, respectivement en tant que composant de base et implémentation.
En standard, chaque composant de base est fourni avec une ou plusieurs implémentations. Chaque implémentation est conçue pour afficher des informations spécifiques dans l'interface utilisateur. Pour afficher des informations différentes, vous pouvez personnaliser votre composant en créant une implémentation personnalisée. Par exemple, en standard, le composant de base Identité d'élément est fourni avec deux implémentations, identité d'article et identité de tâche. Vous pouvez également créer une implémentation personnalisée du composant de base Identité d'élément, comme l'identité du document.
La création d'une implémentation personnalisée pour un composant implique l'extension d'un composant de base existant ou d'une implémentation existante, puis le remplacement des services nécessaires. Les sections ci-dessous contiennent des étapes détaillées et un exemple.
Créer une implémentation personnalisée en étendant un composant de base 
Pour créer une implémentation personnalisée à partir d'un composant de base existant, procédez comme suit :
1. Choisissez un composant de base existant à utiliser comme point de départ pour votre implémentation personnalisée. Recherchez le composant de base dans le tableau suivant et notez son modèle d'objet et son projet, en fonction de votre version de ThingWorx Navigate. Vous aurez besoin de ces informations ultérieurement.
Composant de base
Modèle d'objet
Projet (ThingWorx Navigate 9.0)
Projet (ThingWorx Navigate 9.1 et versions ultérieures)
Attributs
PTC.Nav.AttributesBusinessLogicThingTemplate
PTC.Nav.AttributesProject
PTC.Nav.AttributesBusinessLogicProject
Identité d'élément
PTC.Nav.ItemIdentityBusinessLogicThingTemplate
PTC.Nav.ItemIdentityProject
PTC.Nav.ItemIdentityBusinessLogicProject
Liste des éléments
PTC.Nav.ItemListBusinessLogicThingTemplate
PTC.Nav.ItemListProject
PTC.Nav.ItemListBusinessLogicProject
Progression
PTC.Nav.ProgressBusinessLogicThingTemplate
PTC.Nav.ProgressProject
PTC.Nav.ProgressBusinessLogicProject
Vignettes
PTC.Nav.TilesBusinessLogicThingTemplate
PTC.Nav.TilesProject
PTC.Nav.TilesBusinessLogicProject
2. Créez un projet pour votre implémentation personnalisée. Sous Dépendances du projet, entrez le projet noté à l'étape 1. Enregistrez le projet.
3. Créez un modèle d'objet pour votre implémentation personnalisée. Sous Projet, entrez le projet créé à l'étape 2. Sous Modèle d'objet de base, entrez le modèle d'objet noté à l'étape 1.
4. Créez un objet pour votre implémentation personnalisée. Sous Projet, entrez le projet créé à l'étape 2. Sous Modèle d'objet de base, entrez le modèle d'objet créé à l'étape 3.
5. Dans l'objet que vous avez créé, cliquez sur l'onglet Services. Cliquez ensuite sur pour remplacer le service GetImplementationConfigurationVersion et définir une version pour votre implémentation. Vous pouvez utiliser n'importe quelle valeur pour cette version. Enregistrez l'objet.
6. Identifiez les services que vous devez remplacer pour votre implémentation personnalisée. Pour plus d'informations sur les services disponibles pour les composants standard, recherchez la rubrique correspondant au composant que vous étendez sous Composants disponibles, puis consultez la table Services de personnalisation.
7. Dans le modèle d'objet que vous avez créé, cliquez sur l'onglet Services. Cliquez ensuite sur pour remplacer les services nécessaires. Il est recommandé de remplacer le service GetConfigurations avant d'en remplacer d'autres.
Dans le code du service GetConfigurations, définissez la version pour implementationConfigurationVersion pour qu'elle corresponde à la version définie pour GetImplementationConfigurationVersion à l'étape 5. Cette étape est importante pour éviter tout problème de compatibilité dans les versions ultérieures de ThingWorx Navigate.
8. Remplacez les services nécessaires restants. Lors du remplacement d'un service qui reçoit la configuration en tant que paramètre, appelez d'abord le service Migrate dans votre code et passez les versions de base et d'implémentation.
◦ Pour déterminer la valeur à utiliser pour targetBaseVersion dans le service Migrate, exécutez le service GetBaseConfigurationVersion sur l'objet que vous avez créé à l'étape 4. N'appelez pas le code de service GetBaseConfigurationVersion pour renvoyer sa valeur.
◦ Lors de la définition de targetImplementationVersion dans le service Migrate, utilisez la version que vous avez définie précédemment à l'étape 5.
Pour plus d'informations sur l'appel du service Migrate, consultez la rubrique Versions et migration.
* 
Lors du remplacement de services, ne remplacez pas les services de catégorie PTC.Nav.Private.
9. Enregistrez le modèle d'objet. Votre implémentation personnalisée est désormais prête à l'emploi. Pour utiliser l'implémentation, créez une application composite. Ajoutez le composant de base pour l'implémentation à l'application composite, puis cliquez sur . Dans le menu déroulant Type de configuration, sélectionnez la configuration qui appartient à votre implémentation personnalisée.
Créer une implémentation personnalisée en étendant une implémentation 
Pour créer une implémentation personnalisée à partir d'une implémentation existante, procédez comme suit :
1. Choisissez une implémentation existante à utiliser comme point de départ pour votre implémentation personnalisée.
◦ Si vous utilisez une implémentation standard, recherchez-la dans le tableau suivant et notez son modèle d'objet et son projet, en fonction de votre version de ThingWorx Navigate. Vous aurez besoin de ces informations ultérieurement.
◦ Si vous utilisez une implémentation personnalisée, notez son modèle d'objet et son projet. Vous aurez besoin de ces informations ultérieurement.
Implémentation
Modèle d'objet
Projet (ThingWorx Navigate 9.0)
Projet (ThingWorx Navigate 9.1 et versions ultérieures)
Activité
PTC.Nav.ActivityBusinessLogicThingTemplate
PTC.Nav.ItemListProject
PTC.Nav.ActivityBusinessLogicProject
Eléments affectés
PTC.Nav.AffectedItemsBusinessLogicThingTemplate
PTC.Nav.ItemListProject
PTC.Nav.AttachmentsBusinessLogicProject
Pièces jointes
PTC.Nav.AttachmentsBusinessLogicThingTemplate
PTC.Nav.ItemListProject
PTC.Nav.AffectedItemsBusinessLogicProject
Attributs générique
PTC.Nav.AttributesGenericBusinessLogicThingTemplate
PTC.Nav.AttributesProject
PTC.Nav.AttributesGenericBusinessLogicProject
Identité d'article
PTC.Nav.PartIdentityBusinessLogicThingTemplate
PTC.Nav.ItemIdentityProject
PTC.Nav.PartIdentityBusinessLogicProject
Identité des tâches
PTC.Nav.TaskIdentityBusinessLogicThingTemplate
PTC.Nav.ItemIdentityProject
PTC.Nav.TaskIdentityBusinessLogicProject
Progression de la tâche
PTC.Nav.TaskProgressBusinessLogicThingTemplate
PTC.Nav.ProgressProject
PTC.Nav.TaskProgressBusinessLogicProject
Tâches
PTC.Nav.TaskListBusinessLogicThingTemplate
PTC.Nav.ItemListProject
PTC.Nav.TaskListBusinessLogicProject
Vignettes génériques
PTC.Nav.TilesGenericBusinessLogicThingTemplate
PTC.Nav.TilesProject
PTC.Nav.TilesGenericBusinessLogicProject
2. Créez un projet pour votre implémentation personnalisée. Sous Dépendances du projet, entrez le projet noté à l'étape 1. Enregistrez le projet.
3. Créez un modèle d'objet pour votre implémentation personnalisée. Sous Projet, entrez le projet créé à l'étape 2. Sous Modèle d'objet de base, entrez le modèle d'objet noté à l'étape 1.
4. Créez un objet pour votre implémentation personnalisée. Sous Projet, entrez le projet créé à l'étape 2. Sous Modèle d'objet de base, entrez le modèle d'objet créé à l'étape 3.
5. Dans l'objet que vous avez créé, cliquez sur l'onglet Services.
◦ Cliquez sur pour remplacer GetBaseMigrationVersion par votre version de ThingWorx Navigate, par exemple 9.0.0 ou 9.1.0.
◦ Cliquez sur pour remplacer GetImplementationConfigurationVersion par votre version de ThingWorx Navigate, par exemple 9.0.0 ou 9.1.0.
6. Enregistrez l'objet.
7. Identifiez les services que vous devez remplacer pour votre implémentation personnalisée. Pour plus d'informations sur les services disponibles pour les composants standard, recherchez la rubrique correspondant au composant que vous étendez sous Composants disponibles, puis consultez la table Services de personnalisation.
8. Dans le modèle d'objet que vous avez créé, cliquez sur l'onglet Services. Cliquez ensuite sur pour remplacer les services nécessaires. Il est recommandé de remplacer le service GetConfigurations avant d'en remplacer d'autres.
* 
• Lors du remplacement du service GetConfigurations, la modification de la structure de configuration par rapport à sa structure standard n'est pas prise en charge. Ne modifiez les valeurs que pour des propriétés JSON individuelles. Pour plus d'informations, consultez la rubrique Exemples de modifications apportées aux propriétés de configuration.
• Dans la configuration, assurez-vous de définir la valeur de la propriété implementationConfigurationVersion sur la valeur renvoyée par le service GetImplementationConfigurationVersion.
9. Remplacez les services nécessaires restants. Lors du remplacement d'un service qui reçoit la configuration en tant que paramètre, appelez d'abord le service Migrate dans votre code et passez les versions de base et d'implémentation.
◦ Pour déterminer la version de base à transmettre au service Migrate, exécutez le service GetBaseConfigurationVersion sur l'objet que vous avez créé à l'étape 4. N'appelez pas le service GetBaseConfigurationVersion pour renvoyer sa valeur.
◦ Pour déterminer la version d'implémentation à transmettre au service Migrate, exécutez le service GetImplementationConfigurationVersion sur l'objet que vous avez créé à l'étape 4. N'appelez pas le service GetImplementationConfigurationVersion pour renvoyer sa valeur.
Pour plus d'informations sur l'appel du service Migrate, consultez la rubrique Versions et migration.
* 
Lors du remplacement de services, ne remplacez pas les services de catégorie PTC.Nav.Private.
10. Enregistrez le modèle d'objet. Votre implémentation personnalisée est désormais prête à l'emploi. Pour utiliser l'implémentation, créez une application composite. Ajoutez le composant de base pour l'implémentation à l'application composite, puis cliquez sur . Dans le menu déroulant Type de configuration, sélectionnez la configuration qui appartient à votre implémentation personnalisée.
Exemple : création d'une implémentation de liste d'articles 
L'exemple suivant montre comment créer une implémentation personnalisée appelée Liste d'articles, qui est une implémentation du composant de base Liste des éléments. La liste d'articles reçoit un article en entrée et renvoie le premier niveau des articles qu'elle contient.
* 
L'exemple suivant est conçu pour fonctionner dans ThingWorx Navigate 9.0, et les valeurs de version utilisées dans les extraits de code sont correctes pour cette version de ThingWorx Navigate. Pour suivre cet exemple dans une version ultérieure de ThingWorx Navigate, assurez-vous d'utiliser les valeurs de version correctes dans votre code.
1. Dans ThingWorx Composer, créez un nouveau projet nommé Demo.PartsListProject.
◦ Dans ThingWorx Navigate 9.0, entrez PTC.Nav.ItemListProject sous Dépendances du projet.
◦ Dans ThingWorx Navigate 9.1 et versions ultérieures, entrez PTC.Nav.ItemListBusinessLogicProject sous Dépendances du projet.
2. Créez un nouveau modèle d'objet nommé Demo.PartsListBusinessLogicThingTemplate. Définissez le Projet sur Demo.PartsListProject et le Modèle d'objet de base sur PTC.Nav.ItemListBusinessLogicThingTemplate.
3. Créez un élément nommé Demo.PartsListBusinessLogicThing. Définissez le Projet sur Demo.PartsListProject et le Modèle d'objet de base sur Demo.PartsListBusinessLogicThingTemplate.
4. Cliquez sur l'onglet Services et recherchez le service GetImplementationConfigurationVersion. Cliquez sur pour remplacer le service et définir la version sur 1.0.0 à l'aide du code suivant :
result = "1.0.0";
Cliquez sur Terminé. Cliquez ensuite sur Enregistrer pour enregistrer l'objet.
5. Consultez la table Services de personnalisation de la Liste des éléments et identifiez les services qui doivent être remplacés dans le modèle d'objet. Pour cette implémentation personnalisée, nous devons remplacer trois services :
◦ GetConfigurations : ce service renvoie les configurations disponibles pour l'implémentation. Nous allons le modifier pour définir la configuration de la liste d'articles.
◦ GetImplementationLabel : ce service renvoie le nom de l'implémentation tel qu'il apparaît dans Mashup Builder. Nous allons le définir pour afficher le nom Parts List Demo.
◦ GetItems : ce service reçoit l'entrée et la configuration sous forme de paramètres et renvoie un JSON au format CCO avec les données à afficher dans l'interface utilisateur Liste des éléments. Nous allons le définir pour qu'il renvoie les articles de premier niveau d'un article donné, ainsi que les attributs des articles de premier niveau.
6. Ouvrez le modèle d'objet Demo.ItemListBusinessLogicThingTemplate. Cliquez sur l'onglet Services.
7. Cliquez·sur· pour remplacer le service GetConfigurations. Collez le code suivant dans le service. Ce code inclut une configuration pour la liste d'articles qui est étiquetée comme Parts List à la fois dans Mashup Builder et dans l'interface utilisateur ThingWorx Navigate.
result = {
"partsList": {
"label": "Parts List",
"configuration": {
"selectionType": {
"selectedKey": "single"
},
"waitForInput": {
"value": true
},
"actionBarConfiguration": {
"value": {
"actionBarConfigurationJSON": {
"value": ""
}
}
},
"baseConfigurationVersion": {
"value": "9.0.0"
},
"implementationConfigurationVersion": {
"value": "1.0.0"
},
"defaultSortFields": {
"selectedValues": {
"data": [{
"itemListsData": [{
"items": [{
"additionalData": {
"itemListDefaultSortFieldDefinition": {
"defaultSortDirection": {
"selectedKey": "asc"
}
}
},
"id": "Name"
}
],
"objectType": "PTC.ProdMgmt.Part"
}
],
"adapter": {
"instanceName": "windchill",
"thingName": "PTC.WCAdapter"
}
}
]
}
},
"attributes": {
"selectedValues": {
"data": [{
"itemListsData": [{
"items": [{
"id": "Name",
"ordinal": 1
}, {
"id": "State#Display",
"ordinal": 2
}, {
"id": "Version",
"ordinal": 3
}, {
"id": "Number",
"ordinal": 0
}, {
"id": "ID",
"ordinal": 4
}
],
"objectType": "PTC.ProdMgmt.Part"
}
],
"adapter": {
"instanceName": "windchill",
"thingName": "PTC.WCAdapter"
}
}
]
},
"inTailoring": false
},
"label": {
"value": "Parts List"
},
"showExportAction": {
"value": true
},
"enableSearch": {
"additionalData": {
"itemListSearchDefinition": {
"searchHintText": {
"value": "Find"
}
}
},
"value": true
},
"maxNumberOfRowsInGrid": {
"inTailoring": false,
"value": 50
}
}
}
};
Voici un autre exemple de code pour GetConfigurations qui contient deux configurations au lieu d'une. La première configuration est identique à celle du code ci-dessus. La deuxième configuration concerne une mini-version de la liste d'articles. Elle n'affiche que trois attributs et un maximum de cinq lignes. Elle est étiquetée comme Parts List mini dans Mashup Builder et Parts List dans l'interface utilisateur ThingWorx Navigate.
result = {
"partsList": {
"label": "Parts List",
"configuration": {
"selectionType": {
"selectedKey": "single"
},
"waitForInput": {
"value": true
},
"actionBarConfiguration": {
"value": {
"actionBarConfigurationJSON": {
"value": ""
}
}
},
"baseConfigurationVersion": {
"value": "9.0.0"
},
"implementationConfigurationVersion": {
"value": "1.0.0"
},
"defaultSortFields": {
"selectedValues": {
"data": [{
"itemListsData": [{
"items": [{
"additionalData": {
"itemListDefaultSortFieldDefinition": {
"defaultSortDirection": {
"selectedKey": "asc"
}
}
},
"id": "Name"
}
],
"objectType": "PTC.ProdMgmt.Part"
}
],
"adapter": {
"instanceName": "windchill",
"thingName": "PTC.WCAdapter"
}
}
]
}
},
"attributes": {
"selectedValues": {
"data": [{
"itemListsData": [{
"items": [{
"id": "Name",
"ordinal": 1
}, {
"id": "State#Display",
"ordinal": 2
}, {
"id": "Version",
"ordinal": 3
}, {
"id": "Number",
"ordinal": 0
}, {
"id": "ID",
"ordinal": 4
}
],
"objectType": "PTC.ProdMgmt.Part"
}
],
"adapter": {
"instanceName": "windchill",
"thingName": "PTC.WCAdapter"
}
}
]
},
"inTailoring": false
},
"label": {
"value": "Parts List"
},
"showExportAction": {
"value": true
},
"enableSearch": {
"additionalData": {
"itemListSearchDefinition": {
"searchHintText": {
"value": "Find"
}
}
},
"value": true
},
"maxNumberOfRowsInGrid": {
"inTailoring": false,
"value": 50
}
}
},
"partsListMini": {
"label": "Parts List mini",
"configuration": {
"selectionType": {
"selectedKey": "single"
},
"waitForInput": {
"value": true
},
"actionBarConfiguration": {
"value": {
"actionBarConfigurationJSON": {
"value": ""
}
}
},
"baseConfigurationVersion": {
"value": "9.0.0"
},
"implementationConfigurationVersion": {
"value": "1.0.0"
},
"defaultSortFields": {
"selectedValues": {
"data": [{
"itemListsData": [{
"items": [{
"additionalData": {
"itemListDefaultSortFieldDefinition": {
"defaultSortDirection": {
"selectedKey": "asc"
}
}
},
"id": "Name"
}
],
"objectType": "PTC.ProdMgmt.Part"
}
],
"adapter": {
"instanceName": "windchill",
"thingName": "PTC.WCAdapter"
}
}
]
}
},
"attributes": {
"selectedValues": {
"data": [{
"itemListsData": [{
"items": [{
"id": "Name",
"ordinal": 1
}, {
"id": "Version",
"ordinal": 2
}, {
"id": "Number",
"ordinal": 0
}
],
"objectType": "PTC.ProdMgmt.Part"
}
],
"adapter": {
"instanceName": "windchill",
"thingName": "PTC.WCAdapter"
}
}
]
},
"inTailoring": false
},
"label": {
"value": "Parts List"
},
"showExportAction": {
"value": true
},
"enableSearch": {
"additionalData": {
"itemListSearchDefinition": {
"searchHintText": {
"value": "Find"
}
}
},
"value": true
},
"maxNumberOfRowsInGrid": {
"inTailoring": false,
"value": 5
}
}
}
};
Cliquez sur Terminé après avoir ajouté le code.
8. Remplacer le service GetImplementationLabel. Définissez l'étiquette d'implémentation à l'aide du code suivant :
result = "Parts List Demo";
Cliquez sur Terminé.
9. Le service GetItems récupérera les articles de premier niveau à partir de Windchill en procédant comme suit :
a. Convertissez la partie d'attributs de la configuration en structure CCO à l'aide du service ConvertAttributesToCCO, que nous allons créer.
b. Transmettez le JSON résultant au format CCO vers le service GetRelatedItems sur PTC.WCAdapter. Ce service récupère les données en tant qu'objets UsageLink.
c. Convertissez les objets UsageLink en objets Part, à l'aide du service ConvertUsageLinkToPart, que nous allons créer.
Avant de remplacer le service GetItems, il est nécessaire de créer les services ConvertAttributesToCCO et ConvertUsageLinkToPart.
10. Créez un nouveau service et nommez-le ConvertAttributesToCCO. Sous Entrées, ajoutez les entrées suivantes :
◦ configuration, avec le Type de base JSON
◦ attributesPrefix, avec le Type de base STRING
◦ replaceObjectType, avec le Type de base STRING
Sous Sortie, sélectionnez JSON dans le menu déroulant.
11. Collez le code suivant dans le service ConvertAttributesToCCO :
let attributesData = configuration.attributes.selectedValues;
attributesPrefix = attributesPrefix || "";
let objectType = replaceObjectType || attributesData.data[0].itemListsData[0].objectType;
attributesData.data[0].itemListsData[0].objectType = objectType;
let items = attributesData.data[0].itemListsData[0].items;
let newItems = [];
let newObj = {};
let hasID = false;
//convert to CCO
for(var i = 0; i < items.length; i++) {
let item = items[i];
if (item.id === 'ID') {
hasID = true;
}
newObj[attributesPrefix + item.id] = {"value":""};
}
//add ID if needed
if (!hasID) {
newObj[attributesPrefix + 'ID'] = {"value":""};
}
newItems.push (newObj);
attributesData.data[0].itemListsData[0].items = newItems;
//create date
var dateValue = new Date();
var y = dateValue.getFullYear();
var mo = dateValue.getMonth()+1;
if(mo<10) {mo='0'+mo;}
var d = dateValue.getDate();
if(d<10) {d='0'+d;}
//create time
var h = dateValue.getHours();
if(h<10) {h='0'+h;}
var mi = dateValue.getMinutes();
if(mi<10) {mi='0'+mi;}
var s = dateValue.getSeconds();
if(s<10) {s='0'+s;}
var ms = dateValue.getMilliseconds();
if(ms<10) {ms='00'+ms;} else {if(ms>=10 && ms<100) {ms='0'+ms;}}
attributesData.timeStamp = y + "-" + mo + "-" + d + " " + h + ":" + mi + ":" + s + "." + ms;
attributesData.version = "";
attributesData.statusMessage = "OK";
attributesData.status = "200";
result = attributesData;
Cliquez sur Terminé.
12. Créez un nouveau service et nommez-le ConvertUsageLinkToPart. Sous Entrées, ajoutez les entrées suivantes :
◦ usageLinkCCO, avec le Type de base JSON
Sous Sortie, sélectionnez JSON dans le menu déroulant.
13. Collez le code suivant dans le service ConvertUsageLinkToPart :
let itemListsData = usageLinkCCO.data[0].itemListsData[0];
let tempMetadata = itemListsData.metadata;
let items = itemListsData.items;
//convert metadata
delete tempMetadata.ID;
let newMetadata = {};
for (var key in tempMetadata) {
let newKey = key.replace(/^(Uses\|)/,"");
newMetadata[newKey] = tempMetadata[key];
}
newMetadata['id'] = newMetadata.ID;
itemListsData['metadata'] = newMetadata;
//convert Items
let newItems = [];
for (var i=0 ; i<items.length ; i++) {
let item = items[i];
let newItem = {};
for (key in item) {
let newKey = key.replace(/^(Uses\|)/,"");
newItem[newKey] = item[key];
}
newItem['id'] = newItem.ID;
newItems.push(newItem);
}
itemListsData['items'] = newItems;
itemListsData['objectType'] = 'PTC.ProdMgmt.Part';
//update CCO
let partsListCCO = usageLinkCCO;
partsListCCO.data[0].itemListsData = [itemListsData];
result = partsListCCO;
Cliquez sur Terminé.
14. Cliquez·sur· pour remplacer le service GetItems. Collez le code suivant dans le service GetItems :
var migratedConfig = me.Migrate({
targetImplementationVersion: "1.0.0" /* STRING */,
data: configuration /* JSON */,
migrationType: "Configuration" /* STRING */,
targetBaseVersion: "9.0.0" /* STRING */
});
var attributesConfigurationCCO = me.ConvertAttributesToCCO({
configuration:migratedConfig /* JSON */,
attributesPrefix: "Uses|" /* STRING */,
replaceObjectType: "PTC.ProdMgmt.PartUse" /* STRING */
});
// result: JSON
var tempResult = Things["PTC.WCAdapter"].GetRelatedItems({
item: input /* JSON */,
relation: {path:"Uses"} /* JSON */,
attributes: attributesConfigurationCCO /* JSON */
});

var convertedResults = me.ConvertUsageLinkToPart({
usageLinkCCO:tempResult /* JSON */
});
var result = convertedResults;
Cliquez sur Terminé. Cliquez ensuite sur Enregistrer pour enregistrer le modèle d'objet.
L'implémentation personnalisée Liste d'articles et sa configuration sont désormais créées et prêtes à l'emploi dans Mashup Builder. Pour utiliser l'implémentation, ajoutez le composant de base Liste des éléments à une application composite, puis cliquez sur . Dans le menu déroulant Type de configuration, sélectionnez la configuration de liste d'articles qui est étiquetée Parts Lists Demo - Parts List.
Si vous utilisez la liste d'articles pour créer l'application composite illustrée dans la vidéo ci-dessous, voici du code supplémentaire :
• Code utilisé pour configurer le composant Attributes :
{
"layout": {
"selectedKey": "horizontal",
"additionalData": {
"dimensionDefinition": {
"maxHeight": {
"value": 200,
"version": "1.0.0"
},
"maxWidth": {
"value": 200,
"version": "1.0.0"
}
}
},
"version": "1.0.0"
},
"attributes": {
"sets": [{
"data": {
"selectedValues": {
"data": [{
"itemListsData": [{
"items": [{
"id": "ModifiedBy",
"ordinal": 0
}, {
"id": "GatheringPart",
"ordinal": 1
}, {
"id": "Latest",
"ordinal": 2
}, {
"id": "FolderName",
"ordinal": 3
}
],
"objectType": "PTC.ProdMgmt.Part"
}
],
"adapter": {
"instanceName": "windchill",
"thingName": "PTC.WCAdapter"
}
}
]
}
},
"name": ""
}
],
"inTailoring": true,
"filteredValues": {
"data": [{
"itemListsData": [{
"objectType": ""
}
],
"adapter": {
"instanceName": "",
"thingName": ""
}
}
]
},
"version": "1.0.0"
}
}
• Code utilisé pour le paramètre d'input de l'application composite. Assurez-vous d'ajouter un ID d'article valide :
{
"version": "1.0.0",
"data": [{
"adapter": {
"thingName": "PTC.WCAdapter",
"instanceName": "windchill"
},
"itemListsData": [{
"objectType": "PTC.ProdMgmt.Part",
"items": [{
"id": {
"value": ""
}
}
]
}
]
}
]
}
Didacticiel vidéo : création d'une implémentation de liste d'articles
Les deux didacticiels vidéo suivants montrent comment créer et utiliser l'implémentation personnalisée Liste d'articles. La première vidéo indique comment créer une liste d'articles, en suivant les étapes de l'exemple ci-dessus. La deuxième vidéo indique comment utiliser la liste d'articles dans une application composite. Vous trouverez tout le code utilisé dans les vidéos dans l'exemple ci-dessus.
Pour visualiser une vidéo dans une fenêtre plus grande, cliquez sur le titre dans le lecteur. La vidéo YouTube s'ouvrira dans un nouvel onglet.
Est-ce que cela a été utile ?