Работа со страницами

Управление страницами

Страница на сайте нужна для того, чтобы предоставить информацию о компании, продукте или услуге. Она может содержать описание бизнеса, контактные данные, информацию о товарах и услугах, отзывы клиентов и другую полезную информацию. Страницы сайта помогают посетителям быстро найти нужную им информацию и сделать правильный выбор при поиске товаров или услуг. Страница позволяет выводить информацию непосредственно в теле самой страницы (пример: списковые данные), также может являться и контейнером для других блоков (форма, таблица) и выводить информацию с помощью размещения на странице сниппетов (пример: сниппет таблицы, сниппет формы).

Ссылка на страницу управления страницами для роли "admin" - /pages, для роли "editor" -  /editorpages. Система позволяет создать страницу несколькими способами:

1. В меню выбираем пункт "Страницы", далее "Создать страницу".   
2. В меню быстрых действий (значок молнии вверху справа) выбираем пункт "Создать страницу".

Доступ к странице имеют только роли, указанные в поле Роли (через запятую без пробелов. Если указано all - то доступ имеют все. Если * - то только авторизованные пользователи). 

Безопасность и разграничение доступа в Falcon Space

У каждой страницы может быть свой JS и CSS файл. Их можно менять через страницу управления данной страницей. 

Вся функциональность добавляется через специальные сниппеты разметки - это сниппеты as crud, as form, as editable и т.д.

Пример сниппета:

<div class="as-form" data-code="form1" data-itemid="12"></div>

- при выводе преобразуется в вывод формы с кодом code1

Адрес страниц - /{code}, где code - это код страницы. 

Для связи страниц используются параметры в разметке "url-param1 фигурных скобках", которые при рендеринге страницы подменяются на URL параметры (в большинстве случаев для идентификации дополнительных объектов лучше использовать параметр itemID, т.к. он неявно передается на страницу, напр. /page1/code1 означает переход на страницу page1 и itemID=code1). 

Также можно передавать в разметке параметр "username в фигурных скобках" для вывода имени текущего пользователя. 

Примечание: 

• Меню кабинетов определяется на базе раздела меню, а также из тех страниц, которые имеют галочку Показывать в меню. 
• Важно! Не меняйте без особой необходимости код страницы (по коду страницы создаются JS и CSS файлы + при изменении кода изменится URL страницы) + на это поле завязаны хранимые процедуры с хлебными крошками.
• Страница будет доступна для просмотра только той роли, в рамках которой она была создана.
• Сниппеты - задают типовую разметку, чтобы не по памяти набирать ее. Старайтесь указывать все параметры, которые дает сниппет (т.е. если не нужен параметр, то оставляйте пустым или 0).
• Для страниц панелей управления указываем в настройках галочку Панель управления и иконку.  Эта страница будет считаться главной для кабинета и может быть использована для редиректов на вход в кабинет.  
• Все посещения страниц сохраняются в as_trace с кодом pv (сохраняется url, falconGuid и в некоторых случаях itemID).
• Для страниц можно использовать специальный режим, при котором можно выводить разметку с логикой через JSRender. Для этого ставим галочку Режим JS Render и используем специальную разметку (но помните, что вывод данных на странице при этом не будет индексироваться поисковыми системами).
  
  

JS Render         

В JS Render передается объект с полями username (имя текущего пользователя), roles (массив ролей), urlParameters (параметры URL в виде объекта {key:value, ...}).

Также можно задействовать в выражении sp параметры - они вычисляются и подменяются до того, как будет работать render: https://pastebin.com/jGDQrMeS

Примечание: не используйте знаки сравнения < и > (выдают JS Syntax error).

• Для перехода к редактированию страницы нажмите иконку редактирования справа вверху.  

• Вы можете указать какой использовать Layout для страницы (Редактирование страницы / Правая колонка) - либо кабинетный (для страниц кабинета пользователей), либо лицевой (для страниц неавторизованного доступа, например Каталог, Корзина и т.д.). 
• Для главной страницы используется страница со специальным кодом _default.
• Нельзя использовать коды страниц, начинающихся с этих слов:  controls, arkstuff, admin, catalog, account, api, list, home.
• Название страницы участвует в заголовке страницы, а также в формировании меню (если стоит галочка в Меню). 

Пример кода:

<div class='row align-items-start'>
        <div class='col-lg-4 col-md-4 col-sm-12 col-12'>
          <span class="text-muted">Название блока</span>
        </div>
        <div class='col-lg-8 col-md-8 col-sm-12 col-12'>
          {{if statusCode=="draft"}}
          {colcontrol-blockTypeID}
          {{else}}
          {colview-blockTypeID}
          {{/if}}
        </div>
      </div>

SQL процедура управления страницей

