Understanding a field component lifecycle

The developer toolkit provides Angular schematics that can create field components for you to show custom data that is not included in Order Hub by default. Learn about the component framework to understand how fields are implemented and configured.

Field component overview

A typical field definition involves the following characteristics:

A list of fields that represent data to be displayed on a specific page.
Each field can be its own UI widget. For example, a label, a drop-down menu, a textbox, or a URL.

A typical application component that uses a field configuration completes the following actions:

Defines the field components in a configuration file (buc-field-details.json).
Translate literals that are associated with the field
Optionally, enables or disables some fields based on Tenant administrator configurations.
Calls one or more APIs to populate the field values. The data that is returned by the API is matched by using the field ID.

The framework manages the life cycle and simplifies the implementation of the application component. The framework separate the field definition from the field implementation. The field definition is managed as a configuration file and is loaded from a JSON file (buc-field-details.json). The framework loads the field configuration and initializes its values. The application component implements the business logic, such as fetching the attribute field data and implementing actions.

The framework loads the table configuration from three files:

The custom JSON file for a specific route from <module>/packages/<route>/src-custom/assets/custom/buc-field-details.json
The default application-specific field configurations from <module>/packages/<module-short-name>-shared/assets/<module>/buc-field-details.json
Common components specific field configuration from <module>/node_modules/@buc/common-components/assets/common-components/buc-field-details.json

During compilation, the three files are merged; giving precedence to the custom JSON file. For more information about the JSON configuration file, see JSON syntax.

Field implementation

The framework provides a base class BaseFieldDetailsComponent for all components that contain a list of attributes to display. This class initializes the field configuration BucFieldDetailsConfiguration based on the field name that is specified by the component.

The BaseFieldDetailsComponent class includes the following key methods:

initializeFieldDetailAttributes(pageName): Reads the JSON configuration file and stores the result in the class.
loadPageAttributes: Loads the field attributes with data. This method delegates to the fetchPageAttributeData method to allow subclasses to implement the business logic to fetch the data. Then, this method calls the getDataForAttribute method to allow subclasses to prepare the data for each field.
fetchPageAttributeData: This abstract method must be implemented by subclasses to fetch an array of data, which is used to populate the fields.
getDataForAttribute: This abstract method must be implemented by subclasses to create the data for the fields. If a field does not include the dataBinding property, then this method is called for the target attribute.
onFieldDetailsAttributeLoadComplete: This method allows the subcomponent to finalize after the data is ready.