Modifying application-provided navigation bar

Currently, the navigation bar in the application includes global search and alerts menu options. You can extend the navigation bar as needed for your business, and display the customized global search or alert menu options. Alternatively, you can hide the global or alert menu options in the navigation bar or add a menu option.

The navigation bar supports both override and differential extensibility. Based on your business use case, you can choose any of these approaches.

In the override extensibility approach, you can own the source code of the navigation bar. Use the override extensibility approach as an extension point to plug in features that cannot be achieved by using the differential extensibility approach in the home page or navigation bar. For more information, see Customizing navigation bar through override extensibility.

Extending menu options with differential extensibility

Currently, the navigation bar contains global search and alerts menu options that are present in the corresponding <store-temp>/<packages>/libs/functional-components/src/lib directory.

The Alerts navigation component is displayed on the navigation bar, which shows the incoming alerts. This component is present in the <store-temp>/packages/libs/functional-components/src/lib/alert directory, and expands or collapses when you click bell icon.
The Global search navigation component is displayed on the navigation bar. You can perform a global search to quickly open an order. This component is present in the <store-temp>/packages/libs/functional-components/src/lib/global-search directory, and expands or collapses when you click the search icon.

The following customization use cases are supported for navigation bar:

You can replace the application-provided global search and alert menu options with custom components.
You can hide the application-provided global search and alert menu options.
You can add a menu option. For more information, see Adding a menu option.

To map the application-provided navigation bar menu options with the custom component, use the <store-temp>/extensions/features/override-component/src/assets/override-component/config/isf-navbar-extn-config.json file. In the JSON file, make sure that you map the unique identifiers of the application-provided components with the overridden components.

The following table describes the schema definition of the isf-navbar-extn-config.json file:

Table 1. Schema definition attributes and descriptions
Attribute name	Description
menuTID	Specifies the unique identifier for the menu option that is displayed in the navigation bar. The valid values are `navBarMenuWidget_1` or `navBarMenuWidget_2`.
componentName	Specifies the component name that is loaded in the navigation bar. For example, `AlertsExtnComponent` or `GlobalSearchExtnComponent`.
display	Indicates whether the menu option must be shown or hidden in the navigation bar. The Valid values are true or false. The default value is set to true.

When you override an application-provided navigation component, update <store-temp>/extensions/features/override-component/src/assets/override-component/config/isf-navbar-extn-config.json with the attributes described in the table.

The following sample isf-navbar-extn-config.json file illustrates how to hide the global search menu, and replace the application-provided alert menu option with the AlertsExtensionComponent custom component.

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

Procedure

Create a custom component.
Go to the <store-temp>/extensions/features/override-component/src/app/components directory, and run the following command:
```
ng g c <componentName> --prefix=isf
```
Add the overrideComponent static string variable with the value as the component class name as illustrated.
```
....
public static overrideComponent = 'AlertsExtensionComponent';
....
```
Update the custom component class name.
Go to the <store-temp>/extensions/features/override-component/src/app directory. Open the app.module.ts file, and update the custom component class name in the customComponentDeclarations object.
Update the <store-temp>/extensions/features/override-component/src/assets/override-component/config/isf-navbar-extn-config.json file with the appropriate details. For example, to replace the application-provided alert component with the custom AlertsExtensionComponent, update as follows:
```
[
    {
        "menuTID": "navBarMenuWidget_2",
        "componentName": "AlertsExtensionComponent"
    }

]
```
Verify that your changes are reflected in the navigation bar.
To locally verify the extended application-provided navigation bar, start the application by running the following command:
```
yarn start-app
```

What to do next

To verify the changes in the developer toolkit, extract and deploy the customizations. For more information about extracting and deploying customizations, see Extracting customizations.