Creando componentes con esquemas angulares

Dentro del kit de herramientas para desarrolladores, IBM proporciona esquemas angulares para generar rápidamente componentes con código de inicio que puede usar en aplicaciones. Los componentes incluyen páginas de búsqueda, tablas y detalles de campo.

Utilice los esquemas para generar componentes con el mismo diseño y funciones que los componentes existentes en Centro de pedidos. Los componentes generados también incluyen las bibliotecas necesarias para comunicarse con diversos servicios, tales como:

El backend del sistema de Sterling™ Order Management.
Sterling Intelligent Promising Inventory Visibility inquilinos.
Otros inquilinos de microservicios.
Las bibliotecas de Carbon UI que se utilizan en páginas existentes.

Para obtener información sobre cómo utilizar los esquemas para crear nuevas aplicaciones, consulte Creación de nuevas aplicaciones en Order Hub de próxima generación.

Antes de empezar

Extrae el Centro de pedidos de próxima generación código. Para más información, ver Comenzando con la personalización de Order Hub de próxima generación.
Ejecute el siguiente comando para configurar elstrict-ssl a falso.
```
npm config set "strict-ssl" false
```
Acceder al IBM-Esquemas proporcionados ejecutando el siguiente comando para reinstalar la última versión de @buc/schematics. Para Angular v15, ejecute el siguiente comando.
```
npm uninstall -g @buc/schematics
npm install -g ./lib/buc/schematics/schematics-v3latest.tgz
```
Para Angular v18, ejecute el siguiente comando.
```
npm uninstall -g @buc/schematics
npm install -g ./lib/buc/schematics/schematics-v4latest.tgz
```
Para obtener ayuda con un script esquemático, ejecute.
```
ng g @buc/schematics:<component> --help
```
Crear componentes.

Crear un componente de página de búsqueda

Crear unsearch page componente para que los usuarios especifiquen criterios de búsqueda y busquen datos.

Elsearch-panel El esquema crea el componente de la página de búsqueda e incluye código para admitir las siguientes características:

Un rastro de migas de pan
Guardar búsqueda función
Personalizar criterios de búsqueda función
Búsqueda por agrupaciones

La siguiente captura de pantalla muestra la Búsqueda de envíos y resalta las características dentro de la página de búsqueda.

Una captura de pantalla de la página de búsqueda de envíos. La ruta de navegación está rodeada por un cuadro con la etiqueta número 1. El botón Búsqueda guardada está rodeado por un cuadro con la etiqueta 2. El botón Personalizar criterios de búsqueda está rodeado por un cuadro con la etiqueta 3. El grupo de búsqueda por está rodeado por un cuadro con la etiqueta 4.

Procedimiento

Abra una terminal y vaya al módulo donde desea agregar el componente. Por ejemplo,devtoolkit_docker/orderhub-code/buc-app-order .
Cree el componente ejecutando el siguiente comando.
```
ng g @buc/schematics:search-panel --name <name> \
--json-file-path <json-file-path> \
--translation-file-path <translation-file-path> \
--shared-lib <shared-lib> \
--path <path> \
--json-file-name <json-file-name> \
--project <project-name> \
--skip-import
```
Parámetros

nombre

(Obligatorio) El nombre del componente.

El esquema crea un nombre de clase de componente eliminando caracteres especiales y agregando la palabra "SearchComponent". Por ejemplo, si especifica el nombre mi-muestra, el nombre de la clase generada es MySampleSearchComponent.

ruta-archivo-json

(Obligatorio) La ruta donde desea actualizar o crear el archivo de configuración (search_fields.json ). Por ejemplo,packages/order-shared/assets/buc-app-order .

En elsearch_fields.json archivo, el esquema crea un nombre de objeto agregando "-search" al nombre. Por ejemplo, mi-busqueda-de-muestra.

ruta-del-archivo-de-traducción

(Obligatorio) La ruta hacia donde desea actualizar o crear los literales de traducción (en.json) . Por ejemplo,packages/order-shared/assets/buc-app-order/i18n .

En elen.json archivo, el esquema crea un nombre de objeto agregando "-search" al nombre. Por ejemplo, mi-busqueda-de-muestra.

biblioteca compartida

