Modificando modais fornecidos pelo aplicativo

Os diálogos modais são usados para apresentar informações críticas ou para solicitar a entrada do usuário necessária para concluir ações específicas do usuário. As ações do usuário incluem cancelar um pedido, visualizar seriais, incluir ou visualizar notas para um pedido ou linha de pedido e assim por diante.

Um diálogo modal é semelhante a uma tela pop-up que abre uma caixa de diálogo para exibir uma tela sobre o conteúdo do aplicativo principal. Todas as caixas de diálogo modais são exibidas na tela pai. Quando um diálogo modal é aberto, os usuários não podem retornar para a tela pai Além disso, qualquer ação do usuário é ignorada até que a tarefa modal seja concluída ou o diálogo modal seja fechado

É possível customizar os modais fornecidos pelo aplicativo conforme necessário para seus negócios.

Antes de iniciar

Os modais fornecidos pelo aplicativo estão presentes no diretório de modais dos componentes de página ou tela correspondentes, conforme explicado nos exemplos a seguir:

O componente modal cancelar pedido é exibido quando você clica na tarefa relacionada Cancelar pedido na tela Resumo do pedido . O componente modal de pedido de cancelamento está presente no diretório <store-temp>/packages/features/orders/src/app/features/orders/order-summary-page/modals/cancel-order-modal
O componente modal de escassez de registro é exibido quando você deseja marcar uma quantidade de produto como escassez na página Seleção do fluxo de inventários de movimentação.. O componente modal de escassez de registro está presente no diretório <store-temp>/packages/features/move-inventory/src/app/features/move-inventory/move-inventory-wizard-page/modals/record-shortage

Para substituir qualquer modal fornecido pelo aplicativo, você deve saber o modalId do modal. O modalId é usado para identificar exclusivamente o modal fornecido pelo aplicativo. Portanto, ele é usado pelo comando override-modal que permite customizar o modal.

O modalId é definido como uma variável dentro da classe de componente modal fornecida pelo aplicativo, conforme ilustrado no exemplo a seguir:

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

Quando você substitui um modal fornecido pelo aplicativo, o diretório do componente modal inteiro é copiado no diretório <store-temp>/extensions/features/override-modals . É possível modificar o componente modal copiado conforme necessário para seus negócios.

Nota: quando desejar modificar apenas o código modal, não copie a tela pai ou o código do componente.

Para mapear o modal fornecido pelo aplicativo com o modal customizado ou de substituição, use o arquivo de configuração <store-temp>/extensions/features/override-modals/src/assets/override-modals/config/isf-modal-config.json . É possível determinar facilmente o modal fornecido pelo aplicativo que é substituído, e o componente modal customizado que é usado para substituir.

A tabela a seguir descreve a definição de esquema do arquivo isf-modal-config.json :.

Tabela 1. Atributos e descrições da definição do esquema
Nome do atributo	Descrição
applicationProvidedModalId	Um identificador exclusivo que é atribuído aos modais fornecidos pelo aplicativo para os quais a convenção de nomenclatura é`<feature-name>.<parent-page-name>.<modal-name>`. Por exemplo, `orders.order-summary-page.cancel-order-modal`.
overrideModalId	Um identificador exclusivo que é designado aos modais substituídos ou customizados para os quais a convenção de nomenclatura é `custom-<applicationProvidedModalId>`. Por exemplo,`custom-orders.order-summary-page.cancel-order-modal`.

Procedimento

Acesse o diretório <store-temp> e execute o comando a seguir:
```
yarn override-modal --application-provided-modal-id=<component-modal-id>
```
Por exemplo,
```
yarn override-modal --application-provided-modal-id=functional-components.identify-customer-modal
```
Aqui, --application-provided-modal-id refere-se ao ID modal do componente modal fornecido pelo aplicativo que você deseja modificar.

É possível identificar o modalId do modal fornecido pelo aplicativo consultando o código de origem do componente modal que você deseja customizar.
O comando conclui as tarefas a seguir:
- Copia a pasta do componente modal fornecido pelo aplicativo para o <store-temp>/extensions/features/override-modals/src/app/<feature-name>
  Para organizar o modals que pertence ao mesmo aplicativo em uma única pasta, é recomendado criar uma pasta <feature-name> no diretório <store-temp>/extensions/features/override-modals/src/app .
- Importa automaticamente o componente e cria uma entrada do componente no objeto customModalsDeclarations no arquivo app.module.ts presente na pasta <store-temp>/extensions/features/override_modals/src/app .
- Para evitar colisões de nome modal com o modalIdsfornecido pelo aplicativo, o comando atualiza o modalId do componente modal customizado prefixando custom- para o modalId existente conforme mostrado no fragmento de código.
- Para mapear o modalId fornecido pelo aplicativo com o customizado ou substituir modalId, atualiza o arquivo isf-modal-config.json que está presente na pasta <store-temp>/extensions/features/override-modals/src/assets/override-modals/config/ .
  O fragmento de códigos a seguir ilustra a entrada de amostra em isf-modal-config.json:
  [ { "applicationProvidedModalId": "orders.order-summary-page.cancel-order-modal", "overrideModalId": "custom-orders.order-summary-page.cancel-order-modal" }]
  Nota: o comando da CLI copia apenas os arquivos que estão presentes na pasta do componente.. Se o componente estendido importar arquivos fora da pasta do componente, assegure-se de copiar manualmente esses arquivos no local apropriado dentro da nova pasta do componente modal. Além disso, assegure que você importe e declare no arquivo app.module.ts que está presente na pasta <store-temp>/extensions/features/override_modals/src/app .
No componente modal customizado, é possível localizar um _activeModal: NgbActiveModal privado no construtor.. Substitua o serviço NgbActiveModal por StoreWrapperModalServicee certifique-se de importar StoreWrapperModalService de '@store/core'. Essa mudança é necessária para transmitir os dados modais do aplicativo modal de substituição para o aplicativo pronto para uso..

Nota: se o modal fornecido pelo aplicativo enviar dados para a tela pai, o modal customizado também deverá enviar dados para a tela pai Assegure-se de manter o esquema do modelo de dados original sem modificar o tipo ou remover quaisquer atributos do objeto de dados.
Para suportar localização e internacionalização, as pastas i18n estão presentes na pasta <store-temp>/extensions/features/override-modals/src/assets/override-modals/i18n/ . É possível criar arquivos JSON do pacote configurável específico do idioma e incluir o arquivo JSON específico do pacote configurável customizado. Por exemplo, para o código de idioma inglês, crie en.json e inclua o arquivo JSON específico do idioma das entradas do pacote configurável customizado.
Para reutilizar as entradas de pacote configurável fornecidas pelo aplicativo existentes que são necessárias para o modal substituído, configure o caminho do módulo de recurso correspondente conforme ilustrado no fragmento de código de amostra.

Por exemplo, se você substituir o recurso designar modal de tarefa de contagem de ciclo, inclua a contagem de ciclo na matriz de pacotes configuráveis em <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: na matriz de pacote configurável, inclua './assets/override-modals/i18n/' no final.

O que fazer depois

Para verificar localmente a tela fornecida pelo aplicativo estendido, inicie o aplicativo executando o comando a seguir e navegue até a tela na qual o modal é exibido...
```
yarn start-app
```
Para verificar as mudanças no kit de ferramentas do desenvolvedor, extraia e implemente as customizações Para obter mais informações sobre como extrair e implantar personalizações, consulte Extraindo personalizações.