Creating field components

Create reusable field components that define how individual inputs behave and display. Use this schematic to standardize field definitions, which helps you maintain consistent validation, rendering, and reuse across search and form experiences.

About this task

Create a Field component to display details for a specific record. For example, order dates, order lines, and ship node information for an order.

The summary-component schematic supports creating two types of components:

1. Field component: To display attributes in the content area of a page.
2. Summary component: To display attributes in the right side panel of a details page.

The following screen capture shows the Shipment details page and highlights the different components.

1. Go to the module where you want to add the component.
   For example, devtoolkit_docker/orderhub-code/buc-app-order.
2. Create the component by running the following command.

   ng g @buc/schematics:summary-component \
   --name <name> \
   --json-file-path <json-file-path> \
   --translation-file-path <translation-file-path> \
   --is-summary-panel <true|false> \
   --path <path> \
   --project <project-name> \
   --skip-import

   Parameters

   name

   (Required) The name of the component.

   The schematic creates a component class name by removing special characters and appending the word "FieldsComponent". For example, if you specify the name my-sample, the generated class name is MySampleFieldsComponent.

   json-file-path

   (Required) The path to where you want to update or create the configuration file (buc-field-details.json).

   In the buc-field-details.json file, the schematic creates an object name by appending "-fields" to the name. For example, my-sample-field.

   translation-file-path

   (Required) The path to where you want to update or create the translation literals (en.json).

   In the en.json file, the schematic creates an object name by appending "-field" to the name. For example, my-sample-field.

   is-summary-panel

   (Optional) Boolean to determine the type of component to create. Specify true to create a Summary component. Specify false to create a Field component. Default value is true.

   path

   (Optional) The path to create the component file, relative to the current module. By default, a folder with the same name as the component is created in the module's root folder.

   json-file-name

   (Optional) By default, the schematic updates buc-field-details.json with test data. If you need to update or add your object to a different file, then use this parameter. If you specify a file name that does not exist in the assets folder, then a new file is created.

   project

   (Required) The name of the package folder that the schematic is being created in. For example, creating a search result component in packages/order-search-result the project name will be order-search-result.

   The following command provides an example with parameters.

   ng g @buc/schematics:summary-component --name my-sample --path packages/order-search/src-custom/app/features/search --json-file-path packages/order-shared/assets/buc-app-order --is-summary-panel true --project order-search --skip-import

   The schematic creates the new component and updates the shared files. The output summarizes the files that were created and updated.
3. If you created a Field Component, edit the generated HTML file to pass the header parameter to specify a label for the tab.
   For example, if you refer to the screen capture, the active tab has the label "Details". The "Details" label is specified by adding a header with the path to the translation literal in the en.json file.

   [header]="'SHIPMENT_DETAILS.SHIPMENT_TABS.SHIPMENT_DETAILS'"