Ajout d'onglets personnalisés à des pages existantes

Ajoutez des onglets personnalisés à des pages existantes à l'aide de l'approche de personnalisation différentielle, qui met à jour le fichier buc-page-definitions.json pour personnaliser la page. Grâce à l'approche de la personnalisation différentielle, vos mises à jour sont conservées lorsque Order Hub publie des mises à jour sur les mêmes pages que celles que vous avez personnalisées.

Procédure

  1. Créez ou éditez le fichier buc-page-definitions.json pour la page à laquelle vous souhaitez ajouter l'onglet personnalisé.
    Pour trouver les pages qui prennent en charge l'ajout d'onglets, consultez les pages répertoriées dans le fichier suivant:
    • buc-app-<module>/packages/<module>-shared/assets/buc-app-<module>/buc-page-definitions.json

    La page des détails de la commande est utilisée comme exemple dans cette tâche, à l'adresse packages/order-details/src-custom/assets/custom/buc-page-definitions.json.

  2. Ajoutez un onglet personnalisé à la page avec les propriétés suivantes:
    resourceId
    ID unique permettant d'afficher ou de masquer l'onglet. Créez un ID de ressource et entrez la valeur.
    en-tête
    Chaîne qui s'affichera comme nom d'onglet dans l'interface utilisateur. Vous pouvez fournir une chaîne traduisible.
    valeur
    Valeur de chaîne unique stockée dans le contexte lorsque l'onglet est actif.
    identificateur
    ID unique de l'onglet.
    contenu
    Chaîne ou null. S'il s'agit d'une chaîne, l'onglet affiche la chaîne lorsque l'onglet est actif. S'il est null, le modèle de composant CustomTab est chargé.
    jeton
    Chaîne unique permettant d'enregistrer le CustomTabComponent.

    Facultatif: showAfterTab: ID d'un onglet existant. S'il est fourni, le nouvel onglet personnalisé sera placé après l'onglet existant de cet ID. Sinon, le nouvel onglet sera ajouté à la fin.

    Par exemple, pour mettre à jour la page des détails de la commande, mettez à jour le fichier packages/order-details/src-custom/assets/custom/buc-page-definitions.json avec les détails suivants:
    
{
	"order-details": {
		"name": "order-details",
		"actions": [],
		"tabs": [
			{
				"resourceId": "BUCORD0014IP0001AT0009",
				"heading": "custom.LABEL_CUSTOM_TAB",
				"value": "custom-tab",
				"id": "order-details-custom-tab",
				"content": null,
				"token": "custom-tab-token",
				"showAfterTab": "order-details-audits-tab"
			}
		]
	}
}
  3. Ajoutez des chaînes de traduction pour l'onglet personnalisé.
    1. Créez ou éditez le fichier en.json . Par exemple, pour la page des détails de la commande, packages/order-details/src-custom/assets/custom/i18n/en.json.
    2. Ecrit le contenu JSON suivant dans le fichier en.json . Ce libellé est utilisé pour le nouvel onglet personnalisé que vous allez ajouter à la page.
      
{
	"custom": {
		"LABEL_CUSTOM_TAB": "Custom tab"
	}
}
  4. Vérifiez que le nouvel onglet personnalisé s'affiche dans Order Hub.
    1. Connectez-vous à Order Hub. Si vous étiez déjà connecté, rechargez le cadre.
    2. Accédez à la page que vous avez mise à jour pour vérifier l'affichage de l'onglet personnalisé.

      Par exemple, si vous avez mis à jour la page des détails de la commande, cliquez sur Commandes (mode DEV) et recherchez des commandes. Cliquez sur une commande pour accéder à la page des détails de la commande.

    3. Vérifiez que le nouvel onglet personnalisé est affiché dans le menu des onglets. Son emplacement varie selon que vous avez spécifié une valeur pour showAfterTab dans le fichier buc-page-definitions.json . Par exemple :
      Emplacement de l'onglet personnalisé
  5. Créez un composant personnalisé pour afficher le contenu de l'onglet personnalisé.
    1. Créez un composant personnalisé sous la fonction. Par exemple, pour la page des détails de la commande: packages/order-details/src-custom/app/features/order/
      Ordre des packages
    2. Le composant personnalisé sous custom-tab.component.ts doit définir la propriété tabContent comme référence de modèle et data comme propriété d'entrée.
      Par exemple, pour la page des détails de la commande, packages/order-details/src-custom/app/features/order/custom-tab/custom-tab.component.ts:
      
import { Component, Input, TemplateRef, ViewChild } from "@angular/core";

@Component({
    selector: 'buc-custom-tab',
    templateUrl: './custom-tab.component.html',
    styleUrls: ['./custom-tab.component.css']
})

export class CustomTabComponent {
    @ViewChild('tabContent', {static:true}) public tabContent: TemplateRef<any>;
    @Input() data;
    // data contains the following properties
    //    data = {
    //       pageObject -> details page data
    //       routeData -> the page router object
    //       context -> sometimes a page has a context object
    //    }
    
    constructor() {
        
    }
}
    3. Le composant personnalisé sous custom-tab.component.html doit définir la propriété ng-template avec le nom de référence tabContent.
      Par exemple, pour la page des détails de la commande, packages/order-details/src-custom/app/features/order/custom-tab/custom-tab.component.html:
      
<ng-template #tabContent>
    <h1>This is the custom tab content</h1>
</ng-template>
  6. Enregistrez un composant personnalisé dans le fichier app-customization.impl.ts .
    Par exemple, pour la page des détails de la commande, packages/order-details/src-custom/app/app-customization.impl.ts.
    1. Importer CustomTabComponent à partir de son emplacement.
    2. Ajoutez CustomTabComponent aux composants et aux fournisseurs.
      Par exemple, dans la page des détails de la commande:
      
import { CustomTabComponent } from "./features/order/custom-tab/custom-tab.component";

export class AppCustomizationImpl {
	static readonly components = [
		CustomTabComponent
	];

	static readonly providers = [
		{
			provide: 'custom-tab-token',
			useValue: CustomTabComponent
		}
	];

	static readonly imports = [];

}
      Remarque: La valeur de la propriété provide doit être identique au jeton spécifié pour l'onglet personnalisé dans le fichier buc-page-definitions.json .
  7. Rechargez le cadre et vérifiez que le contenu correct du fichier custom-tab.component.html s'affiche lorsque vous sélectionnez le nouvel onglet.
    Par exemple, pour la page des détails de la commande, packages/order-details/src-custom/app/features/order/custom-tab/custom-tab.component.html:
    Contenu de l'onglet personnalisé