Création de composants avec Angular schematics

Dans le kit d'outils de développement, IBM fournit des schémas Angular pour générer rapidement des composants avec du code de démarrage que vous pouvez utiliser dans des applications. Les composants incluent des pages de recherche, des tables et des détails de zone.

Utilisez les schémas pour générer des composants avec la même conception et les mêmes fonctions que les composants existants dans Order Hub. Les composants générés incluent également les bibliothèques nécessaires pour communiquer avec divers services, tels que:
  • Le système de Sterling™ Order Management.
  • Sterling Intelligent Promising Inventory Visibility titulaires.
  • Autres locataires de microservice.
  • Les bibliothèques d'interface utilisateur Carbon utilisées dans les pages existantes.
Pour plus d'informations sur l'utilisation de schematics pour créer de nouvelles applications, voir Création d'applications.

Avant de commencer

  1. Assurez-vous d'avoir extrait le code Order Hub . Pour plus d'informations, voir Initiation à la personnalisation de Order Hub.
  2. Exécutez la commande suivante pour définir strict-ssl sur false.
    npm config set "strict-ssl" false
  3. Exécutez l'une des commandes suivantes pour réinstaller la dernière version de @buc/schematics afin d'accéder aux schémas fournis par l' IBM. Pour Angular v15, exécutez la commande suivante.
    npm uninstall -g @buc/schematics
npm install -g ./lib/buc/schematics/schematics-v3latest.tgz
    Pour Angular v18, exécutez la commande suivante.
    npm uninstall -g @buc/schematics
npm install -g ./lib/buc/schematics/schematics-v4latest.tgz
  4. Pour obtenir de l'aide sur un script de schéma, exécutez.
    ng g @buc/schematics:<component> --help
  5. Créez des composants.

Création d'un composant de page Recherche

Créez un composant search page pour les utilisateurs afin de spécifier des critères de recherche et de rechercher des données.

Le schéma search-panel crée le composant de page de recherche et inclut du code pour prendre en charge les fonctions suivantes:
  1. Un trajet de navigation
  2. Fonction Sauvegarder la recherche
  3. Fonction Personnaliser les critères de recherche
  4. Recherche par regroupements
La capture d'écran suivante montre la page Recherche d'expédition et met en évidence les fonctions de la page de recherche.
Capture d'écran de la page de recherche d'expédition. Le trajet de navigation est entouré d'une boîte portant le numéro d'étiquette 1. Le bouton Recherche sauvegardée est entouré d'une zone avec le libellé 2. Le bouton Personnaliser les critères de recherche est entouré d'une zone avec le libellé 3. Le regroupement Search-by est entouré d'une zone avec le libellé 4.

Procédure

  1. Ouvrez un terminal et accédez au module dans lequel vous souhaitez ajouter le composant. Par exemple, devtoolkit_docker/orderhub-code/buc-app-order.
  2. Créez le composant en exécutant la commande suivante.
    ng g @buc/schematics:search-panel --name <name> \
--json-file-path <json-file-path> \
--translation-file-path <translation-file-path> \
--shared-lib <shared-lib> \
--path <path> \
--json-file-name <json-file-name> \
--project <project-name> \
--skip-import
    Paramètres
    nom
    (Obligatoire) Nom du composant.
    Le schéma crée un nom de classe de composant en supprimant les caractères spéciaux et en ajoutant le mot "SearchComponent". Par exemple, si vous spécifiez le nom mon-échantillon, le nom de la classe générée est MySampleSearchComponent.
    chemin_fichier_json
    (Obligatoire) Chemin d'accès à l'emplacement où vous souhaitez mettre à jour ou créer le fichier de configuration (search_fields.json). Par exemple, packages/order-shared/assets/buc-app-order.
    Dans le fichier search_fields.json , le schéma crée un nom d'objet en ajoutant "-search" au nom. Par exemple, my-sample-search.
    chemin-fichier-traduction
    (Obligatoire) Chemin dans lequel vous souhaitez mettre à jour ou créer les littéraux de traduction (en.json). Par exemple, packages/order-shared/assets/buc-app-order/i18n.
    Dans le fichier en.json , le schéma crée un nom d'objet en ajoutant "-search" au nom. Par exemple, my-sample-search.
    lib-partagée
    (Obligatoire) Nom du dossier de la bibliothèque partagée.
    chemin d'accès
    (Facultatif) Chemin de création du fichier de composant, relatif au module en cours. Par défaut, un dossier portant le même nom que le composant est créé dans le dossier racine du module.
    nom-fichier-json
    (Facultatif) Par défaut, le schéma met à jour search_fields.json avec les données de test. Si vous devez mettre à jour ou ajouter votre objet à un autre fichier, utilisez ce paramètre. Si vous spécifiez un nom de fichier qui n'existe pas dans le dossier des actifs, un nouveau fichier est créé.
    projet
    Nom du dossier de package dans lequel le schéma est créé. Par exemple, la création d'un composant de résultat de recherche dans packages / order-search-result le nom du projet sera order-search-result.
    La commande suivante fournit un exemple avec des paramètres.
    ng g @buc/schematics:search-panel --name my-sample --path packages/order-search/src-custom/app/features/search --json-file-path packages/order-shared/assets/buc-app-order --translation-file-path packages/order-shared/assets/buc-app-order/i18n --shared-lib order-shared --project order-search --skip-import
  3. Le schéma crée le nouveau composant et met à jour les fichiers partagés. La sortie dans le terminal récapitule les fichiers qui ont été créés et mis à jour.

