Adición de pestañas personalizadas a páginas existentes

Añada pestañas personalizadas a las páginas existentes utilizando el enfoque de personalización diferencial, que actualiza el archivo buc-page-definitions.json para personalizar la página. Utilizando el enfoque de personalización diferencial, las actualizaciones se conservan cuando Order Hub publica actualizaciones en las mismas páginas que ha personalizado.

1. Cree o edite el archivo buc-page-definitions.json para la página a la que desea añadir la pestaña personalizada.
   Para averiguar a qué páginas se pueden añadir pestañas, consulte las páginas listadas en el archivo siguiente:

   • buc-app-<module>/packages/<module>-shared/assets/buc-app-<module>/buc-page-definitions.json

   La página de detalles del pedido se utiliza como ejemplo en esta tarea, que se encuentra en packages/order-details/src-custom/assets/custom/buc-page-definitions.json.

2. Añada una pestaña personalizada a la página con las propiedades siguientes:

   resourceId

   Un ID exclusivo para mostrar u ocultar la pestaña. Cree un nuevo ID de recurso y especifique el valor.

   cabecera

   Una serie que se mostrará como el nombre de separador en la interfaz de usuario. Puede proporcionar una serie traducible.

   valor

   Un valor de serie exclusivo que se almacena en contexto cuando la pestaña está activa.

   ID

   Un ID exclusivo para la pestaña.

   contenido

   Serie o nulo. Si es una serie, la pestaña mostrará la serie cuando la pestaña esté activa. Si es nulo, se cargará la plantilla de componente CustomTab .

   señal

   Una serie exclusiva para registrar el CustomTabComponent.

   Opcional: showAfterTab: el ID de una pestaña existente. Si se proporciona, la nueva pestaña personalizada se colocará después de la pestaña existente de este ID. De lo contrario, la nueva pestaña se añadirá al final.

   Por ejemplo, para actualizar la página de detalles del pedido, actualice el archivo packages/order-details/src-custom/assets/custom/buc-page-definitions.json con los siguientes detalles:

   
   {
   	"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. Añadir series de traducción para la pestaña personalizada.
   1. Cree o edite el archivo en.json . Por ejemplo, para la página de detalles del pedido, packages/order-details/src-custom/assets/custom/i18n/en.json.
   2. Escriba el siguiente contenido JSON en el archivo en.json . Esta etiqueta se utiliza para la nueva pestaña personalizada que añadirá a la página.

      
      {
      	"custom": {
      		"LABEL_CUSTOM_TAB": "Custom tab"
      	}
      }
      

4. Verifique que la nueva pestaña personalizada se muestre en Order Hub.
   1. Inicie sesión en Order Hub. Si ya ha iniciado sesión, vuelva a cargar el bastidor.
   2. Vaya a la página que ha actualizado para poder verificar la visualización de la pestaña personalizada.

      Por ejemplo, si ha actualizado la página de detalles del pedido, pulse Pedidos (modalidad DEV) y busque pedidos. Pulse cualquier pedido para ir a la página de detalles del pedido.

   3. Verifique que la nueva pestaña personalizada se muestre en el menú de pestañas. Su ubicación variará en función de si ha especificado un valor para showAfterTab en el archivo buc-page-definitions.json . Por ejemplo:
      
5. Cree un componente personalizado para visualizar el contenido de la pestaña personalizada.
   1. Cree un componente personalizado bajo la característica. Por ejemplo, para la página de detalles del pedido: packages/order-details/src-custom/app/features/order/
      
   2. El componente personalizado bajo custom-tab.component.ts debe definir la propiedad tabContent como una referencia de plantilla y data como una propiedad de entrada.
      Por ejemplo, para la página de detalles del 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. El componente personalizado bajo custom-tab.component.html debe definir la propiedad ng-template con el nombre de referencia tabContent.
      Por ejemplo, para la página de detalles del 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 un componente personalizado en el archivo app-customization.impl.ts .
   Por ejemplo, para la página de detalles del pedido, packages/order-details/src-custom/app/app-customization.impl.ts.
   1. Importar CustomTabComponent desde su ubicación.
   2. Añadir CustomTabComponent a componentes y proveedores.
      Por ejemplo, en la página de detalles del pedido:

      
      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: El valor de la propiedad provide debe ser el mismo que la señal especificada para la pestaña personalizada en el archivo buc-page-definitions.json .
7. Volver a cargar el marco y verificar que se visualiza el contenido correcto del archivo custom-tab.component.html al seleccionar la nueva pestaña.
   Por ejemplo, para la página de detalles del pedido, packages/order-details/src-custom/app/features/order/custom-tab/custom-tab.component.html: