Recherche de pièces
En plus de la possibilité de cliquer sur une pièce pour afficher ses métadonnées, vous pouvez également ajouter une barre de recherche à une expérience. Si vous avez un numéro de pièce, mais que vous ne savez pas exactement quelle pièce vous recherchez dans un modèle, vous pouvez rechercher le numéro de pièce pour mettre la pièce en surbrillance. Pour ce faire, vous devez créer une fonction appelée findMeta qui autorise la saisie d'un numéro de pièce, puis le compare aux données du modèle du quadrirotor. La ou les pièces dont le numéro de pièce a été saisi sont mises en surbrillance.
|
|
Si vous souhaitez comparer votre progression au code complet de cette section, vous le trouverez dans l' Appendix 1 sur GitHub. |
1. Dans la vue Accueil, ouvrez le canevas 2D.
2. Faites glisser et déposez un widget Disposition de grille sur le panneau inférieur du canevas. Cliquez sur column-1 dans l'arborescence des VUES, sur le côté gauche de l'écran. Sélectionnez Ajouter une colonne sous Actions de grille pour diviser le panneau inférieur en deux colonnes.
3. Faites glisser et déposez un widget Entrée de texte dans la colonne column-1 du panneau inférieur. L'entrée de texte sera utilisée pour saisir du texte afin de rechercher des noms ou des numéros de pièces. Entrez Saisir ici dans le champ Espace réservé. Définissez l'ID Studio sur userInput.
4. Dans la colonne column-2, ajoutez un widget Bouton. Entrez Rechercher dans le champ Texte. Remplacez l'ID Studio par findButton. Dans la section JS de l'événement Clic, saisissez findMeta(). Cette fonction est créée dans l'onglet Home.js.
5. Ouvrez le volet
Données en cliquant sur
dans le coin supérieur droit (comme indiqué ci-dessous). Vous devez créer un paramètre d'application pour relier le texte saisi dans le widget
userInput aux attributs du modèle.
a. Sélectionnez l'icône + verte en regard de Paramètres de l'application pour créer un nouveau paramètre d'application. Nommez le paramètre d'application partno, puis cliquez sur Ajouter.
b. Ouvrez le widget Entrée de texteuserInput. Faites glisser et déposez la propriété Texte du widget userInput sur le paramètre d'application partno. Cette fonction lie le texte saisi dans la zone userInput à la variable partno. Les flèches noires en regard des deux objets délimités indiquent que la liaison a été effectuée correctement.
6. Cliquez sur
Home.js dans l'arborescence de la
Vue. Vous devez créer une nouvelle fonction pour utiliser la barre de recherche afin de rechercher des pièces à l'aide d'un numéro de pièce. Cette fonction récupère le texte saisi dans la zone
userInput et le définit sur une variable nommée
searchNum. La variable de cette valeur est alors comparée à tous les numéros de pièce disponibles dans le modèle de quadrirotor. S'il existe une pièce ou des pièces (s'il existe plusieurs instances du même numéro de pièce) avec un numéro de pièce correspondant au texte saisi, elles sont mises en surbrillance à l'aide du moteur de rendu de la section
3D-Guided Service Instructions 201 précédente. La pièce est mise en surbrillance pendant 3 secondes. Placez cette fonction après la fonction
userpick et avant la fonction
playit.
a. Créez une fonction nommée findMeta qui sera utilisée pour rechercher les métadonnées de pièces contenant des informations saisies dans la zone de texte userInput. La première étape de cette fonction consiste à supprimer le texte du bouton de lecture et à dissocier le modèle de toute séquence. Ensuite, vous devez créer une variable pour avoir une valeur égale à tout texte saisi dans la zone de texte userInput en fonction du paramètre d'application créé.
//function for using the userInput text box to search for parts
$scope.findMeta = function () {
//reset the text property of the play button to be blank
$scope.view.wdg.playButton.text='';
//
//set the toPlay object for the play button to be undefined
$scope.view.wdg.playButton.toPlay = undefined;
//
//set a variable for comparing the user input to the value of the partno application parameter
var searchNum = $scope.app.params.partno;
//
// instead of using metadata from just the picked part, use metadata from the whole model. If resolved, proceed
PTC.Metadata.fromId('quadcopter')
.then ( (metadata) => {
b. La section suivante de la fonction récupère les données qui ont été entrées dans la zone de texte userInput et les compare à l'attribut Part Number du modèle. La variable options est créée sous forme de tableau de chemins d'ID contenant des données correspondant au texte saisi. Pour ce faire, utilisez conjointement les méthodes .find et .like. Lorsqu'un utilisateur saisit du texte dans la zone userInput, le texte est entré dans le paramètre d'application partno en raison de la liaison entre l'entrée de texte et le paramètre. De ce fait, la variable searchNum est définie sur la valeur du paramètre d'application partno. La variable searchNum est ensuite comparée à toute valeur partNumber existante trouvée à l'aide de la méthode .find pour les attributs du modèle. Ensuite, la méthode .like recherche tous les numéros de pièce correspondant partiellement ou totalement au texte saisi dans la zone d'entrée. Ces résultats sont ensuite stockés sous forme de liste de valeurs dans la variable options grâce à l'élément getSelected.
//
//set a variable for comparing the user input to the value of the partno application parameter
var searchNum = $scope.app.params.partno;
//
// instead of using metadata from just the picked part, use metadata from the whole model. If resolved, proceed
PTC.Metadata.fromId('quadcopter')
.then((metadata) => {
//
// set a variable named options. this variable will become an array of ID paths that fit the input text.
// 'like' will look for a partial text match to what is typed in. use 'same' to get an exact match
var options = metadata.find('partNumber').like(searchNum).getSelected();
//
// if the text input leads to a part number so that there is an entry in the options array
if (options != undefined && options.length > 0) {
//
// set an empty array called ID. This array will house the parts that contain the entered part number
var identifiers = []
//
// for each entry in the options array, push that value with 'quadcopter-' at the beginning into the ID array
options.forEach(function (i) {
identifiers.push('quadcopter-' + i)
}) //end forEach
//
// highlight each object in the identifiers array with the shader
$scope.hilite(identifiers, true)
//
// function for removing the highlight
var removeHilite = function (refitems) {
//
// return the hilite function with a value of false to the given part(s)
return function () {
$scope.hilite(refitems, false)
} // end of return function
} // end of turning off hilite
//
// remove the highlight of the selected part(s) after 3000 ms
$timeout(removeHilite(identifiers), 3000)
} //end if statement
}) // end .then
//catch statement if the promise of having a part with metadata is not met
.catch((err) => { console.log('metadata extraction failed with reason : ' + err) })
} // end findMeta function
7. Cliquez sur Aperçu. Dans la zone userInput, saisissez 1234, puis cliquez sur Rechercher. Si tous les rotors sont mis en surbrillance en vert, puis disparaissent, cette étape a été exécutée correctement.
Le code complet de cette section est disponible sous
3D-Guided Service Instructions 202 sur GitHub.
Passez à la section "3D-Guided Service Instructions 301" où vous
ajouterez des données de prix et un panier à un modèle.
