Практикум. Система регистрации на мероприятия. Объектная модель.

Общие сведения о визуалах

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

С использованием платформы GreenData можно:

Настраивать структуру отображения визуалов;
Настраивать структуру и настройки реестра объектов типа объекта;
Форматировать содержание объекта и реестра, в том числе используя условное форматирование;
Задавать правила отображения, логики поведения, блокировки и цветового оформления элементов на визуале.

Для настройки визуала предусмотрены элементы, которые нужно располагать в рабочей области используя принцип перетаскивания drag&drop.

Настройка визуалов включает в себя несколько этапов:

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

После сохранения настроек визуалов к ним можно вернуться позже и внести изменения. Для объектов одного типа можно создавать несколько визуалов. Также количество настроек реестра для одного типа объекта неограниченно. Однако, если какие-то из визуалов не используются, рекомендуется удалить их для быстрой работы системы.

Описание модуля

Для решения поставленной бизнес-задачи необходимо создать визуалы:

Также необходимо настроить реестры:

Перед настройкой модуля «Настройка визуалов» необходимо предварительно реализовать настройки, описанные в главе «Объектная модель», либо установить пакет обновлений.

Настройка визуала для типа объектов «Контактное лицо»

Настроим визуал типа объектов «Контактное лицо» для удобного заполнения организатором данных. На предметной области выделим тип объектов «Контактное лицо» и на панели управления выберем «Настроить экранную форму для объектов».

В новой вкладке откроется редактор визуала. Перед настройкой удалим визуал, созданный Системой по умолчанию. Для этого на рабочей области удалите верхний «Ряд», нажав на кнопку удаления.

Для того чтобы настроить визуал, мы будем использовать следующие инструменты на вкладке «Группировки»:

Ряд;
Колонка;
Группа атрибутов;

Для того чтобы разместить элемент на рабочей области, необходимо захватить его и перетащить, используя способ drag&drop.

Пошагово настроим визуал:

Разместим группировку «Ряд»;
В ряд разместим группировку «Группа атрибутов»;
Для группы атрибутов скроем наименование, с помощью кнопки на панели настройки группировки;
Переведем переключатель «Показать атрибуты родительского типа» в активное положение и разместим следующие атрибуты:
- Имя [FIRST_NAME];
- Фамилия [SURNAME];
- Отчество [PATRONYMIC];
- Номер телефона [CONTACT_PHONE];
- Площадка [EVENT_PLATFORM_ID].
Изменим отображение наименования атрибута слева, для этого раскроем панель настройки атрибутов и выберем соответствующую кнопку;
Сохраним визуал, на панели элементов нажав на кнопку «Ок».

Настроенный визуал выглядит следующим образом:

Настройка визуала для типа объектов «Площадка»

Настройка визуала объектов

Вернемся к предметной области и аналогично настроим визуал типа объектов «Площадка».

Удалим существующий визуал и пошагово настроим новый:

Вынесем 2 группировки «Ряд»;
В верхний ряд добавим группировку «Колонка»;
Вынесем группировку «Группа атрибутов» в каждую колонку и в нижний ряд;
Зададим наименования для каждой группы атрибутов, для этого нажмем дважды на поле, где написано «Группа»: «Общая информация», «Дополнительная информация», «Фото площадки»;
Добавим необходимые атрибуты в группы:
- Наименование [NAME];
- Адрес [EVENT_ADDRESS];
- Часы работы [OPEN_HOURS];
- Возможность подключения online [IS_ONLINE_AVAILABLE]. Для атрибутов в группах атрибутов «Общая информация» и «Дополнительная информация» настройте отображение наименования атрибута слева;
Добавим существующий атрибут через панель «Элементы». Для этого нажмем на раскрывающийся список «Добавить атрибут»;
Добавим существующий атрибут. Нажмем на кнопку «Добавить существующий». Выберем из полного списка атрибутов атрибут «Изображение» [SYS_IMAGE];
Откроем добавленный атрибут на редактирование, воспользовавшись кнопкой в поле работы с атрибутом или нажав дважды на необходимый атрибут, и изменим название на «Фото площадки»;
Настроим визуал атрибута на вкладке «Визуал»: сделаем активными чек-боксы «Скрывать кнопки во всплывающее меню» и «Автоматический подбор ширины изображения»;
Разместим только что добавленный атрибут в группе атрибутов «Фото площадки». Для атрибута «Фото мероприятия» [SYS_FILE_ID] скройте наименование атрибута, с помощью кнопки в настройках атрибута;
Сохраним визуал типа объектов «Площадка» с помощью кнопки «Ок».

Настроенный визуал выглядит следующим образом:

Настройка визуалов для типа объектов «Мероприятие

Настройка визуала объекта «Форма для организаторов»

Настроим визуал типа объектов «Мероприятие», который будет отображаться для организаторов мероприятий.

