Ajout de contenu à des pages existantes à l'aide de points d'extension

Chaque composant qui constitue une page contient 2 points d'extension (en haut et en bas) pour l'insertion de code personnalisé dans une page existante. Utilisez l'approche de la personnalisation différentielle pour ajouter du contenu aux pages existantes de Order Hub à l'aide de ces points d'extension.

Envisagez d'utiliser cette approche de personnalisation différentielle pour vos personnalisations via l'approche de personnalisation par substitutions , car 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. Aucune fusion de code n'est requise ; recompilez simplement avec le code DTK mensuel.

Avant de commencer

Identifiez les zones de page Order Hub auxquelles vous souhaitez ajouter votre contenu à l'aide du raccourci clavier Ctrl + D .

Accédez à la page Order Hub à laquelle vous souhaitez ajouter du contenu.
Par exemple, la page des détails de la commande:
Afficher les points d'extension disponibles auxquels vous pouvez ajouter du contenu sur la page.
1. Appuyez sur Ctrl + D pour afficher les points d'extension disponibles sur la page.
  Chaque composant de page contient des points d'extension désignés par le libellé et la convention de dénomination suivants:
```
Optional custom component can be placd here. Component name: ComponentName Identifier: ID
```
  Par exemple, les points d'extension de la page des détails de la commande:
2. Notez les identificateurs des points d'extension auxquels vous souhaitez ajouter du contenu.
3. Appuyez sur Ctrl + Maj + D pour masquer les points d'extension disponibles sur la page.

Ensuite, effectuez vos mises à jour pour ajouter du contenu à des pages existantes à l'aide de points d'extension:

Procédure

Identifiez la directive d'extension que vous utiliserez pour insérer vos personnalisations. La directive se trouve dans chaque composant du code source. Chaque directive contient un ID unique. Ces ID sont définis dans un fichier de constantes dans chaque application de route du fichier packages/src/app/features/component/extension.constants.ts .
Créez un composant dans le dossier src-custom et ajoutez-le dans la déclaration NgModule dans le fichier app-customization.impl.ts
Créez un service qui s'étend depuis ExtensionService à partir de @buc/commmon-components.
Dans le fichier app-customization.impl.ts , importez le fichier ExtensionModule depuis @buc/common-components. Dans le tableau des importations NgModule , indiquez la directive dans la méthode ExtensionModule.forRoots .
Par exemple :
```
  ExtensionModule.forRoot([
   {
     id: Unique directive id mentioned in step 1,
     component: Component created in step 2,
     service: Service created in step 3.
   },
```
Si le nouveau composant comporte des entrées et des émetteurs d'événements, mettez à jour les nouvelles propriétés de service userInputs et userOutputs et implémentez les méthodes createInput et handleOutput .

Par exemple :
1. Mettez à jour userInputs pour inclure toutes les propriétés @Inputs() requises par le composant. Par exemple, si le composant comporte @Input name qui dépend du nom de la propriété parent, les modifications suivantes sont requises:
```
userInputs = { name: ''}
createInput(){
    // update only when there is change in parent property.
    if (this.parentContext.name !== this.userInputs.name) {
    this.userInputs.name = this.parentContext.name;
    }
}
```
2. Mettez à jour le userOutputs pour gérer tous les émetteurs d'événements du composant. Toute modification d'événement de composant peut être traitée dans ces méthodes de gestionnaire. Par exemple, si le composant émet un événement buttonClicked , userOutputs est écrit de la manière suivante:
```
 handleOutput() {
    this.userOutputs = { buttonClicked: this.onButtonClicked.bind(this) }
 }
 onButtonClicked(event){
        // handle changes emitted from the customer component
 }
```

Résultats

A titre de référence, le tutoriel suivant ajoute du contenu à des pages existantes à l'aide de points d'extension: Tutoriel: Personnalisation de l'action Planifier une commande.

Exemple

Pour ajouter du contenu à la page des détails de la commande à l'aide de points d'extension:

Identifiez la directive d'extension qui sera utilisée pour insérer vos personnalisations. Chaque composant Angular par défaut aura des directives d'extension au début et à la fin du composant. Par exemple :
```
<ng-template bucExtension [componentName]="componentName" [placement]="'top'" [id]="id" [parent]="this"> </ng-template>
```
Chacun de ces modèles aura des ID uniques définis dans le fichier packages/order-details/src/app/features/order/order-details/order-details.component.ts :
```
   EXTENSION = {
      TOP: ExtensionConstants.ORDER_DETAILS_TOP,
      BOTTOM: ExtensionConstants.ORDER_DETAILS_BOTTOM
   };
```
Ces constantes sont définies dans le fichier packages/order-details/src/app/features/order/extension.constants.ts :
```
 export class ExtensionConstants {
   static readonly ORDER_DETAILS_TOP = 'order_details_extension_top';
   static readonly ORDER_DETAILS_BOTTOM = 'order_details_extension_bottom';
 }
```

Créez un nouveau composant qui doit être injecté. Par exemple :


import { Component, EventEmitter, Input, Output } from '@angular/core'; 
@Component({ 
selector: 'custom-orderdetails-extension', 
template: '' 
}) 
export class CustomOrderDetailsExtensionComponent{ 
}

Mettez à jour le tableau de déclarations dans le fichier packages/order-details/src-custom/app/app-customization.impl.ts :


import { CustomOrderDetailsExtensionComponent } from "./features/order/custom-order-details-extension/custom-order-details-extension.component"


...


static readonly components = [CustomOrderDetailsExtensionComponent];

Créez un service pour gérer la communication parent-enfant:


import { Injectable, OnDestroy } from "@angular/core";
import { BucNotificationModel, BucNotificationService } from '@buc/common-components';
import { ExtensionService } from "./extension.service";

@Injectable()

export class CustomOrderDetailsExtensionService extends ExtensionService implements OnDestroy {

    userInputs = { name: ''}

    constructor(  public bucNotificationService: BucNotificationService) {
        super();
    }

    createInput() {
        // check only the necessary properties for update
        if (this.parentContext.name !== this.userInputs.name) {
            this.userInputs.name = this.parentContext.name;
        }
        this.userInputObs$.next(this.userInputs);
    }

    handleOutput() {
        this.userOutputs = {
            changesEmitted: this.onChangesEmitted.bind(this)
        }
        this.userOutputObs$.next(this.userOutputs);
    }

    onChangesEmitted(event: any) {
        this.bucNotificationService.send([
            new BucNotificationModel({
                statusType: 'success',
                statusContent: `Message emitted from dynamic component: ${event.message}`
            })
        ]);
    }

}

Mettez à jour le fichier app-customization.impl.ts comme suit:


...

import { CustomOrderDetailsExtensionService } from "./services/custom-order-details-extension-service"
import { ExtensionConstants } from "./features/order/extension.constants";
import { ExtensionModule } from "@buc/common-components";


...


    static readonly imports = [
        ExtensionModule.forRoot( [{
            id: ExtensionConstants.DETAILS_TAB_BOTTOM,
            component: CustomOrderDetailsExtensionComponent,
            service: CustomOrderDetailsExtensionService
        }])
    ];

...