Modificación de la barra de navegación proporcionada por la aplicación

Actualmente, la barra de navegación de la aplicación incluye opciones de menú de búsqueda global y alertas. Puede ampliar la barra de navegación según sea necesario para su empresa y visualizar las opciones de menú de alerta o búsqueda global personalizada. De forma alternativa, puede ocultar las opciones del menú global o de alerta en la barra de navegación o añadir una opción de menú.

La barra de navegación da soporte a la sustitución y a la extensibilidad diferencial. En función de su caso de uso empresarial, puede elegir cualquiera de estos enfoques.

En el enfoque de extensibilidad de alteración temporal, puede ser propietario del código fuente de la barra de navegación. Utilice el enfoque de extensibilidad de alteración temporal como punto de ampliación para conectar características que no se pueden conseguir utilizando el enfoque de extensibilidad diferencial en la página de inicio o la barra de navegación. Para obtener más información, consulte Personalización de la barra de navegación mediante la extensibilidad de anulación.

Ampliación de opciones de menú con extensibilidad diferencial

Actualmente, la barra de navegación contiene opciones de menú de alertas y búsqueda global que están presentes en el directorio <store-temp>/<packages>/libs/functional-components/src/lib correspondiente.

El componente de navegación Alertas se visualiza en la barra de navegación, que muestra las alertas entrantes. Este componente está presente en el directorio <store-temp>/packages/libs/functional-components/src/lib/alert y se expande o contrae al pulsar el icono de campana.
El componente de navegación de búsqueda global se muestra en la barra de navegación. Puede realizar una búsqueda global para abrir rápidamente un pedido. Este componente está presente en el directorio <store-temp>/packages/libs/functional-components/src/lib/global-search y se expande o contrae al pulsar el icono de búsqueda.

Los siguientes casos de uso de personalización están soportados para la barra de navegación:

Puede sustituir las opciones de menú de alerta y búsqueda global proporcionadas por la aplicación por componentes personalizados.
Puede ocultar las opciones de menú de alerta y búsqueda global proporcionadas por la aplicación.
Puede añadir una opción de menú. Para obtener más información, consulte Añadir una opción de menú.

Para correlacionar las opciones de menú de la barra de navegación proporcionadas por la aplicación con el componente personalizado, utilice el archivo <store-temp>/extensions/features/override-component/src/assets/override-component/config/isf-navbar-extn-config.json . En el archivo JSON, asegúrese de correlacionar los identificadores exclusivos de los componentes proporcionados por la aplicación con los componentes alterados temporalmente.

La tabla siguiente describe la definición de esquema del archivo isf-navbar-extn-config.json :

Tabla 1. Atributos y descripciones de la definición del esquema
Nombre de atributo	Descripción
menuTID	Especifica el identificador exclusivo para la opción de menú que se visualiza en la barra de navegación. Los valores válidos son `navBarMenuWidget_1` o `navBarMenuWidget_2`.
componentName	Especifica el nombre de componente que se carga en la barra de navegación. Por ejemplo, `AlertsExtnComponent` o `GlobalSearchExtnComponent`.
visualizar	Indica si la opción de menú debe mostrarse u ocultarse en la barra de navegación. Los valores válidos son true o false. El valor predeterminado es true.

Cuando altere temporalmente un componente de navegación proporcionado por la aplicación, actualice <store-temp>/extensions/features/override-component/src/assets/override-component/config/isf-navbar-extn-config.json con los atributos descritos en la tabla.

El siguiente archivo isf-navbar-extn-config.json de ejemplo ilustra cómo ocultar el menú de búsqueda global y sustituir la opción de menú de alerta proporcionada por la aplicación por el componente personalizado AlertsExtensionComponent .

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

Procedimiento

Cree un componente personalizado.
Vaya al directorio <store-temp>/extensions/features/override-component/src/app/components y ejecute el mandato siguiente:
```
ng g c <componentName> --prefix=isf
```
Añada la variable de serie estática overrideComponent con el valor como nombre de clase de componente tal como se ilustra.
```
....
public static overrideComponent = 'AlertsExtensionComponent';
....
```
Actualice el nombre de clase de componente personalizado.
Vaya al directorio <store-temp>/extensions/features/override-component/src/app . Abra el archivo app.module.ts y actualice el nombre de clase de componente personalizado en el objeto customComponentDeclarations .
Actualice el archivo <store-temp>/extensions/features/override-component/src/assets/override-component/config/isf-navbar-extn-config.json con los detalles adecuados. Por ejemplo, para sustituir el componente de alerta proporcionado por la aplicación con el AlertsExtensionComponentpersonalizado, actualice como se indica a continuación:
```
[
    {
        "menuTID": "navBarMenuWidget_2",
        "componentName": "AlertsExtensionComponent"
    }

]
```
Verifique que los cambios se reflejen en la barra de navegación.
Para verificar localmente la barra de navegación proporcionada por la aplicación ampliada, inicie la aplicación ejecutando el mandato siguiente:
```
yarn start-app
```

Qué hacer a continuación

Para verificar los cambios en el kit de herramientas del desarrollador, extraiga y despliegue las personalizaciones. Para obtener más información sobre cómo extraer e implementar personalizaciones, consulte Extraer personalizaciones.