Adición de acciones personalizadas a páginas existentes

Añada acciones 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.

Procedimiento

  1. Cree o edite el archivo buc-page-definitions.json para la página a la que desea añadir la acción personalizada.
    Para averiguar a qué páginas dan soporte a la adición de acciones, 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 acción personalizada a la página con las propiedades siguientes:
    ID
    Un ID exclusivo.
    etiqueta
    Una serie que se mostrará como una etiqueta de acción de página en la interfaz de usuario. Puede proporcionar una serie traducible.
    resourceId
    Un ID exclusivo para mostrar u ocultar la acción. Cree un nuevo ID de recurso y especifique el valor.
    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": [
			{
				"id": "custom-action",
				"label": "custom.LABEL_CUSTOM_ACTION",
				"resourceId": "BUCORD0014AT0001"
			}
		]
	}
}
  3. Añadir series de conversión para la acción 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 acción personalizada que añadirá a la página.
      
{
	"custom": {
		"LABEL_CUSTOM_ACTION": "Custom action"
	}
}
  4. Verifique que la nueva acción 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 acción 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. Pulse Acciones y verifique que la nueva acción personalizada se muestra en el menú. Por ejemplo:
      Acción personalizada
  5. Cree un archivo de servicio de acciones custom-action.service.ts y pase un ID de acción (que se ha especificado como id para la acción personalizada en el archivo buc-page-definitions.json ) al método select de ActionProcessorService.
    Por ejemplo, para la página de detalles del pedido, packages/order-details/src-custom/app/services/custom-action.service.ts se actualiza en el código siguiente y Acción personalizada mostrará una ventana emergente de alerta:
    
import { Injectable } from '@angular/core';
import {ActionProcessorService } from '@buc/order-shared';

@Injectable()
export class CustomActionService{
	constructor(
		private actionProcessorService: ActionProcessorService
	)	{
		this.actionProcessorService.select<any>('custom-action').subscribe(({params}) => {
			const componentId = params.component; // component id of the order-details-page
			const orderDetailsData = params.data;
			// params.data contains the following properties
			// params.data = {
				// pageObject -> details page data
				// routeData -> the page router object
				// context -> sometimes a page has a context object
			// }
			alert('Custom action invoked');
		});
	}
}
  6. Registre un servicio de acciones personalizadas 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 un servicio de acción personalizada, que se ha creado en el paso anterior.
    2. Importar BucActionsModule desde "@buc/common-components".
    3. Añada el servicio de acciones personalizadas a las importaciones tal como se muestra en el ejemplo siguiente:
      
import { BucActionsModule } from "@buc/common-components";
import { CustomActionService } from "./services/custom-action-service";

export class AppCustomizationImpl {
	static readonly components = [];
	
	static readonly providers = [];
	
	static readonly imports = [
		BucActionsModule.forChild(
			[
				{
					name: 'custom-action',
					action: CustomActionService
				}
			]
		)
	];
	
}
      Nota: El valor de la propiedad name debe ser el mismo que el ID de acción especificado en el archivo buc-page-definitions.json .
  7. Volver a cargar el marco y verificar que se visualiza una ventana emergente de alerta al seleccionar la nueva acción personalizada. Por ejemplo:
    Ventana emergente de alerta