Añadir un cuadro de entrada a la página de detalles «Crear pedido»

El flujo «Crear pedido» es una acción de Pedido que pertenece al buc-app-order módulo. En esta lección, aprenderá a habilitar la personalización del buc-app-order módulo, copiar los activos necesarios para iniciar la personalización y, a continuación, añadir un cuadro de entrada para capturar el número de pedido de compra del cliente.

Procedimiento

Abre el devtoolkit_docker/orderhub-code/buc-app-order/overrides.json archivo.
Para crear un pedido, establezca runAsCustomization en verdadero para habilitar la personalización de esta ruta. Esta configuración le dice a Order Hub que busque tu código personalizado cuando se llama a la ruta create-order.

Importante: Establezca runAsCustomization en true solo para las rutas que se están personalizando actualmente. Se recomienda personalizar un máximo de cinco rutas a la vez.
Busca el código fuente de la página Crear pedido existente.
En este caso, los archivos están en buc-app-order/packages/create-order/src/app/features/order/create-order/order-setup/.
Replique la estructura de la carpeta src en la carpeta src-custom.
1. Ve al buc-app-order/packages/create-order/src-custom/app directorio.
2. Crea las carpetas features/order/create-order/order-setup
  Asegúrese de que la ruta resultante sea: buc-app-order/packages/create-order/src-custom/app/features/order/create-order/order-setup/.
Vaya al directorio buc-app-order/packages/create-order/src/app/features/order/create-order/order-setup y copie los archivos order-setup.component.html y order-setup.component.ts.

Nota: No es necesario copiar el archivo.scss, ya que este tutorial no cambia el estilo de los elementos.
Pega los archivos en el directorio buc-app-order/packages/create-order/src-custom/app/features/order/create-order/order-setup.
Es posible que notes algunos errores debido a las rutas relativas. Puede hacer caso omiso de estos errores.
Abre el archivo src-custom/app/features/order/create-order/order-setup/order-setup.component.html.
Dado que necesitas añadir un cuadro de entrada, analiza los cuadros de entrada que existen en el order-setup.component.html archivo. Puede utilizar el cuadro de entrada del número de pedido como punto de partida. El siguiente paso utiliza un código similar al del cuadro de entrada del número de pedido.
Añade el nuevo cuadro de entrada en la misma fila que el campo existente «Fecha de cancelación solicitada».
Consejo: Busca «Fecha de cancelación solicitada» y fíjate en que se encuentra dentro de un div con class bx--row. Añade el siguiente cuadro de entrada como una columna dentro de esta fila.
```
<div class="combo-box bx--col-md-3">
                <buc-label class="size--sm" [label]="'CREATE_ORDER.ORDER_SETUP.CUSTOMER_PO_ORDER_LABEL' | translate" placeholder=""
                    [(inputValue)]="custPONo" [isDisabled]="isEdit"></buc-label>
</div>
```
- Este cuadro de entrada permite a los usuarios añadir un número de pedido de compra del cliente al pedido que están creando.
- El valor [label] utiliza notación de puntos para recuperar la cadena de los archivos de traducción JSON. Creará el en.json archivo que contiene la cadena literal en pasos posteriores.
- custPONo es una variable personalizada que contendrá la entrada del usuario. Actualizará el archivo.ts para incluir esta nueva variable custPONo en pasos posteriores.
Configurar cadenas de traducción y configuraciones de entorno.
1. Copia la carpeta «assets» de buc-app-order/packages/order-shared y pégala en buc-app-order/packages/create-order/src-custom.
2. Abre el buc-app-order/angular.json archivo.
3. Reemplaza el contenido actual de la matriz projects > create-order > architect > build > configurations > merged > assets con las siguientes entradas. El objetivo de este paso es indicar al módulo que utilice los archivos de recursos personalizados en lugar de los archivos de /order-shared.
```
            "assets": [
              {
                "glob": "**",
                "input": "packages/create-order/src-merged/assets",
                "output": "assets"
              },
              {
                "glob": "*.json",
                "input": "packages/create-order/src-merged/assets/buc-app-order",
                "output": "assets/create-order"
              },
              {
                "glob": "**",
                "input": "node_modules/@buc/svc-angular/assets",
                "output": "assets"
              },
              {
                "glob": "**",
                "input": "node_modules/@buc/common-components/assets",
                "output": "assets"
              }
            ],
```
4. Reemplaza también el contenido de la matriz projects > create-order > architect > build > configurations > merged-prod > assets.
5. Copie la carpeta «environments» de buc-app-order/packages/create-order/src«» a «buc-app-order/packages/create-order/src-custom».
6. Ve al buc-app-order/packages/create-order/src-custom/environments directorio.
7. Añade la siguiente línea al final de los archivos environment.ts envrionment.prod.ts y.
```
environment.customization = true;
```
8. Detenga y reinicie el servidor para que los cambios en los archivos angular.json overrides.json y surta efecto.
  Detén el trabajo. A continuación, ejecute:
