Incluindo guias customizadas em páginas existentes

Inclua guias customizadas em páginas existentes usando a abordagem de customização diferenciada, que atualiza o arquivo buc-page-definitions.json para customizar a página Usando a abordagem de customização diferenciada, suas atualizações são preservadas quando o Order Hub libera atualizações para as mesmas páginas customizadas.

Procedimento

  1. Crie ou edite o arquivo buc-page-definitions.json para a página na qual deseja incluir a guia customizada.
    Para localizar quais páginas suportam a inclusão de guias, consulte as páginas listadas no arquivo a seguir:
    • buc-app-<module>/packages/<module>-shared/assets/buc-app-<module>/buc-page-definitions.json

    A página de detalhes do pedido é usada como um exemplo nesta tarefa, localizada em packages/order-details/src-custom/assets/custom/buc-page-definitions.json

  2. Inclua uma guia customizada na página com as propriedades a seguir:
    resourceId
    Um ID exclusivo para mostrar ou ocultar a guia. Crie um novo ID do recurso e insira o valor
    título
    Uma sequência que será exibida como o nome da guia na IU. É possível fornecer uma sequência traduzível.
    valor
    Um valor de sequência exclusivo que é armazenado no contexto quando a guia está ativa.
    ID
    Um ID exclusivo para a guia..
    conteúdo
    Sequência ou nulo. Se for uma sequência, a guia exibirá a sequência quando a guia estiver ativa. Se for nulo, o modelo de componente CustomTab será carregado.
    token
    Uma sequência exclusiva para registrar o CustomTabComponent

    Opcional: showAfterTab: o ID de uma guia existente. Se for fornecido, a nova guia customizada será colocada após a guia existente desse ID. Caso contrário, a nova guia será adicionada no final.

    Por exemplo, para atualizar a página de detalhes do pedido, atualize o arquivo packages/order-details/src-custom/assets/custom/buc-page-definitions.json com os seguintes detalhes:
    
{
	"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. Inclua sequências de tradução para a guia customizada.
    1. Crie ou edite o arquivo en.json . Por exemplo, para a página de detalhes do pedido, packages/order-details/src-custom/assets/custom/i18n/en.json
    2. Escreva o conteúdo JSON a seguir no arquivo en.json Esse rótulo é usado para a nova guia customizada que você incluirá na página
      
{
	"custom": {
		"LABEL_CUSTOM_TAB": "Custom tab"
	}
}
  4. Verifique se a nova guia customizada é exibida em Order Hub.
    1. Efetue login no Order Hub. Se você já tiver efetuado login, recarregue o quadro.
    2. Acesse a página atualizada para que seja possível verificar a exibição da guia customizada.

      Por exemplo, se você atualizou a página de detalhes do pedido, clique em Pedidos (modo DEV) e procure pedidos. Clique em qualquer pedido para acessar a página de detalhes do pedido..

    3. Verifique se a nova guia customizada é mostrada no menu guias. Seu local variará com base se você especificou um valor para showAfterTab no arquivo buc-page-definitions.json . Por exemplo:
      Local da guia customizada
  5. Crie um componente customizado para exibir o conteúdo da guia customizada
    1. Crie um componente customizado no recurso. Por exemplo, para a página de detalhes do pedido: packages/order-details/src-custom/app/features/order/
      Ordem de pacotes
    2. O componente customizado em custom-tab.component.ts deve definir a propriedade tabContent como uma referência de modelo e data como uma propriedade de entrada.
      Por exemplo, para a página de detalhes do pedido, 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. O componente customizado em custom-tab.component.html deve definir a propriedade ng-template com nome de referência tabContent.
      Por exemplo, para a página de detalhes do pedido, 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. Registre um componente customizado no arquivo app-customization.impl.ts .
    Por exemplo, para a página de detalhes do pedido, packages/order-details/src-custom/app/app-customization.impl.ts
    1. Importe CustomTabComponent de seu local.
    2. Incluir CustomTabComponent em componentes e provedores
      Por exemplo, na página de detalhes da ordem:
      
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 = [];

}
      Nota: o valor para a propriedade provide deve ser igual ao token especificado para a guia customizada no arquivo buc-page-definitions.json .
  7. Recarregue o quadro e verifique se o conteúdo correto do arquivo custom-tab.component.html é exibido ao selecionar a nova guia.
    Por exemplo, para a página de detalhes do pedido, packages/order-details/src-custom/app/features/order/custom-tab/custom-tab.component.html:.
    Conteúdo da guia customizada