(Obligatorio) El nombre de la carpeta de la biblioteca compartida.

vía de acceso

(Opcional) La ruta para crear el archivo del componente, relativa al módulo actual. De forma predeterminada, se crea una carpeta con el mismo nombre que el componente en la carpeta raíz del módulo.

nombre-archivo-json

(Opcional) De forma predeterminada, el esquema se actualizasearch_fields.json con datos de prueba. Si necesita actualizar o agregar su objeto a un archivo diferente, utilice este parámetro. Si especifica un nombre de archivo que no existe en la carpeta de activos, se crea un nuevo archivo.

proyecto

(Obligatorio) El nombre de la carpeta del paquete en la que se crea el esquema. Por ejemplo, al crear un componente de resultados de búsqueda en paquetes/pedido-resultado-búsqueda, el nombre del proyecto será pedido-resultado-búsqueda.

El siguiente comando proporciona un ejemplo con parámetros.
```
ng g @buc/schematics:search-panel --name my-sample --path packages/order-search/src-custom/app/features/search --json-file-path packages/order-shared/assets/buc-app-order --translation-file-path packages/order-shared/assets/buc-app-order/i18n --shared-lib order-shared --project order-search --skip-import
```
El esquema crea el nuevo componente y actualiza los archivos compartidos. La salida en la terminal resume los archivos que se crearon y actualizaron.

Crear un componente de página de resultados de búsqueda

Crear unsearch results page componente para mostrar los resultados después de que un usuario ejecuta una consulta desde el componente de la página de búsqueda.

Elsearch-result-component El esquema genera dos componentes:

Un componente de resultados de búsqueda.
Un componente de tabla (BaseTableComponent tipo), cuyo selector se incluye en la plantilla del componente de resultados de búsqueda.

La siguiente captura de pantalla muestra la Resultados de la búsqueda de envíos y resalta las características dentro de la página de resultados.

Una captura de pantalla de la página de resultados de búsqueda. El cuadro 1 representa el componente de resultados de búsqueda. El cuadro 2 representa el componente de la tabla.

Procedimiento

Abra una terminal y vaya al módulo donde desea agregar el componente. Por ejemplo,devtoolkit_docker/orderhub-code/buc-app-order .
Cree el componente de la página de resultados de búsqueda ejecutando el siguiente comando. El esquema crea el componente y actualiza el objeto de enrutamiento de muestra para el componente de resultados de búsqueda en el módulo de enrutamiento más cercano.
```
ng g @buc/schematics:search-result-component --name <name> \
--path <resultsPageComponentPath> \
--table-path <tableComponentPath> \
--json-file-path <json-file-path> \
--translation-file-path <translation-file-path> \
--shared-lib <shared-lib> \
--project <project-name> \
--skip-import
```
Parámetros

nombre

(Obligatorio) El nombre del componente.

El esquema crea un nombre de clase de componente eliminando caracteres especiales y agregando la palabra "SearchResultComponent" para indicar un componente de resultados de búsqueda y la palabra "TableComponent" para indicar un componente de la tabla. Por ejemplo, si especifica el nombre mi-muestra, los nombres de clase generados son MySampleSearchResultComponent y MySampleTableComponent.

ruta-archivo-json

(Obligatorio) La ruta donde desea actualizar o crear el archivo de configuración (buc-table-config.json) .

En elbuc-table-config.json archivo, el esquema crea un nombre de objeto agregando "-table" al nombre. Por ejemplo, mi-tabla-de-muestra.

ruta-del-archivo-de-traducción

(Obligatorio) La ruta hacia donde desea actualizar o crear los literales de traducción (en.json ).

En elen.json archivo, el esquema crea un nombre de objeto agregando "-table" al nombre. Por ejemplo, mi-tabla-de-muestra.

biblioteca compartida

(Obligatorio) El nombre de la carpeta de la biblioteca compartida.

vía de acceso

(Opcional) La ruta para crear el componente de resultados de búsqueda, relativa al módulo actual. De forma predeterminada, se crea una carpeta con el mismo nombre que el componente en la carpeta raíz del módulo.

ruta de la tabla

(Opcional) La ruta para crear el componente de tabla, relativa al módulo actual. De forma predeterminada, se crea una carpeta con el mismo nombre que el componente en la carpeta raíz del módulo.