Для страницы можно через SQL (кнопка SQL Страницы) внедрять различную бизнес-логику на SQL. 

Входные параметры 

1. @roles - роли текущего пользователя через запятую. 
2. @itemID - переданный параметр itemID в URL
3. @urlParameters - коллекция параметров из URL (Key, Value). Здесь также передаются спецпараметры, которые добавляются системой (т.е. не принимаются от браузера): 
1. langID - текущий язык
2. username - текущий пользователь
3. falconGuid - Guid пользователя (который ставится также и анонимным пользователям в куки). 
4. urlReferrer - страница, с которой пришел пользователь.
5. isBot - кто пришел, человек или бот?
6. userIP - IP пользователя

Выходные параметры. 

Первые два SELECT являются обязательными, все остальные являются необязательными и их можно не указывать.

SELECT 1 - Хлебные крошки (добавление хлебных крошек, хлебные крошки с выпадающим списком)

1. Title - текст ссылки,
2. Link - ссылка. Если на задано, то выведется серым текстом, а не как ссылка,
3. Tooltip - подсказка к ссылке,
4. Right (если 1, то ссылка попадает в правую часть хлебных крошек),
5. CustomLink (если задано, то для ссылки берется эта разметка. Требуется для помещения в хлебные крошки модальных форм, редактирования SQL и т.д.).
6. DropdownMakeup - если указана разметка, то при клике на ссылку будет открываться рядом окошко с этой разметкой

 SELECT 2 - 

1. Title, Description, Keywords - SEO параметры  страницы, тег title и метатеги Description и Keywords. 
2. TitleTooltip - подсказка, которая будет выводиться рядом с заголовком страницы.
3. RedirectUrl - Если задано, то идет перенаправление на другую страницу.
4. RedirectHttpCode - устанавливает код HTTP ответа: 301(постоянное перенаправление по RedirectUrl) или 404 (Страница не найдена)
5. ExclusiveAccess - если 1, то система будет проверять, работает ли кто-то еще с этой страницей в текущий момент. Если да, то выведет уведомление об этом текущему пользователю и тем, кто уже находится на странице. 
6. BodyBottomSection - здесь можно вставить дополнительные скрипты (или динамическую микроразметку)
7. HeadSection Здесь можно вставить подключения дополнительных стилей
8. IntroRunBtnText, 1 IntroInstantRun, 1 EnableIntroOnMobile - задают параметры мастера описания страницы. IntroRunBtnText - текст кнопки запуска мастера (по умолчанию становится справа на странице). IntroInstantRun  - если 1, то сразу запускается мастер при загрузке страницы (показывается автоматически только 1 раз при загрузке). Если EnableIntroOnMobile =1, то механизм подсказок будет запускать и на мобильном (по умолчанию он отключен для мобильных). 

SELECT 3 - Дополнительные параметры отдельным запросом, которые можно вывести на странице через {sp-par1}, где par1 - название параметра в SQL. Также здесь передается разметка для списковых данных (list1Makeup, list2Makeup… list5Makeup). 

SELECT 4-8 - списковые данные в формате p1... p6, они используются в разметке listXMakeup (более детально про списковые данные здесь)

