# Навигатор

> [HTML Version](navigator.html)

Виджет генерирует URL-адрес, который можно разместить на странице в виде ссылки или кнопки. При переходе пользователя по ссылке отобразится содержимое другого виджета. Также пользователь может ввести ссылку непосредственно в адресной строке своего браузера.

Виджет **Навигатор** удобно использовать для настройки навигации на одной странице без переключения между несколькими страницами. Такой принцип по умолчанию использован в [виджете навигации портала](portal_navigation_widget.md), чтобы данные главной страницы [портала по шаблону](portal-setting.md#template) отображались на других страницах. 

Для примера настроим динамическую страницу внешнего портала с помощью виджета **Навигатор**. При переходе по ссылкам в левом меню на странице отобразится разное содержание:

- полезная информация;

- задачи пользователя;

- процессы, которые пользователь может запустить.

Для этого:

1. На страницу портала добавим виджет **Навигатор**. В его настройках создадим три URL-адреса и привяжем к ним три виджета (информация, задачи, процессы).

2. В левом меню страницы портала разместим адреса в виде ссылок.

Тогда при переходе по ссылке в левом меню страницы пользователь увидит содержимое виджета, привязанного к этой ссылке в настройках навигатора. Содержимое отобразится в той части страницы, где размещён виджет **Навигатор**.

(navigator-1.png)

Рассмотрим подробнее этот пример и используем в нём портал, [созданный по шаблону](service-portal.md#create-portal) в разделе **Заказы**.

## Настроить виджет «Навигатор»

1. Предварительно на уровне раздела **Заказы** [создайте виджеты](interface_settings.md#create-widget), содержимое которых динамически отобразится на портале. Задайте их настройки и опубликуйте.

**(navigator-6.png)**

2. В меню раздела **Заказы** выберите **Портал**. Чтобы разместить виджет **Навигатор** на главной странице портала, откройте её шаблон в дизайнере интерфейсов. Для этого нажмите на название главной страницы.

3. [Добавьте](360029250931.md#add-widget) виджет **Навигатор **в основную часть страницы, где пользователь увидит содержимое созданных ранее виджетов. Откроется окно с [системными настройками](common_widget_settings.md), которые можно выполнить позднее. Нажмите **Сохранить**.

(navigator-2.png)



4. На поле виджета **Навигатор** вы увидите ключевое слово **path1**, с помощью которого можно [собрать URL-адрес](#collect-address). Но для нашего примера создадим три адреса с ключевыми словами **info**, **tasks** и **processes**, к которым привяжем соответствующие виджеты.

Чтобы добавить адрес в поле виджета, в верхней его части нажмите значок **+**. Откроется окно настроек маршрута, в котором укажите ключевое слово для нового URL-адреса.

(navigator-3.png)

Таким образом настройте маршруты **info**, **tasks** и **processes**.

(navigator-4.png)

5. На вкладку каждого маршрута добавьте созданные ранее виджеты. Тогда при переходе по созданному адресу пользователь увидит содержимое того виджета, который вы разместили на соответствующей вкладке маршрута.

6. Сохраните настройки виджета **Навигатор** и опубликуйте изменения.

7. Теперь вы можете сформировать адреса для отображения содержимого виджетов, привязанных к ним. Адрес состоит из URL-адреса страницы, на которой размещён виджет **Навигатор**, и ключевого слова, который вы указали в маршруте. URL-адрес страницы скопируйте в её [настройках](360009924451.md#page-settings). В нашем примере получим три URL-адреса:

	- **/\_portal/orders/\_start\_page/ info**;

	- **/\_portal/orders/\_start\_page/tasks**;

	- **/\_portal/orders/\_start\_page/processes**.

````
начало примечание

````
**Примечание**

В виджете **Навигатор** можно работать со страницами портала, используя методы языка TypeScript. Подробнее читайте в [справке ELMA365 TS SDK](https://tssdk.elma365.com/ru/latest/interfaces/_02_types_.navigator.html).

````
конец примечание

## ````
Настроить переход по URL-адресам

Теперь разместим созданные адреса в левом меню главной страницы портала. Пользователь нажмёт на ссылку и увидит содержимое виджета, привязанного к этой ссылке в настройках навигатора. В нашем примере настроим ссылки с помощью виджета [Текст](text_widget.md). Для этого:

1. Разместите виджет **Текст** в той части шаблона страницы, где пользователь увидит ссылки. В нашем примере это левое меню главной страницы.

2. В настройках виджета **Текст** укажите три URL-адреса, созданные в настройках виджета **Навигатор**.(navigator-5.png)

3. Сохраните настройки виджета **Текст**. Затем сохраните и опубликуйте настройки главной страницы в дизайнере интерфейсов.

Теперь на главной странице портала можно переходить по ссылкам, настроенным в левом меню. При этом на основной части страницы, где размещён виджет **Навигатор**, отобразится нужная пользователю информация.