A página de resultados da pesquisa de pedidos e as ações pertencem ao buc-app-order módulo. Nesta lição, você aprenderá como habilitar a personalização do buc-app-order módulo e, em seguida, copiar os recursos necessários para iniciar a personalização.
Procedimento
- Abra o devtoolkit_docker/orderhub-code/buc-app-order/overrides.json arquivo.
- Para o resultado da pesquisa de pedidos, defina runAsCustomization como verdadeiro para habilitar a personalização para esta rota. Essa configuração instrui o Order Hub a consultar seu código personalizado quando a rota order-search-result for chamada.
Importante: defina runAsCustomization como verdadeiro apenas para as rotas que estão sendo personalizadas no momento. Recomenda-se personalizar no máximo cinco rotas por vez.
- Abra um terminal e vá para o devtoolkit_docker/orderhub-code/buc-app-order/ diretório.
- Inicie o aplicativo executando o seguinte comando.
yarn start-app
A compilação e a inicialização do aplicativo podem levar vários minutos. Aguarde a mensagem “Compilado com sucesso” para cada rota em que runAsCustomization estiver definido como verdadeiro. Por exemplo,
resultado da pesquisa de ordem: √ Compilado com sucesso.
Você verá uma mensagem "** Angular Live Development Server is
listening on bucgenerichost:<port>, open your browser on
https://bucgenerichost:<port>/buc-app-order/order-search-result **"Você pode ignorar esta mensagem. Você deve usar o Order Hub para visualizar o módulo. A etapa 5 descreve como testar o módulo no Order Hub.
As telas de pedidos são modularizadas em diferentes pacotes no buc-app-order aplicativo. Cada pacote segue a estrutura de pastas src e src-custom.
- src contém um código fornecido pel IBM. Não modifique nada nesta pasta.
- src-custom contém todo o seu código de personalização.
- src-merged é gerado após a compilação do aplicativo, que mescla src e src-custom.
Consulte a captura de tela a seguir para ver a estrutura da pasta
src-custom enquanto segue as etapas abaixo.
- Configure o Order Hub para renderizar o módulo buc-app-order a partir do seu kit de ferramentas de desenvolvedor.
- Verifique se você pode adicionar conteúdo aos pontos de extensão existentes disponíveis no modal Ordem de programação usando a abordagem de personalização diferencial :
- No Order Hub, clique em .
- Pesquisar um pedido.
- Na página de resultados da pesquisa, clique no menu de overflow no final de uma linha e, em seguida, clique em Agendar.
- Pressione Ctrl + D para mostrar os pontos de extensão disponíveis no modal.
- Anote os identificadores dos pontos de extensão aos quais você deseja adicionar conteúdo.
Neste caso, utilizaremos o ponto de extensão schedule_modal_shared_bottom para a personalização.
- Quando terminar, pressione Ctrl + Shift + D para ocultar os pontos de extensão disponíveis no modal.
Resultados
Agora, você está pronto para começar a desenvolver as alterações no modal usando o ponto de extensão identificado.