nombre-archivo-json

(Opcional) De forma predeterminada, el esquema se actualizabuc-table-config.json con datos de prueba. Si necesita actualizar o agregar su objeto a un archivo diferente, utilice este parámetro. Si especifica un nombre de archivo que no existe en la carpeta de activos, se crea un nuevo archivo.

proyecto

(Obligatorio) El nombre de la carpeta del paquete en la que se crea el esquema. Por ejemplo, al crear un componente de resultados de búsqueda en paquetes/pedido-resultado-búsqueda, el nombre del proyecto será pedido-resultado-búsqueda.

El siguiente comando proporciona un ejemplo con parámetros.
```
ng g @buc/schematics:search-result-component --name my-sample --path packages/order-search/src-custom/app/features/search --table-path packages/order-search/src-custom/app/features/search --json-file-path packages/order-shared/assets/buc-app-order --translation-file-path packages/order-shared/assets/buc-app-order/i18n --shared-lib order-shared --project order-search --skip-import
```
El esquema crea el nuevo componente y actualiza los archivos compartidos. La salida en la terminal resume los archivos que se crearon y actualizaron.

Crear un componente de tabla

Crear untable componente para mostrar datos en una tabla.

Eltable-component El esquema admite la creación de un componente de tabla extendiendo una de las dos clases de tabla:

ClientSidePaginationBaseTableComponent:Para paginación del lado del cliente, donde todas las entradas de las filas de la tabla se recuperan en una llamada API.
BaseTableComponent:Para resultados de la API basados en páginas del lado del servidor.

La siguiente captura de pantalla muestra la Resultados de la búsqueda de envíos página y resalta el componente de la tabla.

Una captura de pantalla de la página de resultados de búsqueda. Un cuadro rodea el componente de la mesa.

Procedimiento

Abra una terminal y vaya al módulo donde desea agregar el componente. Por ejemplo,devtoolkit_docker/orderhub-code/buc-app-order .
Cree el componente de tabla ejecutando el siguiente comando.
```
ng g @buc/schematics:table-component --name <name> \
--extend <extendableClassName> \
--json-file-path <json-file-path> \
--translation-file-path <translation-file-path> \
--path <path> \
--project <project-name> \
--skip-import
```
Parámetros

nombre

(Obligatorio) El nombre del componente.

El esquema crea un nombre de clase de componente eliminando caracteres especiales y agregando la palabra "TableComponent". Por ejemplo, si especifica el nombre mi-muestra, el nombre de la clase generada es MySampleTableComponent.

ampliar

(Opcional) El nombre de la clase de tabla extensible. Los valores válidos son ClientSidePaginationBaseTableComponent o BaseTableComponent. Si no especifica un valor en el comando, se le solicitará en la terminal que elija un componente. En Git Bash para Windows, el parámetro de extensión es obligatorio.

ruta-archivo-json

(Obligatorio) La ruta donde desea actualizar o crear el archivo de configuración (buc-table-config.json) .

En elbuc-table-config.json archivo, el esquema crea un nombre de objeto agregando "-table" al nombre. Por ejemplo, mi-tabla-de-muestra.

ruta-del-archivo-de-traducción

(Obligatorio) La ruta hacia donde desea actualizar o crear los literales de traducción (en.json ).

En elen.json archivo, el esquema crea un nombre de objeto agregando "-table" al nombre. Por ejemplo, mi-tabla-de-muestra.

vía de acceso

(Opcional) La ruta para crear el archivo del componente, relativa al módulo actual. De forma predeterminada, se crea una carpeta con el mismo nombre que el componente en la carpeta raíz del módulo.

nombre-archivo-json

(Opcional) De forma predeterminada, el esquema se actualizabuc-table-config.json con datos de prueba. Si necesita actualizar o agregar su objeto a un archivo diferente, utilice este parámetro. Si especifica un nombre de archivo que no existe en la carpeta de activos, se crea un nuevo archivo.

proyecto

(Obligatorio) El nombre de la carpeta del paquete en la que se crea el esquema. Por ejemplo, al crear un componente de resultados de búsqueda en paquetes/pedido-resultado-búsqueda, el nombre del proyecto será pedido-resultado-búsqueda.