Création d'un composant de page Résultats de la recherche

Créez un composant search results page pour afficher les résultats après qu'un utilisateur a exécuté une requête à partir du composant de page de recherche.

Le schéma search-result-component génère deux composants:
  1. Un composant de résultat de recherche.
  2. Un composant de tableau ( BaseTableComponent type), dont le sélecteur est inclus dans le modèle de composant de résultat de recherche.
La capture d'écran suivante montre la page Résultats de la recherche d'expédition et met en évidence les fonctions de la page de résultats.
Capture d'écran de la page des résultats de la recherche. La case 1 représente le composant de résultat de la recherche. L'encadré 2 représente le composant de table.
Procédure
  1. Ouvrez un terminal et accédez au module dans lequel vous souhaitez ajouter le composant. Par exemple, devtoolkit_docker/orderhub-code/buc-app-order.
  2. Créez le composant de page de résultats de recherche en exécutant la commande suivante. Le schéma crée le composant et met à jour l'exemple d'objet de routage pour le composant de résultat de recherche dans le module de routage le plus proche.
    ng g @buc/schematics:search-result-component --name <name> \
--path <resultsPageComponentPath> \
--table-path <tableComponentPath> \
--json-file-path <json-file-path> \
--translation-file-path <translation-file-path> \
--shared-lib <shared-lib> \
--project <project-name> \
--skip-import
    Paramètres
    nom
    (Obligatoire) Nom du composant.
    Le schéma crée un nom de classe de composant en supprimant les caractères spéciaux et en ajoutant le mot "SearchResultComponent" pour indiquer un composant de résultats de recherche et le mot "TableComponent" pour indiquer un composant de tableau. Par exemple, si vous spécifiez le nom mon-échantillon, les noms de classe générés sont MySampleSearchResultComponent et MySampleTableComponent.
    chemin_fichier_json
    (Requis) Chemin d'accès à l'emplacement où vous souhaitez mettre à jour ou créer le fichier de configuration (buc-table-config.json).
    Dans le fichier buc-table-config.json , le schéma crée un nom d'objet en ajoutant "-table" au nom. Par exemple, my-sample-table.
    chemin-fichier-traduction
    (Obligatoire) Chemin d'accès à l'emplacement où vous souhaitez mettre à jour ou créer les littéraux de traduction (en.json).
    Dans le fichier en.json , le schéma crée un nom d'objet en ajoutant "-table" au nom. Par exemple, my-sample-table.
    lib-partagée
    (Obligatoire) Nom du dossier de la bibliothèque partagée.
    chemin d'accès
    (Facultatif) Chemin de création du composant de résultat de recherche, relatif au module en cours. Par défaut, un dossier portant le même nom que le composant est créé dans le dossier racine du module.
    chemin-table
    (Facultatif) Chemin de création du composant de table, relatif au module en cours. Par défaut, un dossier portant le même nom que le composant est créé dans le dossier racine du module.
    nom-fichier-json
    (Facultatif) Par défaut, le schéma met à jour buc-table-config.json avec les données de test. Si vous devez mettre à jour ou ajouter votre objet à un autre fichier, utilisez ce paramètre. Si vous spécifiez un nom de fichier qui n'existe pas dans le dossier des actifs, un nouveau fichier est créé.
    projet
    Nom du dossier de package dans lequel le schéma est créé. Par exemple, la création d'un composant de résultat de recherche dans packages / order-search-result le nom du projet sera order-search-result.
    La commande suivante fournit un exemple avec des paramètres.
    ng g @buc/schematics:search-result-component --name my-sample --path packages/order-search/src-custom/app/features/search --table-path packages/order-search/src-custom/app/features/search --json-file-path packages/order-shared/assets/buc-app-order --translation-file-path packages/order-shared/assets/buc-app-order/i18n --shared-lib order-shared --project order-search --skip-import
  3. Le schéma crée le nouveau composant et met à jour les fichiers partagés. La sortie dans le terminal récapitule les fichiers qui ont été créés et mis à jour.