Выделим тип объектов «Мероприятие» в предметной области и перейдем к настройке визуала по умолчанию с помощью соответствующей кнопки на панели управления.

Удалим визуал, созданный системой по умолчанию, и пошагово настроим новый:

Добавим 3 группировки «Ряд» и по одной группе атрибутов в каждый;
Укажем наименования для групп атрибутов: «Общая информация» и «Участники». Для группы атрибутов «Участники» установим настройку отображения «Свернута»;
Разделим ряд группы атрибутов «Общая информация» колонкой и разместим атрибуты в этой группе:
- Фото мероприятия [SYS_IMAGE];
- Наименование [NAME];
- Тип мероприятия [EVENT_TYPE_ID];
- Площадка [EVENT_PLATFORM_ID]. Настройте отображение наименования атрибутов слева;
Добавим виджет «Диапазон дат» во вторую колонку группы атрибутов «Общая информация» между атрибутом Наименование и Тип мероприятия и перейдем к его настройке, нажав на кнопку «Открыть настройки»:
- Атрибут с датой начала – Дата начала мероприятия;
- Атрибут с датой окончания – Дата окончания;
В группе атрибутов «Участники» разместим виджет «Реестр объектов». В поле «Тип объектов» выберем значение «Участник»;
Перейдем к настройке представления реестра заявок участников, для этого нажмем на кнопку в виде шестеренки. В появившемся окне изменим Наименование на «Участники» и установим представление реестра – Легкий реестр. Настроим отображаемые колонки: с помощью стрелок уберем влево лишние атрибуты и справа оставим только фамилию, имя и отчество;
Перейдем на вкладку «Кнопки» и удалим кнопки «Создать», «Сортировка», «Настройки представления» и оставьте кнопки «Обновить», «Экспорт в Excel» и «Поиск»;
Перейдем во вкладку «Стили отображения» и переведем в активное положение «Переносить слова в данных» и «Переносить слова в наименовании»;
Сохраним изменения в реестре с помощью кнопки «Ок»

Сохраним изменения на визуале по кнопке «Ок» на панели «Элементы»;

Настроенный визуал мероприятия для организаторов выглядит следующим образом:

Отредактируем информацию о визуале: в правом верхнем углу панели управления воспользуемся кнопкой «Дополнительные действия» и выберем команду «Редактировать» для редактирования информации текущего визуала.

В появившемся окне сменим наименование на «Форма для организаторов» и сохраним визуал.

Настройка визуала объекта «Форма для участника»

Настроим визуал типа объектов «Мероприятие», который будет отображаться для участников мероприятий. В правом верхнем углу на панели управления воспользуемся кнопкой «Дополнительные действия» и выберем команду «Добавить» для создания нового визуала.

В появившемся окне заполним поля наименование – «Форма для участника».

В текущей вкладке обновится визуал. Для того чтобы перейти к его настройке, нажмем на кнопку «Настройка визуала».

Пошагово настроим визуал:

Очистим визуал, для этого удалим «Ряд» с помощью кнопки на группировке;
Добавим группировку «Ряд» и разделим на три колонки с помощью группировки «Колонка». Передвинем границы колонки, чтобы процентное соотношение колонок слева направо было 17%, 67% и 17%;
Разместим группу атрибутов в колонку посередине. Изменим представление группы атрибутов, для этого в списке представлений выберем «Без имени»;
Разделим ряд группы атрибутов на две колонки, передвинем границы колонки, чтобы процентное соотношение колонок слева направо было 33% и 67%;
В колонке справа ряда группы атрибутов разместим еще один ряд, разделенный на две колонки;
В ряду группы атрибутов в колонке слева разместим атрибут Фото мероприятия [SYS_IMAGE];
В ряду группы атрибутов в колонке справа разместим атрибуты:
- Наименование [NAME] – для этого необходимо активировать переключатель «Показать родительские атрибуты»;
- Площадка – Наименование [PLATFORM_ID.NAME];
- Площадка – Адрес [PLATFORM_ID.EVENT_ADDRESS];
В группу атрибутов справа в ряду расположим атрибуты: слева – Дата начала мероприятия [START_EVENT_DATE], справа – Дата окончания мероприятия [END_EVENT_DATE];
С помощью кнопок навигации переместим ряд в правой колонке ряда группы атрибутов под атрибутом «Наименование»;
Изменим название атрибута «Площадка - Адрес» на «Адрес», для этого найдите соответствующую кнопку на панели инструментов настройки атрибута и заполните открывшееся окно;
Аналогично изменим название атрибута «Площадка - Наименование» на «Площадка»;
Скроем наименование атрибута Фото мероприятия [SYS_IMAGE], для этого для этого найдем соответствующую кнопку на панели инструментов настройки атрибута и в открывшемся модальном окне выберем «Скрыть наименование»;

