# How to customize UI using Navigation Tree

Navigation tree manages page display in setup mode, it is automatically generated by configuration wizard during program generation with Displays, Calibrations, Alignment and System top-down tree structure. However, it also allows user to move, add, rename, hide, or delete a page in edit mode to satisfy certain HMI customization requirement. To enter its edit mode, double click "HMINavigation" under Components in the AlignPlus program. There will be a pop-up page for you to edit.

HMINavigation edit page consists of two areas: Tree View and Work Space.

Tree View area shows a preview of the result navigation tree. Work Space area is for editing each page's categories, icons and user accesses.

1 | Icon for current page
2 | Display name for current page on HMI, here localization is used to translate the name into local language
3 | Parent group the current page belongs to
4 | The name of the page to be displayed
5 | An auto-generated mark indicating whether the selected page is a valid page in edit mode
6 | Dropdown: When it is checked on, navigation tree will expand all sub pages of current page in run time, but user can choose to collapse them on HMI. Expands: When it is checked on, navigation view will forcefully expand all sub pages and refuse to be collapsed. Admin/Engineer/Operator: when it is checked on, the page will be visible for Admin/Engineer/Operator, otherwise, it is invisible to its selected user.

## Hide unnecessary pages

AlignPlus displays all available pages in navigation tree by default though not all of them are always necessary. It is up to user to decide whether to hide some. To hide a page, just check off the front check box of a selected page.

## Add a new page

Follow the steps below to add a new page.

1. Create a new page and set it's size the same with other reference pages in the same group.

   For example, here is the property information of "LoggingSetupPage":

   Apply the same X, Y, W and H of the reference page to the new page.

2. Edit the new page according to customer's requirement

3. Add a localization tag for the page name

4. Add the page to HMINavigation component

   Click "Add" button, choose an icon for it, use the newly created localization tag for "Name", choose a parent node(here is "System"), and then select the page name you created and check the user accesses.

5. After all is set, the new page will automatically be added under the button of the parent group. The displayed name in tree view is what you have defined in localization for the current language. If you would like to move the page to a different position within the group, just click "↑" or "↓" buttons to move it up or down.

6. Run the program and see if new page is added properly.

## Remove a page

Select the unwanted page, and then click "Remove" button to remove it. This only applies to customized pages, if it is an automatically generated page, user can not delete it but can hide it instead.