Skip to content
AIV

Customize Header content of AIV

  • This document contains steps to customize the Header contents AIV Application. The user can define his Header contents by applying some minor changes in JSON files.

Objective

  • Customize Header content of AIV

Skill Level Required

  • Basic knowledge of JSON.
  • Header Menu content is the quick links of frequently used or important page redirection links provided at the bottom-most side of the AIV hamburger menu.

Image

Follow below steps to understand this JSON file

  1. Go to your directory/AIV/tomcat/webapps/aiv/assets/json folder and open “header_menu.json” in text editor. In this JSON file, you can see the different properties listed below.

  2. Open this file in any text editor software, the content of this file should be like the below image:

    Image

  3. By default, this JSON file contains 3 Header menus listed in the JSON array of the menu as you can see in the above image.

  4. Open the AIV application in the browser and log in with valid credentials. You will land on the landing page after successful login.

  5. Now click on the Hamburger icon and you can see at the bottom-most of the menu, 3 options as shown in the below image:

    Image

  6. All these 3 options listed here are fetched from header_menu.json.

  7. Users can customize this text and associated links of these header options by changing in header_menu.json file.

  8. If the user wants to add a new option that will redirect the user to google.com then open the header_menu.json file and add a new option in JSON array as shown in the below image:

    Image

  9. Here whatever text you provide in the name key, will be displayed in the header menu, and the URL on which you need to redirect should be provided in the URL key in the JSON file.

  10. Save this file and reload AIV, now when you click on the Hamburger icon and look at the header menu, you will find this new option added in the list as shown below:

    Image

  11. Here the name of the option will be the name field text you have provided in the JSON file and when you click on this option, it will take you to the google.co.in page.

  1. If you want to display the search web option in the first index, change the order of JSON array like the below image:

    Image

  2. Save these changes and reload the AIV page. Click on the Hamburger icon and you will see now Web search option is displayed at the top of the menu.

    Image