Создание любого сайта или веб-приложения практически немыслимо без навигации. Пользователи должны перемещаться между страницами, открывать различные разделы сайта, получать разнообразную информацию.
Данные страницы
Но прежде чем изучать саму навигацию, стоит разобраться с тем, какую информацию вообще можно получить о странице и из чего может состоять URL-адрес. Для этого можно использовать блок Get Current Page и посмотреть, какие данные он выдает.
URL - сам адрес страницы в привычном виде. Например - https://vdjyien-app.apms.io/admin/someurl/
Page - внутренний идентификатор страницы, который используется в бизнес-процессах AppMaster. Состоит из 22 символов, случайного набора буква и цифр.
Title - заголовок страницы. Ее название в привычной для человека форме.
URL Params. Страница может быть создана таким образом, что ее адрес не является строго фиксированным, а включает в себя еще и переменные значения. Например, страница может выводить список статей определенного раздела, а идентификатор этого раздела как раз и указывается в URL в качестве параметра
Query Params. Дополнительные параметры запроса, которые прописываются в конце URL после знака “?”. Например, для страницы со списком статей параметры “?_limit=12&lang=en” могли бы указать на то, что требуется лишь 12 статей на английском языке.
В качестве примера можно представить страницу, которая выводит перечень статей блога. Ее URL задан в виде “/blog/:theme/:author”. Символ “:” указывает на то, что значение указанное после него является параметром. В качестве параметров она принимает идентификаторы темы статей (theme) и их автора (author).
Для навигации на данную страницу необходимо использовать блок Navigate в бизнес процессе.
Параметры соответствуют тем, что были разобраны ранее в блоке Get Current Page. При этом фактический заголовок страницы не имеет значения для навигации, так как сама страница указывается в виде внутреннего идентификатора (его можно выбрать из списка страниц).
Если у страницы нет никаких параметров, то навигация может быть крайне простой, достаточно лишь выбрать нужную страницу из предложенного списка. Но в данном примере параметры есть и их обязательно нужно передать в блок Navigate.
Создание страницы источника для навигации
Рассмотрим использование параметров на конкретном примере. Для этого создадим отдельную страницу, откуда в дальнейшем нужно будет перейти на целевую страницу. Добавим на эту страницу два элемента Select (один для выбора из списка тем, второй для списка авторов) и заполним их тестовыми значениями.
После этого нужно настроить бизнес-процесс для кнопки Navigate, по нажатию на которую должна сработать навигация на целевую страницу. Данный процесс начинается с получения выбранных значений из блоков Select.
Следующий шаг - заполнение виртуальных моделей Key-Value. Их массив используется для передачи необходимых параметров в блок Navigate. Сама модель состоит из ключа (Key), которым является название параметра (в данном примере theme и author), а также его значения (Value, непосредственное название выбранной темы или имени автора).
Обратите внимание на то, что в URL не могут использоваться многие символы, в число которых входит и символ пробела. Поэтому имя, написанное как “Frank Paulsen”, в URL будет автоматически преобразовано в “Frank%20Paulsen”. Для данного кодирования и декодирования под стандарты URL могут использоваться блоки URL Encode и URL Decode. В данном примере, для большей наглядности и красоты URL, используем блок Replace string и самостоятельно выполним замену пробела на знак “-”, представив имя в виде “Frank-Paulsen”.
Завершающий шаг - объединение созданных пар ключ-значение в один массив для передачи в качестве параметра в блок Navigate.
Теперь, по нажатию на кнопку, произойдет переход на страницу https://vdjyien-app.apms.io/admin/blog/No-code/Frank-Paulsen/
Можно убедиться, что ее URL состоит, как из постоянной части (https://vdjyien-app.apms.io/admin/blog/), так и из переменной (No-code/Frank-Paulsen/), которая была сформирована из значений, выбранных на предыдущей странице.
Использование параметров URL для управления содержимым
Следующая задача - воспользоваться полученными параметрами URL для фактического изменения контента на странице. Данные параметры могут использоваться, например, для формирования GET-запроса к базе данных, но в нашем примере мы просто отобразим их значение на странице. Для этого добавим на страницу два контейнера с соответствующими Label.
Настроим бизнес-процесс по триггеру onShow в одном из Label. Его задача будет проанализировать URL, получить его параметры и отобразить на странице. Для этого воспользуемся блоком Get Current Page и в цикле получим значение каждого параметра.
Далее, через блок Switch, получим значение параметра и отобразим его в соответствующем Label. При этом для параметра Author произведем обратную замену “-” на пробел.
Готово! Теперь при навигации на данную страницу будет использоваться не только ее статический адрес, но и параметры URL, которые влияют на фактическое отображение контента на странице.
Использование параметров запроса
Практически аналогичным образом можно добавить параметры запроса (Query Params). Их ключевое отличие от параметров URL заключается в том, что их наличие не является обязательным. В данном примере URL обязательно включает в себя указание на то, какая информация должна быть отображена на странице (какой тематический раздел и какой автор), а дополнительные параметры вносят необходимые уточнения. Например, можно использовать параметры limit и offset, чтобы организовать пагинацию и установить, сколько именно записей нужно запросить из базы, и с какой записи следует начать вывод.
Добавим на стартовую страницу два новых поля - Input (Integer). В них будем записывать параметры limit и offset.
Внесем необходимые дополнения в бизнес-процесс кнопки навигации. Сформируем массив Query Params со значениями limit и offset.
Последний шаг - добавление элементов с информацией из параметров запроса, а также дополнение бизнес-процесса для целевой страницы.
В результате должен получиться подобный URL:
https://vdjyien-app.apms.io/admin/blog/No-code/Frank-Paulsen/?offset=0&limit=12
В приложении реализована навигация с параметрами URL и параметрами запроса, а также динамически определяется контент целевой страницы в зависимости от данных параметров.