SELECT 9 - настройки мастера ознакомления со страницей (используется https://github.com/xbsoftware/enjoyhint). 

1. Selector - селектор элемента на странице (.btn)
2. Event - по какому событию будет переход к следующему элементу (next - по кнопке Вперед, click - по клику на элемент Selector)
3. Description - текст описания
4. Shape  - какой фигурой выделяется элемент (rect, circle)
5. ScrollAnimationSpeed  скорость анимации в мс (300)
6. Raduis - радиус выделенной области при  Shape = circle (100)
7. Margin - отступы выделенной области (50)
8. NextText - текст кнопки Дальше. Если не задано - то кнопка скрыта.
9. SkipText - текст кнопки Закрыть. Если не задано - то кнопка скрыта.

   -- SELECT 9 Мастер ознакомления со страницей
       select * from (
       select '#fastAddFormsDropdown' Selector, 'next' Event, 'здесь ключевые типовые возможности с быстрым доступом' Description, 'rect' Shape, 300 ScrollAnimationSpeed, 100 Radius, 50 Margin, 'Хорошо' NextText, 'Стоп' SkipText, 10 ord
       union
       select '.tst-btn1' Selector, 'click' Event, 'Кликни на кнопку. Произойдет переход к следующей подсказке. Подсказки могут быть круглые(Shape=circle).' Description, 'circle' Shape, 300 ScrollAnimationSpeed, 90 Radius, 50 Margin, '' NextText, 'Стоп' SkipText, 20 ord
       union
       select '.as-mainMenu' Selector, 'next' Event, 'Основное меню (текст кнопок может быть разный для разных шагов)' Description, 'rect' Shape, 300 ScrollAnimationSpeed, 100 Radius, 50 Margin, 'Понятно' NextText, 'Стоп' SkipText, 30 ord
       union
       select '.as-loginStatus' Selector, 'next' Event, 'служебное меню, связанное с пользователем ' Description, 'rect' Shape, 300 ScrollAnimationSpeed, 100 Radius, 50 Margin, 'Хорошо' NextText, 'Стоп' SkipText, 40 ord
       ) t order by ord
   	​

   Демостенд мастера подсказок - /tst-hints

Примечание: если элементы не существуют на странице на момент запуска мастера подсказок - то они будут исключены из списка. Исключение - 1 элемент. Если нет первого элемента при начальной загрузке страницы, то включается ожидание на 3 секунды, и на 10 секунд при повторном неудачном запросе. 

SELECT 10 - подсказки к элементам (при наведении или клике)

1. Selector - селектор элемента для которого будет выводиться подсказка. 
2. Event  - click либо mouseenter (при наведении)
3. Text - выводимый текст
4. Type - цветовое решение по выводимому окну (danger, info и т.д.)
5. ShowType - toast (вывод подсказки сверху вверху) или tooltip (мини-подсказка, которая будет выводиться при наведении).
   

CREATE PROCEDURE [dbo].[pg_crumbs_supplierCabinet] 
	@roles nvarchar(128),
	@itemID nvarchar(128) = '',
    @urlParameters CRUDFilterParameter READONLY	
AS
BEGIN
	CREATE TABLE dbo.#result (title nvarchar(256), link nvarchar(256), tooltip nvarchar(256), ord int)

	insert into #result
	select 'Главная', '/', '', 1
	union
	select 'Рабочий стол', '', '', 2

	select * from #result order by ord
    select 'Рабочий стол' Title, '' RedirectUrl, '<i class="fa fa-question" title="Как работает эта страница?" ></i>' IntroRunBtnText, 0 IntroInstantRun
	drop table #result
    
    
    -- SELECT 3 Кастомные параметры, которые можно вставить в разметку страницы с помощью {sp-par1}
	select 1111 par1, 222 par2
	
	
    -- SELECT 4-8 Списковые параметры
    select 1 
    select 2 
    select 3 
    select 4 
    select 5 
    
    
	--SELECT 9 Мастер ознакомления со страницей 
    select * from (
    select '.as-mainMenu' Selector, 'next' Event, 'Основное меню пользователя' Description, 'rect' Shape, 300 ScrollAnimationSpeed, 100 Radius, 10 Margin, 'Хорошо' NextText, 'Стоп' SkipText, 0 ord
    union 
    select '.as-fl-info' Selector, 'next' Event, 'Подсказки как работать в системе' Description, 'rect' Shape, 300 ScrollAnimationSpeed, 100 Radius, 10 Margin, 'Хорошо' NextText, 'Стоп' SkipText, 1 ord
    union 
    select '.as-ds-digits' Selector, 'next' Event, 'Ключевые показатели работы исполнителя на площадке' Description, 'rect' Shape, 300 ScrollAnimationSpeed, 100 Radius, 10 Margin, 'Хорошо' NextText, 'Стоп' SkipText, 2 ord
    union 
    select '.as-ds-panel' Selector, 'next' Event, 'Оперативный доступ к главным отчетам' Description, 'rect' Shape, 300 ScrollAnimationSpeed, 100 Radius, 10 Margin, 'Хорошо' NextText, 'Стоп' SkipText, 3 ord
    union 
    select '#alertsDropdown' Selector, 'next' Event, 'Уведомления по работе с проектами' Description, 'circle' Shape, 300 ScrollAnimationSpeed, 50 Radius, 10 Margin, 'Хорошо' NextText, 'Стоп' SkipText, 4 ord
    union 
    select '#userDropdown' Selector, 'next' Event, 'Меню учетной записи' Description, 'circle' Shape, 300 ScrollAnimationSpeed, 50 Radius, 50 Margin, 'Хорошо' NextText, 'Стоп' SkipText, 5 ord
    union 
    select 'iframe[name="replain-frame"]' Selector, 'next' Event, 'Есть вопросы по системе? Пишите в наш чат' Description, 'circle' Shape, 300 ScrollAnimationSpeed, 50 Radius, 50 Margin, 'Хорошо' NextText, 'Стоп' SkipText, 6 ord
  
    ) t order by ord 
	
END

Специальные страницы

• _default - главная страница сайта
• notfound - страница для показа 404 ошибки (ситуации, когда запрошенная страница не найдена)
• noaccess - страница отображается, когда к запрошенной странице нет доступа у пользователя.