Création d'un composant de table

Créez un composant table pour afficher les données dans une table.

Le schéma table-component prend en charge la création d'un composant de table en étendant l'une des deux classes de table:
  1. ClientSidePaginationBaseTableComponent: Pour la pagination côté client, où toutes les entrées de ligne de table sont extraites dans un seul appel d'API.
  2. BaseTableComponent: Pour les résultats basés sur des pages côté serveur provenant de l'API.
La capture d'écran suivante montre la page Résultats de la recherche d'expédition et met en évidence le composant de table.
Capture d'écran de la page des résultats de la recherche. Un cadre entoure le composant de table.
Procédure
  1. Ouvrez un terminal et accédez au module dans lequel vous souhaitez ajouter le composant. Par exemple, devtoolkit_docker/orderhub-code/buc-app-order.
  2. Créez le composant de table en exécutant la commande suivante.
    ng g @buc/schematics:table-component --name <name> \
--extend <extendableClassName> \
--json-file-path <json-file-path> \
--translation-file-path <translation-file-path> \
--path <path> \
--project <project-name> \
--skip-import
    Paramètres
    nom
    (Obligatoire) Nom du composant.
    Le schéma crée un nom de classe de composant en supprimant les caractères spéciaux et en ajoutant le mot "TableComponent". Par exemple, si vous spécifiez le nom mon-échantillon, le nom de la classe générée est MySampleTableComponent.
    étendre
    (Facultatif) Nom de la classe de table extensible. Les valeurs valides sont ClientSidePaginationBaseTableComponent ou BaseTableComponent. Si vous n'indiquez pas de valeur dans la commande, vous êtes invité à choisir un composant dans le terminal. Dans Git Bash pour Windows, le paramètre extend est obligatoire.
    chemin_fichier_json
    (Requis) Chemin d'accès à l'emplacement où vous souhaitez mettre à jour ou créer le fichier de configuration (buc-table-config.json).
    Dans le fichier buc-table-config.json , le schéma crée un nom d'objet en ajoutant "-table" au nom. Par exemple, my-sample-table.
    chemin-fichier-traduction
    (Obligatoire) Chemin d'accès à l'emplacement où vous souhaitez mettre à jour ou créer les littéraux de traduction (en.json).
    Dans le fichier en.json , le schéma crée un nom d'objet en ajoutant "-table" au nom. Par exemple, my-sample-table.
    chemin d'accès
    (Facultatif) Chemin de création du fichier de composant, relatif au module en cours. Par défaut, un dossier portant le même nom que le composant est créé dans le dossier racine du module.
    nom-fichier-json
    (Facultatif) Par défaut, le schéma met à jour buc-table-config.json avec les données de test. Si vous devez mettre à jour ou ajouter votre objet à un autre fichier, utilisez ce paramètre. Si vous spécifiez un nom de fichier qui n'existe pas dans le dossier des actifs, un nouveau fichier est créé.
    projet
    (Obligatoire) Nom du dossier de package dans lequel le schéma est créé. Par exemple, la création d'un composant de résultat de recherche dans packages / order-search-result le nom du projet sera order-search-result.
    La commande suivante fournit un exemple avec des paramètres.
    ng g @buc/schematics:table-component --name my-sample2 --extend ClientSidePaginationBaseTableComponent --json-file-path packages/order-shared/assets/buc-app-order --translation-file-path packages/order-shared/assets/buc-app-order/i18n --path packages/order-search/src-custom/app/features/search --project order-search --skip-import
  3. Le schéma crée le nouveau composant et met à jour les fichiers partagés. La sortie dans le terminal récapitule les fichiers qui ont été créés et mis à jour.

