Tutorial: Personalizando a ação Agendar pedido

Neste tutorial, você aprenderá como personalizar um aplicativo Order Hub existente para personalizar a ação Agendar pedidos.

A personalização por código é utilizada neste tutorial, onde:
  • A abordagem de personalização diferencial é usada para identificar os pontos de extensão existentes disponíveis no modal da ordem de programação.
  • A personalização por meio de substituições é usada para modificar uma ação de tabela existente, substituindo apenas a classe de serviço da ação. As substituições são usadas porque o tutorial assume uma ação de tabela existente em vez de adicionar uma nova.

Suponha que sua empresa precise personalizar a ação Agendar pedidos do Order Hub. No fluxo do processo de pedidos da sua empresa, você deseja permitir que os usuários insiram manualmente uma nota para explicar o motivo de suas seleções de agendamento ao agendar determinados pedidos.

Objetivos de aprendizagem

  • Como personalizar páginas no aplicativo Pedidos.
  • Como modificar uma ação de tabela existente substituindo apenas a classe de serviço da ação.
  • Como adicionar elementos extras em um modal e encadear algumas chamadas de API de back-end a partir da interface do usuário.
  • Como chamar uma API OMS.

Tempo Necessário

Este tutorial deve levar aproximadamente 60 minutos para ser concluído. Se forem explorados outros conceitos relacionados a este tutorial, poderá demorar mais tempo para ser concluído.

Nível de qualificação

Iniciante

Público

Desenvolvedores que desejam personalizar o Order Hub.

Pré-requisitos

  • Configure um ambiente de kit de ferramentas para desenvolvedores. Para obter mais informações, consulte Introdução à personalização do Order Hub.
  • Habilite a personalização para o módulo buc-app-order. Para obter mais informações, consulte Personalização de aplicativos existentes.

Resultados Esperados

Quando um usuário clica em Agendar na tabela de resultados da pesquisa de pedidos, uma janela modal é exibida. No modal, você terá agora uma nova seção “Adicionar nota” com os seguintes campos:

  • Seletor de data para escolher uma data para entrar em contato com o cliente.
  • Seletor de hora para escolher um horário para entrar em contato com o cliente.
  • Campos de texto para fornecer as informações de contato. Todas as informações atuais do cliente são preenchidas automaticamente.
  • Campo de texto para inserir a nota.
  • Menu suspenso para escolher o motivo da nota. O menu chama getCommonCodeList para preencher os valores.
  • Menu suspenso para escolher o tipo de contato. O menu chama getCommonCodeList para preencher os valores.
  • Campo de texto para inserir informações de referência de contato.
  • O botão Salvar chama modifyFulfillmentOptions para salvar a nota.
Uma caixa vermelha destaca a nova seção Adicionar nota, que você personalizará no modal Ordem de programação