Modificación de los modales proporcionados por la aplicación

Los diálogos modales se utilizan para presentar información crítica o para solicitar la entrada de usuario necesaria para completar acciones de usuario específicas. Las acciones de usuario incluyen la cancelación de una orden, la visualización de series, la adición o visualización de notas para una orden o línea de pedido, etc.

Un diálogo modal es similar a una pantalla emergente, que abre un recuadro de diálogo para visualizar una pantalla sobre el contenido de la aplicación principal. Todos los diálogos modales se muestran en la pantalla padre. Cuando se abre un diálogo modal, los usuarios no pueden volver a la pantalla padre. Además, cualquier acción de usuario se ignora hasta que se complete la tarea modal o se cierre el diálogo modal.

Puede personalizar los modales proporcionados por la aplicación según sea necesario para su empresa.

Antes de empezar

Los modales proporcionados por la aplicación están presentes en el directorio de modales de los componentes de página o pantalla correspondientes, tal como se explica en los ejemplos siguientes:

El componente modal Cancelar orden se muestra cuando pulsa la tarea relacionada Cancelar orden en la pantalla Resumen de orden . El componente modal de cancelación de pedido está presente en el directorio <store-temp>/packages/features/orders/src/app/features/orders/order-summary-page/modals/cancel-order-modal .
El componente modal de escasez de registro se muestra cuando desea marcar una cantidad de producto como escasez en la página Recogida del flujo de inventario de traslado. El componente modal de escasez de registros está presente en el directorio <store-temp>/packages/features/move-inventory/src/app/features/move-inventory/move-inventory-wizard-page/modals/record-shortage .

Para alterar temporalmente cualquier modal proporcionado por la aplicación, debe conocer el modalId del modal. El modalId se utiliza para identificar de forma exclusiva el modal proporcionado por la aplicación. Por lo tanto, lo utiliza el mandato override-modal que le permite personalizar el modal.

El modalId se define como una variable dentro de la clase de componente modal proporcionada por la aplicación, tal como se ilustra en el ejemplo siguiente:

