Falcon Space

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

Смотреть видео
Оглавление

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

Смотреть видео Создание и настройка страниц сайта    
https://rutube.ru/video/private/2ee81adb701206513e01bb16feafb3a0/?p=EtYeGCRcWY8a-9sm04NWHw

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

Она может содержать описание бизнеса, контактные данные, информацию о товарах и услугах, отзывы клиентов и другую полезную информацию.

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

создание страницы

Ссылка на страницу управления страницами для роли "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 и используем специальную разметку (но помните, что вывод данных на странице при этом не будет индексироваться поисковыми системами).

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, '' 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

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>

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

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

Дополнительные материалы

  1. Как управлять страницей "404 Страница не найдена"
  2. Как сделать мастер описания функционала страницы
  3. Настройки страницы для формирования главного меню
  4. Как выводить списковые данные в теле страницы
  5. Как использовать дополнительные параметры на странице
  6. Как сделать редирект на другую страницу при загрузке
  7. Что делать если открытая вкладка (tab) сбрасывается при перезагрузке страницы

 

Falcon Space - функциональная веб-платформа разработки на узком стеке MS SQL/Bootstrap. Вводная по Falcon Space
Насколько полезной была статья?

Google поиск по нашей документации

Выгода от использования Falcon Space

В 2-3 раза экономнее и быстрее, чем заказная разработка
Более гибкая, чем коробочные решения и облачные сервисы
Используйте готовые решения и изменяйте под свои потребности
Нужна бесплатная консультация?
Планируете делать веб-проект?
Сайт использует Cookie. Правила конфиденциальности OK