Modificando a barra de navegação fornecida pelo aplicativo

Atualmente, a barra de navegação no aplicativo inclui opções de menu de procura global e de alertas É possível estender a barra de navegação conforme necessário para seus negócios e exibir as opções do menu de procura global ou de alerta customizado. Como alternativa, é possível ocultar as opções de menu global e de alerta na barra de navegação ou incluir uma opção de menu

A barra de navegação suporta extensibilidade de substituição e diferenciada. Com base em seu caso de uso de negócios, você pode escolher qualquer uma dessas abordagens.

Na abordagem de extensibilidade de substituição, é possível possuir o código-fonte da barra de navegação Use a abordagem de extensibilidade de substituição como um ponto de extensão para conectar recursos que não podem ser alcançados usando a abordagem de extensibilidade diferencial na página inicial ou na barra de navegação... Para obter mais informações, consulte Personalização da barra de navegação por meio da extensibilidade de substituição.

Estendendo opções de menu com extensibilidade diferenciada

Atualmente, a barra de navegação contém opções de menu de procura global e de alertas que estão presentes no diretório <store-temp>/<packages>/libs/functional-components/src/lib correspondente

O componente de navegação Alertas é exibido na barra de navegação, mostrando os alertas recebidos. Esse componente está presente no diretório <store-temp>/packages/libs/functional-components/src/lib/alert e expande ou reduz quando você clica no ícone bell.
O componente de navegação de procura global é exibido na barra de navegação É possível executar uma procura global para abrir rapidamente uma ordem. Esse componente está presente no diretório <store-temp>/packages/libs/functional-components/src/lib/global-search e é expandido ou reduzido ao clicar no ícone de procura.

Os seguintes casos de uso de customização são suportados para a barra de navegação:

É possível substituir as opções de procura global e de menu de alerta fornecidas pelo aplicativo por componentes customizados
É possível ocultar as opções de procura global e de menu de alerta fornecidas pelo aplicativo
É possível incluir uma opção de menu Para obter mais informações, consulte Adicionar uma opção de menu.

Para mapear as opções de menu da barra de navegação fornecidas pelo aplicativo com o componente customizado, utilize o arquivo <store-temp>/extensions/features/override-component/src/assets/override-component/config/isf-navbar-extn-config.json No arquivo JSON, certifique-se de mapear os identificadores exclusivos dos componentes fornecidos pelo aplicativo com os componentes substituídos.

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

Tabela 1. Atributos e descrições da definição do esquema
Nome do atributo	Descrição
menuTID	Especifica o identificador exclusivo para a opção de menu exibida na barra de navegação. Os valores válidos são `navBarMenuWidget_1` ou `navBarMenuWidget_2`
componentName	Especifica o nome do componente carregado na barra de navegação. Por exemplo, `AlertsExtnComponent` ou `GlobalSearchExtnComponent`
exibição	Indica se a opção de menu deve ser mostrada ou oculta na barra de navegação Os valores válidos são true ou false. O valor padrão está configurado como true.

Ao substituir um componente de navegação fornecido pelo aplicativo, atualize <store-temp>/extensions/features/override-component/src/assets/override-component/config/isf-navbar-extn-config.json com os atributos descritos na tabela.

O arquivo isf-navbar-extn-config.json de amostra a seguir ilustra como ocultar o menu de procura global e substituir a opção do menu de alerta fornecido pelo aplicativo com o componente customizado AlertsExtensionComponent

[
    {
        "menuTID": "navBarMenuWidget_1",
        "display": false
    },
    {
        "menuTID": "navBarMenuWidget_2",
        "componentName": "AlertsExtensionComponent"
    }
   
]

Procedimento

Crie um componente customizado.
Acesse o diretório <store-temp>/extensions/features/override-component/src/app/components e execute o comando a seguir:
```
ng g c <componentName> --prefix=isf
```
Inclua a variável de sequência estática overrideComponent com o valor como o nome da classe de componente, conforme ilustrado.
```
....
public static overrideComponent = 'AlertsExtensionComponent';
....
```
Atualize o nome da classe do componente customizado
Vá para o diretório <store-temp>/extensions/features/override-component/src/app . Abra o arquivo app.module.ts e atualize o nome da classe do componente customizado no objeto customComponentDeclarations
Atualize o arquivo <store-temp>/extensions/features/override-component/src/assets/override-component/config/isf-navbar-extn-config.json com os detalhes apropriados Por exemplo, para substituir o componente de alerta fornecido pelo aplicativo pelo AlertsExtensionComponentcustomizado, atualize conforme a seguir:
```
[
    {
        "menuTID": "navBarMenuWidget_2",
        "componentName": "AlertsExtensionComponent"
    }

]
```
Verifique se suas alterações são refletidas na barra de navegação
Para verificar localmente a barra de navegação fornecida pelo aplicativo estendido, inicie o aplicativo executando o comando a seguir:
```
yarn start-app
```

O que fazer depois

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.