export class OrderTotalModalComponent implements OnInit {
  public static modalId = 'orders.order-total-modal';
  ...
  ...

Cuando se altera temporalmente un modal proporcionado por la aplicación, todo el directorio del componente modal se copia en el directorio <store-temp>/extensions/features/override-modals . Puede modificar el componente modal que se copia según sea necesario para su empresa.

Nota: Cuando desee modificar sólo el código modal, no copie la pantalla padre ni el código de componente.

Para correlacionar el modal proporcionado por la aplicación con el modal personalizado o de sustitución, utilice el archivo de configuración <store-temp>/extensions/features/override-modals/src/assets/override-modals/config/isf-modal-config.json . Puede determinar fácilmente el modal proporcionado por la aplicación que se altera temporalmente y el componente modal personalizado que se utiliza para alterar temporalmente.

La tabla siguiente describe la definición de esquema del archivo isf-modal-config.json :

Tabla 1. Atributos y descripciones de la definición del esquema
Nombre de atributo	Descripción
applicationProvidedModalId	Un identificador único que se asigna a los modales proporcionados por la aplicación para los que la convención de nomenclatura es,`<feature-name>.<parent-page-name>.<modal-name>`. Por ejemplo, `orders.order-summary-page.cancel-order-modal`.
overrideModalId	Un identificador exclusivo que se asigna a los modales alterados temporalmente o personalizados para los que el convenio de denominación es, `custom-<applicationProvidedModalId>`. Por ejemplo,`custom-orders.order-summary-page.cancel-order-modal`.

Procedimiento

Vaya al directorio <store-temp> y ejecute el mandato siguiente:
```
yarn override-modal --application-provided-modal-id=<component-modal-id>
```
Por ejemplo:
```
yarn override-modal --application-provided-modal-id=functional-components.identify-customer-modal
```
Aquí, --application-provided-modal-id hace referencia al ID modal del componente modal proporcionado por la aplicación que desea modificar.

Puede identificar el modalId del modal proporcionado por la aplicación haciendo referencia al código fuente del componente modal que desea personalizar.
El mandato completa las tareas siguientes:
- Copia la carpeta de componente modal proporcionada por la aplicación en <store-temp>/extensions/features/override-modals/src/app/<feature-name>.
  Para organizar el modals que pertenece a la misma aplicación en una sola carpeta, se recomienda crear una carpeta <feature-name> en el directorio <store-temp>/extensions/features/override-modals/src/app .
- Importa automáticamente el componente y crea una entrada del componente en el objeto customModalsDeclarations en el archivo app.module.ts que está presente en la carpeta <store-temp>/extensions/features/override_modals/src/app .
- Para evitar conflictos de nombres modales con el modalIdsproporcionado por la aplicación, el mandato actualiza el modalId del componente modal personalizado añadiendo el prefijo custom- al modalId existente, tal como se muestra en el fragmento de código.
- Para correlacionar el modalId proporcionado por la aplicación con el modalIdpersonalizado o de alteración temporal, actualiza el archivo isf-modal-config.json que está presente en la carpeta <store-temp>/extensions/features/override-modals/src/assets/override-modals/config/ .
  El siguiente fragmento de código ilustra la entrada de ejemplo en isf-modal-config.json:
  [ { "applicationProvidedModalId": "orders.order-summary-page.cancel-order-modal", "overrideModalId": "custom-orders.order-summary-page.cancel-order-modal" }]
  Nota: El mandato de CLI sólo copia los archivos que están presentes en la carpeta de componentes. Si el componente ampliado importa archivos fuera de la carpeta de componentes, asegúrese de copiar manualmente dichos archivos en la ubicación adecuada dentro de la nueva carpeta de componentes modales. Además, asegúrese de importar y declarar en el archivo app.module.ts que está presente en la carpeta <store-temp>/extensions/features/override_modals/src/app .
En el componente modal personalizado, puede encontrar un _activeModal: NgbActiveModal privado en el constructor. Sustituya el servicio NgbActiveModal por StoreWrapperModalServicey asegúrese de importar StoreWrapperModalService desde '@store/core'. Este cambio es necesario para pasar los datos modales de la aplicación altera temporalmente modal a la aplicación lista para usar.

Nota: Si el modal proporcionado por la aplicación envía datos a la pantalla padre, el modal personalizado también debe enviar datos a la pantalla padre. Asegúrese de conservar el esquema de modelo de datos original sin modificar el tipo o eliminar los atributos del objeto de datos.
Para dar soporte a la localización e internacionalización, las carpetas i18n están presentes en la carpeta <store-temp>/extensions/features/override-modals/src/assets/override-modals/i18n/ . Puede crear archivos JSON de paquete específicos del idioma y añadir el archivo JSON específico del idioma de las entradas de paquete personalizado. Por ejemplo, para el entorno local inglés, cree en.json y añada el archivo JSON específico del idioma de las entradas de paquete personalizadas.
Para reutilizar las entradas de paquete proporcionadas por la aplicación existentes que son necesarias para el modal alterado temporalmente, configure la vía de acceso del módulo de característica correspondiente tal como se ilustra en el fragmento de código de ejemplo.

Por ejemplo, si altera temporalmente la característica asignar modal de tarea de recuento de ciclos, añada el recuento de ciclos a la matriz de paquetes en <store-temp>/extensions/features/override_modals/src/app/app.module.ts.
```
static bundles: Array<any> = [
   {
     prefix: './assets/cycle-count/i18n/',
     suffix: '.json'
   },
   {
     prefix: './assets/override-modals/i18n/',
     suffix: '.json'
   }
 ].concat(CommonBundlesModule.bundles);
};
```
Nota: En la matriz de paquetes, añada './assets/override-modals/i18n/' al final.

Qué hacer a continuación

Para verificar localmente la pantalla proporcionada por la aplicación ampliada, inicie la aplicación ejecutando el mandato siguiente y vaya a la pantalla donde se visualiza el modal.
```
yarn start-app
```
Para verificar los cambios en el kit de herramientas del desarrollador, extraiga y despliegue las personalizaciones. Para obtener más información sobre la extracción e implantación de personalizaciones, consulte Extracción de personalizaciones.