```
yarn stop-app
```
```
yarn start-app
```
9. Cree una carpeta personalizada en «buc-app-order/packages/create-order/src-custom/assets». Puede colocar sus recursos personalizados en esta carpeta.
10. Cree una carpeta « i18n » en «buc-app-order/packages/create-order/src-custom/assets/custom».
11. Cree un archivo en.json en 'buc-app-order/packages/create-order/src-custom/assets/custom/i18n.
  El en.json archivo incluye las cadenas literales en inglés que se mostrarán en la interfaz de usuario. Puedes añadir cadenas traducidas creando otros archivos JSON. Nombra los archivos según los códigos de idioma ISO-639. Por ejemplo, fr.json para cadenas en francés.
12. Pega el siguiente contenido JSON en el en.json archivo.
```
{
    "CREATE_ORDER": {
        "ORDER_SETUP": {
            "CUSTOMER_PO_ORDER_LABEL": "Customer purchase order number (optional)"
        }
    }
}
```
  Este archivo de traducción se utiliza para mostrar el texto en inglés del cuadro de entrada que ha creado en el paso 9.
Abre el archivo src-custom/app/features/order/create-order/order-setup/order-setup.component.ts.
Añade la siguiente variable a la clase OrderSetupComponent.
```
custPONo = '';
```
Dado que este cuadro de entrada personalizado es similar al cuadro de entrada del número de pedido existente, puede buscar en el order-setup.component. archivo la variable orderNo y copiar su implementación para la variable custPONo.
1. Siguiendo la lógica de orderNo, añada el siguiente código a la función prepareOrderDetails( ).
```
this.custPONo = this.orderDetailsData.CustomerPONo;
```
  Para obtener más información sobre la CustomerPONo API, consulte Javadoc.
2. Añade el siguiente código a la función « changeOrder( ».
```
CustomerPONo: this.custPONo,
```
3. El último lugar en el que aparece la variable orderNo es en la función onText($event, field). No es necesario utilizar esta función, así que ignora esta parte.
Asegúrate de que el parámetro se pasa a la llamada a la API. La API que se utiliza para crear un pedido se llama createOrder y se encuentra en buc-app-order/packages/order-shared/src/lib/data-services/create-order-data.service.ts. Ahora debe personalizar este archivo.ts.
1. Cree una carpeta de servicios de datos en /packages/create-order/src-custom/app/.
2. Copie el buc-app-order/packages/order-shared/src/lib/data-services/create-order-data.service.ts archivo en esta nueva carpeta.
3. Abre el buc-app-order/packages/create-order/src-custom/app/data-services/create-order-data.service.ts archivo.
4. Actualiza las rutas de importación para Plantillas y CommonService.
```
import { Templates } from '@buc/order-shared/lib/constants/order.constants';
import { CommonService } from '@buc/order-shared/lib/data-services/common-service.service';
```
5. En createOrChangeOrder, añada el siguiente código para pasar el valor CustomerPONo desde el cuadro de entrada.
```
CustomerPONo: params.CustomerPONo,
```
6. Modifique el buc-app-order/packages/create-order/src-custom/app/app-customization.impl.ts archivo de la siguiente manera.
  - Añade una declaración de importación:
```
import { CreateOrderDataService } from "./data-services/create-order-data.service";
```
  - Añade el « CreateOrderDataService » a la matriz de proveedores.
  Por ejemplo:
```
import { CreateOrderDataService } from "./data-services/create-order-data.service";

export class AppCustomizationImpl {
    static readonly components = [];

    static readonly providers = [CreateOrderDataService];

    static readonly imports = [];

}
```
7. En el src-custom/app/features/order/create-order/order-setup/order-setup.components.ts archivo, cambia la ruta de importación de CreateOrderDataService a:
```
import { CreateOrderDataService } from '../../../../data-services/create-order-data.service';
```
Has añadido correctamente un cuadro de entrada a la página Crear detalles del pedido. Ahora prueba los cambios.
1. Inicie sesión en el centro de pedidos de última generación.
2. Haga clic en Pedidos > Salientes.
3. Haga clic en Crear pedido.
  Ahora puede ver el campo Número de pedido del cliente (opcional).

Qué hacer a continuación

Implemente su personalización. Para obtener más información, consulte Preparación para implementar personalizaciones en aplicaciones existentes.