Incluindo conteúdo em páginas existentes usando pontos de extensão

Cada componente que compõe uma página contém 2 pontos de extensão (superior e inferior) para inserir código personalizado em qualquer página existente. Use a abordagem customização diferenciada para incluir conteúdo nas páginas existentes do Order Hub usando esses pontos de extensão.

Considere usar essa abordagem de customização diferenciada para suas customizações sobre a abordagem customização por substituições , pois suas atualizações são preservadas quando o Order Hub libera atualizações para as mesmas páginas que você customizou. Nenhuma mesclagem de código é necessária; simplesmente recompile com o código DTK mensal..

Antes de iniciar

Identifique as áreas da página Order Hub nas quais deseja incluir seu conteúdo usando o atalho de teclado Ctrl + D .

Acesse a página Order Hub na qual você deseja incluir conteúdo.
Por exemplo, a página de detalhes do pedido:
Mostre os pontos de extensão disponíveis para você incluir conteúdo na página.
1. Pressione Ctrl + D para mostrar os pontos de extensão disponíveis na página
  Cada componente de página contém pontos de extensão denotados pelo seguinte rótulo e convenção de nomenclatura:
```
Optional custom component can be placd here. Component name: ComponentName Identifier: ID
```
  Por exemplo, os pontos de extensão da página de detalhes do pedido:
2. Anote os identificadores dos pontos de extensão nos quais deseja incluir conteúdo.
3. Pressione Ctrl + Shift + D para ocultar os pontos de extensão disponíveis na página.

Em seguida, faça suas atualizações para incluir conteúdo em páginas existentes usando pontos de extensão:

Procedimento

Identifique a diretiva de extensão que será usada para inserir suas customizações. A diretiva pode ser localizada em cada componente no código fonte. Cada diretiva contém um ID exclusivo. Esses IDs são definidos em um arquivo constante em cada aplicativo de rota no arquivo packages/src/app/features/component/extension.constants.ts .
Crie um novo componente na pasta src-custom e inclua-o na declaração NgModule no arquivo app-customization.impl.ts
Crie um novo serviço que se estende de ExtensionService de @buc/commmon-components.
No arquivo app-customization.impl.ts , importe o ExtensionModule de @buc/common-components. Na matriz de importações NgModule , forneça a diretiva no método ExtensionModule.forRoots .
Por exemplo:
```
  ExtensionModule.forRoot([
   {
     id: Unique directive id mentioned in step 1,
     component: Component created in step 2,
     service: Service created in step 3.
   },
```
Se o novo componente tiver entradas e emissores de eventos, atualize as propriedades de serviço userInputs e userOutputs e implemente os métodos createInput e handleOutput .

Por exemplo:
1. Atualize o userInputs para incluir todas as propriedades @Inputs() requeridas pelo componente. Por exemplo, se o componente tiver @Input name que depende do nome da propriedade pai, as mudanças a seguir serão necessárias:
```
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. Atualize o userOutputs para manipular todos os emissores de eventos do componente. Qualquer mudança de evento do componente pode ser manipulado nesses métodos do manipulador Por exemplo, se o componente emitir um evento buttonClicked , o userOutputs será gravado da seguinte maneira:
```
 handleOutput() {
    this.userOutputs = { buttonClicked: this.onButtonClicked.bind(this) }
 }
 onButtonClicked(event){
        // handle changes emitted from the customer component
 }
```

Resultados

Como uma referência, o tutorial a seguir inclui conteúdo em páginas existentes usando pontos de extensão: Tutorial: Customizando a ação de pedido de Planejamento..

Exemplo

Para incluir conteúdo na página de detalhes do pedido usando pontos de extensão:

Identifique a diretiva de extensão que será usada para inserir suas customizações.. Cada componente Angular padrão terá diretivas de extensão no início e no final do componente.. Por exemplo:
```
<ng-template bucExtension [componentName]="componentName" [placement]="'top'" [id]="id" [parent]="this"> </ng-template>
```
Cada um desses modelos terá IDs exclusivos definidos no arquivo packages/order-details/src/app/features/order/order-details/order-details.component.ts :
```
   EXTENSION = {
      TOP: ExtensionConstants.ORDER_DETAILS_TOP,
      BOTTOM: ExtensionConstants.ORDER_DETAILS_BOTTOM
   };
```
Essas constantes são definidas no arquivo 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';
 }
```

Crie um novo componente que tenha que ser injetado Por exemplo:


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

Atualize a matriz de declarações no arquivo 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];

Crie um novo serviço para manipular a comunicação pai-filho:


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

}

Atualize o arquivo app-customization.impl.ts da seguinte forma:


...

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

...