Alterando os nomes dos cabeçalhos da tabela

Aprenda a alterar os nomes dos cabeçalhos em uma tabela usando a técnica de personalização por configuração. Nesta lição, você modificará um buc-table-config.json arquivo que define as características da tabela.

Para este cenário, você deseja modificar a tabela na página Gerenciar linhas. Na tabela, você deseja alterar os nomes dos cabeçalhos Data de entrega solicitada, Data de cancelamento e Data de envio solicitada para Data de entrega desejada, Data de rescisão desejada e Data de disponibilidade desejada.
Uma captura de tela do modal Pesquisa avançada
Observação: essa abordagem não se limita aos cabeçalhos das tabelas. Ele pode ser usado para alterar qualquer rótulo que você encontrar nos arquivos JSON de tradução. Por conveniência, todas as alterações de rótulo podem ser definidas em um único arquivo JSON personalizado.

Procedimento

  1. Primeiro, você precisa encontrar o esquema no buc-table-config.json arquivo que corresponde à tabela que você precisa modificar.
    1. Faça login no Order Hub.
    2. Abra a guia Console do navegador.
    3. Vá para a página Gerenciar linhas do fluxo Criar pedido.
      • Se você estiver continuando na mesma sessão do navegador da lição anterior, adicione um item ao pedido e clique em Avançar.
      • Se você estiver iniciando uma nova sessão, vá para Pedidos > Saída. Clique em Criar pedido e siga as etapas até chegar à página Gerenciar linhas.
    4. Quando você chegar à página Gerenciar linhas, verifique no Console a última mensagem que inclui BaseTableComponent.initializeTable.
      Você pode ver o nome do esquema create-orderline.
      Uma captura de tela do console com o nome do esquema “create-orderline” destacado com uma caixa vermelha
  2. Abra o arquivo buc-app-order/packages/create-order/src-custom/assets/buc-app-order/buc-table-config.json.
  3. No esquema create-orderline, localize os cabeçalhos da tabela que deseja personalizar.
    O trecho a seguir exibe os três cabeçalhos correspondentes à data de entrega solicitada, data de cancelamento e data de envio solicitada :
          {
              "id": "deliveryDate",
              "name": "SHARED.GENERAL.LABEL_reqDelDate",
              "sortable": true,
              "sortKey": "ReqDeliveryDate",
              "style": {
                "min-width": "12rem"
              }
          },
          {
              "id": "cancelDate",
              "name": "SHARED.GENERAL.LABEL_cancelDate",
              "sortable": true,
              "sortKey": "ReqCancelDate",
              "style": {
                "min-width": "12rem"
              }
          },
          {
              "id": "requestShipDate",
              "name": "SHARED.GENERAL.LABEL_REQUESTED_SHIPDATE",
              "sortable": true,
              "sortKey": "ReqShipDate",
              "style": {
                "min-width": "12rem"
              }
          }
    A chave nome define a string do cabeçalho.
  4. Agora que você conhece as chaves utilizadas para o cabeçalho, abra o packages/create-order/src-custom/assets/custom/i18n/en.json arquivo.
  5. Adicione a seguinte entrada ao arquivo JSON para usar as strings personalizadas Data de entrega desejada, Data de rescisão desejada e Data de disponibilidade desejada.
    Este tutorial adicionou o CREATE_ORDER objeto no arquivo JSON anteriormente, portanto, adicione este código após CREATE_ORDER.
    
        "SHARED": {
            "GENERAL": {
              "LABEL_reqDelDate": "Desired delivery date", 
              "LABEL_REQUESTED_SHIPDATE": "Desired availability date",
              "LABEL_cancelDate": "Desired termination date"
            }
        }
    
  6. Recarregue o quadro e vá para a página Gerenciar linhas para verificar as alterações.
    Agora você pode ver as strings atualizadas na tabela.
    Uma captura de tela da tabela Gerenciar linhas com os novos cabeçalhos

O que fazer depois

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