Adicionando um campo de pesquisa ao modal Pesquisa avançada

Aprenda a adicionar um campo de pesquisa personalizado usando a técnica de personalização por configuração. Nesta lição, você modificará um search_fields.json arquivo que define os campos a serem exibidos nas páginas de pesquisa.

Para este cenário, você deseja adicionar um campo de pesquisa no modal Pesquisa avançada. O modal Pesquisa avançada está na etapa Adicionar linhas da criação de um pedido para pesquisar um item. A API OMS, getCompleteItemList, é chamada para pesquisar itens. Queremos adicionar um critério de pesquisa para AliasValue ( <ItemAliasList><ItemAliasAliasValue=""/></ItemAliasList> )
Uma captura de tela do modal Pesquisa avançada

Procedimento

  1. Primeiro, você precisa encontrar a chave JSON associada ao modal onde deseja adicionar o campo de pesquisa personalizado.
    1. Como a página que precisa ser personalizada faz parte do buc-app-order módulo, abra o buc-app-order/packages/create-order/src-custom/assets/buc-app-order/search_fields.json arquivo.
    2. Encontre um rótulo no JSON que corresponda ao rótulo no modal.
      Por exemplo, o modal tem uma etiqueta “ID do catálogo principal”. Pesquise o termo mestre. O arquivo contém duas ocorrências. Ao observar todos os outros campos no mesmo objeto pai, você pode perceber que a chave para o modal “Pesquisa avançada” é a chave add-order.
  2. Crie um arquivo search_fields.json dentro da packages/create-order/src-custom/assets/custom pasta.
  3. Usando a tecla “adicionar ordem”, cole o código a seguir para adicionar um campo personalizado “ ItemAlias ” para representar o código UPC, EAN ou código do fabricante do item. Para obter mais informações sobre como definir campos de pesquisa no JSON, consulte Adicionando campos de pesquisa a páginas de pesquisa existentes.
    {
"add-order": {
    "fields": [
        {
        "label": "Alias value",
        "type": "dropdownQuery",
        "target": "add-order",
        "request": "ItemAliasList.ItemAlias.AliasValue",
        "operator": "LIKE",
        "fetch": {
          "api": "getQueryTypeList",
          "type": "oms",
          "parameters": {},
          "response": {
            "listAttribute": "StringQueryTypes.QueryType",
            "map": {
              "id": "QueryType",
              "label": "QueryTypeDesc"
            }
          }
        }
    }
    ]
}
}
  4. Você adicionou com sucesso um campo de pesquisa ao modal Pesquisa avançada. Agora teste as alterações.
    1. Se você ainda estiver conectado ao Order Hub de última geração, recarregue o quadro. Caso contrário, faça login no Order Hub de última geração.
    2. Selecione Pedidos > Saída.
    3. Clique em Criar pedido.
    4. Preencha todos os detalhes e clique em Avançar para acessar a página Adicionar linhas.
    5. Na página Adicionar linhas, clique em Pesquisa avançada.
      Agora você pode ver o valor do campo Alias.
      Uma captura de tela do modal de pesquisa avançada com o campo personalizado “Valor do alias”
    6. Abra a guia Rede do Console no seu navegador para verificar se a carga útil da solicitação da API inclui a nova entrada Alias.
    7. Adicione um valor no campo Valor do alias e execute uma pesquisa.
      Certifique-se de que você vê ItemAlias na carga útil.
      Uma captura de tela do modal de pesquisa avançada com o campo personalizado “Valor do alias”

O que fazer depois

Implemente sua personalização. Para obter mais informações, consulte Preparando-se para implantar personalizações para aplicativos existentes.