Descripción del ciclo de vida de un componente de campo

El kit de herramientas de desarrollador proporciona esquemas angulares que pueden crear componentes de campo para que muestre datos personalizados que no están incluidos en Order Hub de forma predeterminada. Conozca la infraestructura de componentes para comprender cómo se implementan y configuran los campos.

Visión general de componentes de campo

Una definición de campo típica implica las características siguientes:

Una lista de campos que representan datos que se van a visualizar en una página específica.
Cada campo puede ser su propio widget de interfaz de usuario. Por ejemplo, una etiqueta, un menú desplegable, un cuadro de texto o una URL.

Un componente de aplicación típico que utiliza una configuración de campo realiza las acciones siguientes:

Define los componentes de campo en un archivo de configuración (buc-field-details.json).
Traducir literales que están asociados con el campo
Opcionalmente, habilita o inhabilita algunos campos basados en configuraciones de administrador de arrendatario.
Llama a una o más API para llenar los valores de campo. Los datos devueltos por la API se comparan utilizando el ID de campo.

La infraestructura gestiona el ciclo de vida y simplifica la implementación del componente de aplicación. La infraestructura separa la definición de campo de la implementación de campo. La definición de campo se gestiona como un archivo de configuración y se carga desde un archivo JSON (buc-field-details.json). La infraestructura carga la configuración de campo e inicializa sus valores. El componente de aplicación implementa la lógica empresarial, como la captación de datos de campo de atributo y la implementación de acciones.

La infraestructura carga la configuración de tabla desde tres archivos:

El archivo JSON personalizado para una ruta específica desde <module>/packages/<route>/src-custom/assets/custom/buc-field-details.json
Las configuraciones de campo específicas de aplicación predeterminadas de <module>/packages/<module-short-name>-shared/assets/<module>/buc-field-details.json
Configuración de campo específico de componentes comunes de <module>/node_modules/@buc/common-components/assets/common-components/buc-field-details.json

Durante la compilación, los tres archivos se fusionan; dando prioridad al archivo JSON personalizado. Para obtener más información sobre el archivo de configuración JSON, consulte Sintaxis JSON.

Implementación de campo

La infraestructura proporciona una clase base BaseFieldDetailsComponent para todos los componentes que contienen una lista de atributos a visualizar. Esta clase inicializa la configuración de campo BucFieldDetailsConfiguration basándose en el nombre de campo especificado por el componente.

La clase BaseFieldDetailsComponent incluye los siguientes métodos clave:

initializeFieldDetailAttributes(pageName): Lee el archivo de configuración JSON y almacena el resultado en la clase.
loadPageAttributes: Carga los atributos de campo con datos. Este método delega en el método fetchPageAttributeData para permitir que las subclases implementen la lógica empresarial para captar los datos. A continuación, este método llama al método getDataForAttribute para permitir que las subclases preparen los datos para cada campo.
fetchPageAttributeData: Este método abstracto debe ser implementado por subclases para captar una matriz de datos, que se utiliza para llenar los campos.
getDataForAttribute: Este método abstracto debe ser implementado por subclases para crear los datos para los campos. Si un campo no incluye la propiedad dataBinding , se llama a este método para el atributo de destino.
onFieldDetailsAttributeLoadComplete: Este método permite que el subcomponente finalice después de que los datos estén listos.