Low-code дизайнер > Создание интерфейсов > Типы виджетов > Размещение элементов / Навигатор

Навигатор

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

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

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

  • полезная информация;
  • задачи пользователя;
  • процессы, которые пользователь может запустить.

Для этого:

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

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

navigator-1

Рассмотрим подробнее этот пример и используем в нём портал, созданный по шаблону в разделе Заказы.

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

  1. Предварительно на уровне раздела Заказы создайте виджеты, содержимое которых динамически отобразится на портале. Задайте их настройки и опубликуйте.

navigator-6

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

navigator-2

 

  1. На поле виджета Навигатор вы увидите ключевое слово path1, с помощью которого можно собрать URL-адрес. Но для нашего примера создадим три адреса с ключевыми словами info, tasks и processes, к которым привяжем соответствующие виджеты.

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

navigator-3

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

navigator-4

  1. На вкладку каждого маршрута добавьте созданные ранее виджеты. Тогда при переходе по созданному адресу пользователь увидит содержимое того виджета, который вы разместили на соответствующей вкладке маршрута.
  2. Сохраните настройки виджета Навигатор и опубликуйте изменения.
  3. Теперь вы можете сформировать адреса для отображения содержимого виджетов, привязанных к ним. Адрес состоит из url-адреса страницы, на которой размещён виджет Навигатор, и ключевого слова, который вы указали в маршруте. Url-адрес страницы скопируйте в её настройках. В нашем примере получим три url-адреса:
    • /_portal/orders/_start_page/ info;
    • /_portal/orders/_start_page/tasks;
    • /_portal/orders/_start_page/processes.

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

Примечание

В виджете Навигатор можно работать со страницами портала, используя методы языка TypeScript. Подробнее читайте в справке ELMA365 TS SDK.

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

Настроить переход по url-адресам

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

  1. Разместите виджет Текст в той части шаблона страницы, где пользователь увидит ссылки. В нашем примере это левое меню главной страницы.
  2. В настройках виджета Текст укажите три url-адреса, созданные в настройках виджета Навигатор.navigator-5
  3. Сохраните настройки виджета Текст. Затем сохраните и опубликуйте настройки главной страницы в дизайнере интерфейсов.

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