Сохраним визуал по кнопке «Сохранить» на панели элементов.

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

В появившемся окне нажмем на кнопку «Создать новый»:

Создадим алгоритм «Алгоритм постоянной блокировки» [PERMANENT_BLOCK_ALG], базовый тип объектов – «Мероприятие» и в качестве формулу укажем значение true – это значит, что алгоритм будет выполняться всегда и группа атрибутов будет заблокирована.

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

Настройка реестров типов объектов

Настройка реестра типа объектов «Контактная информация»

Вернемся на вкладку с предметной областью, откроем тип объектов «Контактное лицо» и перейдём в реестр по кнопке на панели управления.

На панели управления нажмем на кнопку «Настройки представления реестра».

В появившемся окне в поле «Представление» выберем «Легкий реестр» — это вид реестра, который отвечает современным требованиям UX/UI. На вкладке «Настройка колонок» с помощью стрелок уберем ненужные атрибуты влево, а справа следующие колонки:

Фамилия;
Имя;
Отчество;
Площадка;
Номер телефона.

На вкладке «Действия» настроем расположение – «Иконки действий», чтобы возле записи располагались иконки действий над объектом.

На вкладке «Стили отображения» переведем в активное положение переключатели напротив «Переносить слова в данных» и «Переносить слова в наименовании».

Сохраним изменения с помощью кнопки «Ок».

Настроенное представление реестра выглядит следующим образом:

Настройка реестра типа объектов «Площадка»

Вернемся на вкладку с предметной областью, откроем тип объектов «Площадка» и перейдём в реестр. На панели управления нажмем на кнопку «Настройки представления реестра» и настроем представление реестра аналогичным образом.

В появившемся окне в поле «Представление» выберем «Легкий реестр».

Сохраним изменения с помощью кнопки «Ок».

Настроенное представление реестра выглядит следующим образом:

Настройка реестра типа объектов «Тип мероприятия»

Вернемся на вкладку с предметной областью, откроем тип объектов «Тип мероприятия» и перейдём в реестр. На панели управления нажмем на кнопку «Настройки представления реестра».

В появившемся окне в поле «Представление» выберем «Легкий реестр».

Сохраним изменения с помощью кнопки «Ок».

Настроенное представление реестра выглядит следующим образом:

Настройка реестра типа объектов «Мероприятие»

Вернемся на вкладку с предметной областью, откроем тип объектов «Мероприятие» и перейдём в реестр. На панели управления нажмем на кнопку «Настройки представления реестра».

В появившемся окне в поле «Представление» выберем «Легкий реестр».

На вкладке «Настройка колонок» измените порядок колонок с помощью кнопок на панели управления:

Фото мероприятия;
Наименование;
Тип мероприятия;
Дата начала мероприятия;
Дата окончания мероприятия;
Площадка.

Сохраним настройки представления реестра с помощью кнопки «Ок».

Настроенное представление реестра «Мероприятия» выглядит следующим образом:

В этом реестре есть возможность создания и удаления экземпляров типа – он предназначен для организаторов. В Системе есть возможность создавать несколько настроек реестра. Создадим еще одно настройки реестра для участников. Для этого раскройте выпадающую панель и с помощью кнопки скопируйте единственное настроенное представление.

В появившемся окне изменим наименование на «Доступные мероприятия». На вкладке «Кнопки» оставим только «Обновить», чтобы участники могли только обновлять информацию о доступных мероприятиях для просмотра.

Сохраним настройки представления реестра с помощью кнопки «Сохранить».

Настройка алгоритма кнопки регистрации на мероприятие

Вернемся к редактору визуала для участников мероприятий и настроим кнопку для регистрации участника на мероприятие. Перейдем на стартовую страницу, для этого нажмем на логотип GreenData и откроем предметную область «Мероприятия», нажав на виджете Предметные области на иконку с соответствующей подписью.

Откроем для редактирования визуал участника мероприятия типа объектов «Мероприятия», выбрав его в списке.

В новой вкладке в режиме редактирования визуала снизу под рядом разместим еще один ряд, в котором расположим виджет «Кнопка».

Для того, чтобы элемент внутри ряда располагался посередине, откроем панель настроек группировки «Ряд» и выровняем по центру.

Добавим новое действие для кнопки с помощью панели дополнительных действий, выбрав действие «Добавить».

Заполним поля настройки действия: укажем наименование – «Пойду», в типе действия выберем «Действие», в Модуле пользовательского интерфейса – «Вызвать алгоритм».

Создадим дополнительные параметры действия с помощью кнопки «Создать» ниже.

В появившемся окне заполним поле наименование – «Регистрация на мероприятие».

В поле «Алгоритм» создадим новый алгоритм для кнопки, для этого раскроем панель дополнительных действий и выберем «Добавить».

