Adición de contenido a páginas existentes utilizando puntos de extensión

Cada componente que compone una página contiene 2 puntos de extensión (superior e inferior) para insertar código personalizado en cualquier página existente. Utilice el enfoque de personalización diferencial para añadir contenido a las páginas existentes de Order Hub utilizando estos puntos de extensión.

Considere la posibilidad de utilizar este enfoque de personalización diferencial para las personalizaciones sobre el enfoque de personalización mediante alteraciones temporales , ya que las actualizaciones se conservan cuando Order Hub publica actualizaciones en las mismas páginas que ha personalizado. No se requiere ninguna fusión de código; simplemente vuelva a compilar con el código DTK mensual.

Antes de empezar

Identifique las áreas de página de Order Hub a las que desea añadir el contenido utilizando el atajo de teclado Ctrl + D .

Vaya a la página Order Hub a la que desea añadir contenido.
Por ejemplo, la página de detalles del pedido:
Mostrar los puntos de extensión disponibles para añadir contenido en la página.
1. Pulse Ctrl + D para mostrar los puntos de extensión disponibles en la página.
  Cada componente de página contiene puntos de extensión indicados por la etiqueta y el convenio de denominación siguientes:
```
Optional custom component can be placd here. Component name: ComponentName Identifier: ID
```
  Por ejemplo, los puntos de extensión de la página de detalles de pedido:
2. Anote los identificadores de los puntos de extensión a los que desea añadir contenido.
3. Pulse Ctrl + Mayús + D para ocultar los puntos de extensión disponibles en la página.

A continuación, realice las actualizaciones para añadir contenido a las páginas existentes utilizando puntos de extensión:

Procedimiento

Identifique la directiva de extensión que utilizará para insertar las personalizaciones. La directiva se puede encontrar en cada componente del código fuente. Cada directiva contiene un ID exclusivo. Estos ID se definen en un archivo de constantes en cada aplicación de ruta en el archivo packages/src/app/features/component/extension.constants.ts .
Cree un componente nuevo en la carpeta src-custom y añádalo en la declaración NgModule en el archivo app-customization.impl.ts
Cree un nuevo servicio que se amplíe desde ExtensionService desde @buc/commmon-components.
En el archivo app-customization.impl.ts , importe ExtensionModule desde @buc/common-components. En la matriz de importaciones NgModule , proporcione la directiva en el método ExtensionModule.forRoots .
Por ejemplo:
```
  ExtensionModule.forRoot([
   {
     id: Unique directive id mentioned in step 1,
     component: Component created in step 2,
     service: Service created in step 3.
   },
```
Si el nuevo componente tiene entradas y emisores de sucesos, actualice las nuevas propiedades de servicio userInputs y userOutputs e implemente los métodos createInput y handleOutput .

Por ejemplo:
1. Actualice el userInputs para incluir todas las propiedades de @Inputs() necesarias para el componente. Por ejemplo, si el componente tiene @Input name que depende del nombre de propiedad padre, son necesarios los cambios siguientes:
```
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. Actualice el userOutputs para manejar todos los emisores de sucesos del componente. Cualquier cambio de suceso de componente se puede manejar en estos métodos de manejador. Por ejemplo, si el componente emite un suceso buttonClicked , el userOutputs se escribe de la siguiente manera:
```
 handleOutput() {
    this.userOutputs = { buttonClicked: this.onButtonClicked.bind(this) }
 }
 onButtonClicked(event){
        // handle changes emitted from the customer component
 }
```

Resultados

Como referencia, la siguiente guía de aprendizaje añade contenido a las páginas existentes utilizando puntos de extensión: Guía de aprendizaje: Personalización de la acción Planificar orden.

Ejemplo

Para añadir contenido a la página de detalles de pedido utilizando puntos de extensión:

Identifique la directiva de extensión que se utilizará para insertar las personalizaciones. Cada componente Angular predeterminado tendrá directivas de extensión al principio y al final del componente. Por ejemplo:
```
<ng-template bucExtension [componentName]="componentName" [placement]="'top'" [id]="id" [parent]="this"> </ng-template>
```
Cada una de estas plantillas tendrá ID exclusivos definidos en el archivo packages/order-details/src/app/features/order/order-details/order-details.component.ts :
```
   EXTENSION = {
      TOP: ExtensionConstants.ORDER_DETAILS_TOP,
      BOTTOM: ExtensionConstants.ORDER_DETAILS_BOTTOM
   };
```
Estas constantes se definen en el archivo 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';
 }
```

Cree un componente nuevo que se tenga que inyectar. Por ejemplo:


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

Actualice la matriz de declaraciones en el archivo 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];

Cree un nuevo servicio para manejar la comunicación padre-hijo:


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}`
            })
        ]);
    }

}

Actualice el archivo app-customization.impl.ts como se indica a continuación:


...

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
        }])
    ];

...