À titre de référence, le didacticiel suivant crée des composants de tableau avec des schémas Angular : Didacticiel : Personnalisation de la page de résultats de recherche de l'inventaire.

Création d'un composant Champ

Créez un composant Field pour afficher les détails d'un enregistrement spécifique. Par exemple, les dates de commande, les lignes de commande et les informations de noeud d'expédition pour une commande.

Le schéma summary-component prend en charge la création de deux types de composant:
  1. Field component: Pour afficher des attributs dans la zone de contenu d'une page.
  2. Summary component: Pour afficher les attributs dans le panneau de droite d'une page de détails.
La capture d'écran suivante montre la page Détails de l'expédition et met en évidence les différents composants.
Capture d'écran de la page des détails de l'expédition. La case 1 représente le composant Champ. L'encadré 2 représente un composant récapitulatif.
Procédure
  1. Ouvrez un terminal et accédez au module dans lequel vous souhaitez ajouter le composant. Par exemple, devtoolkit_docker/orderhub-code/buc-app-order.
  2. Créez le composant de zone en exécutant la commande suivante.
    ng g @buc/schematics:summary-component \
--name <name> \
--json-file-path <json-file-path> \
--is-summary-panel <true|false> \
--path <path> \
--project <project-name> \
--skip-import
    Paramètres
    nom
    (Obligatoire) Nom du composant.
    Le schéma crée un nom de classe de composant en supprimant les caractères spéciaux et en ajoutant le mot "FieldsComponent". Par exemple, si vous spécifiez le nom mon-échantillon, le nom de la classe générée est MySampleFieldsComponent.
    chemin_fichier_json
    (Obligatoire) Chemin d'accès à l'emplacement où vous souhaitez mettre à jour ou créer le fichier de configuration (buc-field-details.json).
    Dans le fichier buc-field-details.json , le schéma crée un nom d'objet en ajoutant "-fields" au nom. Par exemple, my-sample-fields.
    panneau-is-summary-
    (Facultatif) Valeur booléenne permettant de déterminer le type de composant à créer. Spécifiez true pour créer un composant Récapitulatif. Spécifiez false pour créer un composant Zone. La valeur par défaut est true.
    chemin d'accès
    (Facultatif) Chemin de création du fichier de composant, relatif au module en cours. Par défaut, un dossier portant le même nom que le composant est créé dans le dossier racine du module.
    nom-fichier-json
    (Facultatif) Par défaut, le schéma met à jour buc-field-details.json avec les données de test. Si vous devez mettre à jour ou ajouter votre objet à un autre fichier, utilisez ce paramètre. Si vous spécifiez un nom de fichier qui n'existe pas dans le dossier des actifs, un nouveau fichier est créé.
    projet
    Nom du dossier de package dans lequel le schéma est créé. Par exemple, la création d'un composant de résultat de recherche dans packages / order-search-result le nom du projet sera order-search-result.
    La commande suivante fournit un exemple avec des paramètres.
    ng g @buc/schematics:summary-component --name my-sample --path packages/order-search/src-custom/app/features/search --json-file-path packages/order-shared/assets/buc-app-order --is-summary-panel true --project order-search --skip-import
  3. Le schéma crée le nouveau composant et met à jour les fichiers partagés. La sortie dans le terminal récapitule les fichiers qui ont été créés et mis à jour.
  4. Si vous avez créé un composant de zone, éditez le fichier HTML généré pour transmettre le paramètre d'en-tête afin de spécifier un libellé pour l'onglet. Par exemple, si vous faites référence à la capture d'écran, l'onglet actif porte le libellé "Détails". Le libellé "Details" est spécifié en ajoutant un en-tête avec le chemin d'accès au littéral de traduction dans le fichier en.json :
    [header]="'SHIPMENT_DETAILS.SHIPMENT_TABS.SHIPMENT_DETAILS'"