Создадим алгоритм «Алгоритм регистрации участника» [REG_PARTICIPIANT_ALG], базовый тип объектов – «Мероприятия». После нажатия кнопки алгоритм будет проверять записан ли пользователь на мероприятие, если да, то будет появляться уведомление от Системы о том, что он уже зарегистрирован на мероприятие, если нет – пользователь станет участником мероприятия и получит уведомление об этом.

Заполним поле формулы алгоритма:

Для этого используем следующие функции:

var – объявление (создание) новой переменной на уровне алгоритма;
count – функция подсчета количества элементов, вводится вручную;
attr - функция вставки значения атрибута в алгоритм;
attrByVar - Возвращает значение атрибута экземпляра заданного типа посредством объявленной ранее при помощи функции var переменной;
if - Оператор реализующий условие: если выражение (condition) возвращает значение true, то выполняются операторы блока { };
forEach - Оператор для реализации цикла FOR по коллекции;
currentUser.Атрибут - Функция возвращает значение атрибута текущего пользователя Системы;
currentObject - определение текущего типа объектов;
return - Возвращает значение указанного объектов;
newInstance - функция создает новый экземпляр заданного типа объектов;
messageBox – функция создания уведомления;
sendPopUpMsg - Автоматическое формирование всплывающего информационного сообщения для текущего пользователя.

Пошагово заполним поле формулы алгоритма:

С помощью функции var добавим переменную check_req и присвоим ей значение false. Эта логическая переменная указывает на то, зарегистрирован ли текущий участник на выбранное мероприятие;
Для того чтобы избежать дублирования записей, зададим условие с помощью функции if на проверку существования записи в типе объектов «Заявки участников». В условии с помощью клавиатуры введем функцию count, а в качестве параметра с помощью функции attr укажем атрибут «Заявки участников». Закончим условие с помощью клавиатуры;
В блок операторов для выполнения функции if, добавим цикл forEach по коллекции типа объектов для того, чтобы перебрать все существующие записи. В качестве параметра для цикла укажем тип объектов «Заявки участников» с помощью функции attr;
В тело цикла добавим условие if, которое будет сопоставлять код участника из коллекции и код текущего пользователя. В условии с помощью функции attrByVar передадим код участника из коллекции entry: Во второй части условия с помощью функции «Атрибуты текущего пользователя» укажем код для сравнения;
Заполним тело условия в случае совпадения кодов пользователей: с помощью функции var выберем из списка доступных переменную check_req и присвоим ей значение true;
Настроим вывод автоматического информационного сообщения для участника об успешной регистрации на мероприятие, воспользовавшись функцией sendPopUpMsg: в параметрах укажем «0» – значение цвета уведомления(красный), и в кавычках впишем текст сообщения уведомления – «Вы уже зарегистрированы на мероприятие»;
Добавим новое условие в алгоритм, которое будет проверять отсутствие регистраций на мероприятие или отсутствие регистрации на мероприятие у текущего пользователя. В этом случае будет создаваться новая запись в типе объектов «Заявки на мероприятие». Зададим условие аналогично первому условию, используя ручной ввод и функцию attr;
В блок операторов к выполнению функции if с помощью функции var создадим новую переменную new_req, которой с помощью функции newInstance присвоим значение типа объектов «Заявка» для создания экземпляра;
С помощью функции attrByVar c выбранным признаком «Установить значение» определим атрибуты, которым нужно присвоить новое значение. Первый параметр указывает на изменяемый атрибут, второй параметр указывает на значение, которое приобретает указанный атрибут. Для атрибута «Мероприятия» установим значение текущего объектов с помощью функции attr, а для атрибута «Участник» воспользуемся функцией «Атрибуты текущего пользователя»;
Воспользуемся функцией save для сохранения значений объектов, в качестве параметра укажем существующую переменную new_req с помощью функции var;
Настроим вывод автоматического информационного сообщения для участника об успешной регистрации на мероприятие, воспользовавшись функцией sendPopUpMsg: в параметрах укажем «2» – значение цвета уведомления(синий), и в кавычках впишем текст сообщения уведомления - “Регистрация прошла успешно”.

Сохраним настройки алгоритма по кнопке «Ок». Вернемся к настройке параметров кнопки. В разделе Настройка сохранения объектов настроим поля следующим образом:

Сохранять объект – Да;
Порядок сохранения объектов - После выполнения алгоритма.

Сохраним изменения для действия по кнопке и в поле виджета «Кнопка» установим флаг «Активна в режиме чтения» в редакторе визуала.

Сохраним изменения с помощью кнопки «Ок» на панели «Элементы».

Настроенный визуал мероприятий для участников выглядит следующим образом:

На этом настройка визуалов в рамках практикума «Система регистрации на мероприятия» завершена.