El siguiente comando proporciona un ejemplo con parámetros.
```
ng g @buc/schematics:table-component --name my-sample2 --extend ClientSidePaginationBaseTableComponent --json-file-path packages/order-shared/assets/buc-app-order --translation-file-path packages/order-shared/assets/buc-app-order/i18n --path packages/order-search/src-custom/app/features/search --project order-search --skip-import
```
El esquema crea el nuevo componente y actualiza los archivos compartidos. La salida en la terminal resume los archivos que se crearon y actualizaron.

Como referencia, el siguiente tutorial crea componentes de tabla con esquemas de Angular: Tutorial: Personalización de la página de resultados de búsqueda de Inventario.

Crear un componente de campo

Crear unField componente para mostrar detalles de un registro específico. Por ejemplo, fechas de pedido, líneas de pedido e información del nodo de envío de un pedido.

Elsummary-component El esquema admite la creación de dos tipos de componentes:

Field component:Para mostrar atributos en el área de contenido de una página.
Summary component:Para mostrar atributos en el panel lateral derecho de una página de detalles.

La siguiente captura de pantalla muestra la Detalles del envío página y resalta los diferentes componentes.

Una captura de pantalla de la página de detalles del envío. El cuadro 1 representa el componente de campo. El Cuadro 2 representa un componente de Resumen.

Procedimiento

Abra una terminal y vaya al módulo donde desea agregar el componente. Por ejemplo,devtoolkit_docker/orderhub-code/buc-app-order .
Cree el componente de campo ejecutando el siguiente comando.
```
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
```
Parámetros

nombre

(Obligatorio) El nombre del componente.

El esquema crea un nombre de clase de componente eliminando caracteres especiales y agregando la palabra "FieldsComponent". Por ejemplo, si especifica el nombre mi-muestra, el nombre de la clase generada es MySampleFieldsComponent.

ruta-archivo-json

(Obligatorio) La ruta donde desea actualizar o crear el archivo de configuración (buc-field-details.json ).

En elbuc-field-details.json archivo, el esquema crea un nombre de objeto agregando "-fields" al nombre. Por ejemplo, mi-campo-de-muestra.

ruta-del-archivo-de-traducción

(Obligatorio) La ruta hacia donde desea actualizar o crear los literales de traducción (en.json ).

En elen.json archivo, el esquema crea un nombre de objeto agregando "-field" al nombre. Por ejemplo, mi-campo-de-muestra.

es-panel-de-resumen

(Opcional) Booleano para determinar el tipo de componente a crear. Especificar verdadero para crear un componente de resumen. Especificar FALSO para crear un componente de campo. El valor predeterminado es true.

vía de acceso

(Opcional) La ruta para crear el archivo del componente, relativa al módulo actual. De forma predeterminada, se crea una carpeta con el mismo nombre que el componente en la carpeta raíz del módulo.

nombre-archivo-json

(Opcional) De forma predeterminada, el esquema se actualizabuc-field-details.json con datos de prueba. Si necesita actualizar o agregar su objeto a un archivo diferente, utilice este parámetro. Si especifica un nombre de archivo que no existe en la carpeta de activos, se crea un nuevo archivo.

proyecto

(Obligatorio) El nombre de la carpeta del paquete en la que se crea el esquema. Por ejemplo, al crear un componente de resultados de búsqueda en paquetes/pedido-resultado-búsqueda, el nombre del proyecto será pedido-resultado-búsqueda.

El siguiente comando proporciona un ejemplo con parámetros.
```
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
```
El esquema crea el nuevo componente y actualiza los archivos compartidos. La salida en la terminal resume los archivos que se crearon y actualizaron.
Si creaste un Componente de campo, edite el archivo HTML generado para pasar el parámetro de encabezado para especificar una etiqueta para la pestaña. Por ejemplo, si te refieres a la la captura de pantalla, la pestaña activa tiene la etiqueta "Detalles". La etiqueta "Detalles" se especifica agregando un encabezado con la ruta al literal de traducción en elen.json archivo:
```
[header]="'SHIPMENT_DETAILS.SHIPMENT_TABS.SHIPMENT_DETAILS'"
```