Подробный пример разработки подсистемы учета кадров - страница с таблицей людей и форма-карточка человека

Постановка задачи 

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

Реализация проекта 

Общий процесс выглядит так: 

• создаем таблицы и связи в базе данных
• создаем страницы и помещаем там сниппеты таблиц/форм.
• реализуем таблицы и формы (определяем их поля + хранимые процедуры).

Проектирование базы данных

Создать базу данных и таблицы можно двумя способами: 

Создаем структуру базы данных в SQL Server Management Studio (либо вы можете это сделать прямо в Falcon Space - https://falconspace.ru/docs/sozdanie-struktury-bd---sozdanie-tablic-bd-i-svyazey-mezhdu-nimi). Подключаемся к БД, добавляем новую диаграмму и  создаем таблицы и связи между ними.

Пока в базе Сотрудники, Департаменты и Статусы сотрудников. Далее структуру можно постепенно расширять по мере появления новых потребностей. Можно сразу занести тестовые статусы в hr_statuses (Новый, Кандидат, Стажер, Работает, Уволен)

Непосредственно на сайте. Для этого в меню "Система" выбираем "таблицы БД" и нажимаем кнопку "Новая таблица БД", вводим название новой таблицы. На странице управления таблицей добавляем нужные столбцы, указываем внешние ключи и индексы таблицы. Более подробно можно прочитать в этой статье.

Проработка структуры приложения 

Будет кабинет HR менеджера, в котором он сможет управлять Департаментами, Сотрудниками: 

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

Создание структуры страниц в Falcon Space

Создаем 3 страницы с кодами deps, humans, human (более подробно про работу со страницами можно прочитать в этой статье). 

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

Настройка страницы deps

Через кнопку Сниппеты добавляем сниппет таблицы на страницу 

Указываем в сниппете код будущей таблицы deps (необязательно должен совпадать с таблицей) и сохраняем (Ctrl + Shift + S).

Указываем также роли доступа к странице - admin,hr (без пробелов, роль можно создать позже в /roles. admin даем доступ, чтобы можно было под ним сразу смотреть и тестировать). 

Также отмечаем галочку Скрыть заголовок на странице, чтобы не показывать стандартный заголовок  на странице (мы будем использовать заголовок от таблицы). 

Через кнопку SQL страницы настраиваем хлебные крошки, title для страницы. 

Код SQL Страницы - https://pastebin.com/yNhz8Z5i

Примечание: Страницу можно найти через поиск сверху или раздел Страницы (ссылка на страницу управления страницами для роли "admin" - /pages, для роли "editor" -  /editorpages).

Создание таблицы Департаменты 

В "меню быстрых действий" (молния справа вверху блок) создаем таблицу с кодом deps.

На странице управления параметрами таблицы переходим к Управление колонками. 

Создаем необходимые колонки, указываем название, порядок, сортировку, видимость, редактирование, в фильтре.

ВАЖНО: id столбец должен быть primary key (pk=Да).  Это необходимо для процедур редактирования и удаления.  

Мы пометили поля code и name как редактируемые (в виде редактирования строки). Также будет 1 фильтр - по полю name. 

Устанавливаем возможность сортировки по полям code, name.

В настройках таблицы (страница Редактирование параметров таблицы "Отделы") указываем:  

• Роли admin,hr
• Быстрое создание по имени ДА
• Функция удаления ДА
• Размер пагинации 30

Редактируем процедуру GetItems для таблицы (на странице Управление таблицей). 

Код процедуры с комментариями:  

https://pastebin.com/vtu7QbwE

Переходим по адресу /deps на страницу отделов и видим пустую таблицу (можно добавить через Management Studio данные, чтобы посмотреть как будет выглядеть заполненная страница).

Создаем процедуры добавления (FastCreate), редактирования полей (UpdateField) и удаления элемента (DeleteItem) на странице Редактирование параметров таблицы "Отделы".

SQL добавления - https://pastebin.com/wqzGD7UP

SQL редактирования поля - https://pastebin.com/DLTtkYTJ

SQL удаления - https://pastebin.com/5Aca46Vx

Примечание: FastCreate создает сущность по 1 полю(т.е. микроформа с 1 полем). Если нужно более сложное создание элемента, то используется отдельная модальная форма. 

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

Таким образом, мы довольно быстро создали таблицу отделов с типовым набором функций. 

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

Примечание:

1. Ошибки вы можете смотреть в меню быстрых действий (Молния наверху) - Ошибки. 

2. Удобнее смотр результата делать через кабинет администратора, т.к. он получает более расширенную информацию о работе страницы (тексты ошибок-исключений, отладочная информация в Chrome Console). 

3. Если нужно подсмотреть данные в хранимых процедурах используйте exec as_print @str='123'. Вывод будет указываться на /start в панели print. Как альтернативу можно использовать другой вариант: в меню быстрых действий (молния справа вверху выбираем SQL запрос (RunSQL) и в открывшемся окне добавляем такой код

select top 5 * from as_trace where code = 'print' order by id desc

и нажимаем "Запустить". Результат отобразится ниже в этом же окне). Пример отображения результата можно увидеть на картинке ниже:

Вывод подтаблицы людей в таблице Отделы 

Мы добавим возможность посмотреть людей в отделе прямо в таблице Отделы (статья по реализации подтаблиц). 

Добавляем в SQL GetItems для таблицы deps дополнительный столбец sub_name, в котором указываем сниппет новой таблицы (и в data-itemID передаем наш текущий отдел). 

Код SQL GetItems - https://pastebin.com/veWLbvbB

Примечание: в таблицах можно использовать псевдо поля с префиксами, например, sub_, desc_ backcolor_ и т.д. - они добавляют ячейкам таблицы дополнительные возможности и стили. 

Теперь в выводе таблицы можно увидеть значок +, при нажатии на который идет попытка загрузить таблицу (и выдается ошибка, т.к. такой таблицы пока нет в системе).  В целом в sub_ можно поместить любую разметку, которая будет “скрываться” в поле. 

Создаем таблицу humans, проставляем  roles = admin,hr. Быстрое создание - ДА 

Добавляем колонки и настраиваем их параметры. 

Для примера сделаем редактирование полей Фрилансер (переключатель) и Статус (список выбора). 

Кликаем на хранимую процедуру для поля statusID - она задает возможные значения для списка статусов. 

SQL для statusID - https://pastebin.com/T36kQ706

SQL GetItems - https://pastebin.com/WpU6xabY

SQL FastCreate - https://pastebin.com/J7HgDTTF

SQL UpdateField - https://pastebin.com/cFfP6LP4

Проверяем работу таблицы - открываем ее как подтаблицу в deps, добавляем людей, меняем поле Статус и переключатель Фрилансер. 

Добавление сотрудника через форму 

В случае, если нам нужно создавать запись в базе не на основе 1 поля (как в Fast Create в таблицах), а на основе множества полей, используем компонент форма. 

Будет удобно, если есть возможность создавать сущность с любой страницы. Для этого используем панель быстрые действия.

Добавим  в панель быстрых действий можно через страницу /menu (кнопка Панель быстрых действий). В более старых версиях можно вносить правки через процедуру GetLayout SELECT 3 (Быстрые действия / GetLayout - это процедура для загрузки общих настроек при вызове некой страницы). 

В SELECT 3 добавляем нашу ссылку (данный select можно формировать в зависимости от username и ролей текущего пользователя). 

Код SQL - https://pastebin.com/Wmz3KhLq

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

Создаем форму (через панель быстрых действий) newHuman. В настройках формы прописываем Роли = admin,hr. 

Создаем и настраиваем столбцы (пусть будет 2 поля - ФИО и отдел). 

Для поля Отдел прописываем хранимую процедуру - https://pastebin.com/9DT07ZhA

Используем разметку формы по умолчанию, т.к. оставляем пустым поле Custom HTML в настройках формы. 

Прописываем процедуру GetItem (инициализация полей формы) - https://pastebin.com/SBtBhk4r

Процедуру проверки данных перед сохранением формы CheckItem мы по факту не будем использовать и она всегда будет возвращаться result=true - https://pastebin.com/gCbWJSjW

В процедуре SaveItem мы сохраняем нового сотрудника - https://pastebin.com/0yNrLZTc

Проверяем как работает форма добавления сотрудника.

Страница просмотра сущности (человека)

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

Также добавим возможность вести комментарии по данному человеку. 

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

Создаем страницу human (через панель быстрых действий наверху страницы). 

Добавляем на страницу сниппет вывода формы - https://pastebin.com/j3zfKSds

Указываем спецпараметр - url-itemID в фигурных скобках - он подменится на странице на URL параметр с таким именем - itemID. 

Ставим галочку Скрывать заголовок и указываем Роли = admin,hr

Указываем SQL страницы - https://pastebin.com/zQunrp9k

Страница /hr, указанная в хлебных крошках, пока не создана (это будет просто страница всех сотрудников). 

Создание формы Human 

Создаем форму human, указываем  Роли - admin,hr.  

Убираем галочку Скрыть форму после сохранения. 

Указываем столбцы: depID, fio, phone, freelancer, info.

Указываем SQL для поля depID - https://pastebin.com/ippzur19

Примечание: поля не обязательно должны повторять столбцы таблицы БД. Их можно использовать и для вывода общей информации, построенной в GetItem. 

Прописываем извлечение данных человека в GetItem - https://pastebin.com/1ks5Jrz0

Теперь посмотрим промежуточный результат, заходим на страницу одного из людей /human/2 (подходящий itemID можно взять из таблицы hr_humans)

Пока используется разметка по умолчанию. Прописываем новую разметку в Custom HTML в управлении формой -  https://pastebin.com/AKxqYp8x

В разметке используются специальные переменные вида: 

• {colcontrol-field} - добавить поле field (элемент управление)
• {colview-field} - добавить поле на просмотр (просто текст со значением)
• {collabel-field} - добавить метку от поля (только label для элемента управления)
• {colwithlabel-field} - добавить полноценное поле с меткой (элемент управления с меткой). 

Кастом разметка заполняется в настройках формы в поле Разметка (слева столбцы формы, справа поле разметки формы). 

 

Реализуем процедуру CheckItem (без проверки) - https://pastebin.com/KRNyQ7Tv

Реализуем SaveItem - https://pastebin.com/cHumvzaC

Проверяем работу кнопки сохранения формы: 

Добавление ссылки на страницу Сотрудник в таблицу Humans

Через поиск сверху находим таблицу humans и в GetItems прописываем ссылку в поле fio - https://pastebin.com/TtnvBytz

Альтернативный вариант - можно форму human показывать прямо на той странице в модальном окне, для этого используем сниппет модальной формы и сделаем эту ссылку в поле desc_ для fio - https://pastebin.com/H8SP82p7

 Результат (на фоне видна кнопка Редактировать, которая вызывает это модальное окно): 

Добавление комментариев к человеку

Чтобы добавить комментарии на странице человека в разделе "Компоненты/Типы комментариев (/commentTypes)" добавляем новый элемент human. Устанавливаем роли на добавление, удаление и просмотр: admin,hr. Находим страницу human через поиск и выбираем Редактировать.

Вставляем сниппет комментариев на страницу (сохранение Ctrl + Shift + S). 

В качестве data-itemID устанавливаем url-itemID в фигурных скобках (при загрузке страницы это подменится на itemID из URL), а data-type = human (тот тип комментариев, который мы создали). 

Сниппет - https://pastebin.com/5C6RQMWT

Проверяем на странице сотрудника /human/2 работу комментариев: 

Добавление комментариев в таблицу

В настройках таблицы humans (находим через поиск сайта в верхней панели, либо через раздел /tables) указываем настройки: 

• Комментарии построчно ДА
• Ctrl + Click на строке для показа комментариев ДА 
• Код для комментариев human

В итоге в таблице humans будут доступны комментарии в виде подтаблицы: 

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

Выведем всех пользователей на странице /hr, используя уже существующую таблицу humans, которую мы использовали как подтаблицу для отделов. 

Создаем страницу hr

Роли - admin,hr

Снимаем галочку Скрыть заголовок 

Добавляем сниппет таблицы humans с data-itemID=’’   https://pastebin.com/2YMB1hFG

SQL страницы - https://pastebin.com/HPyadWYJ

Чуть меняем в таблице humans хранимку GetItems - https://pastebin.com/NNHFr029 (добавлено условие or @filterItemID=’’).

В итоге получаем вывод таблицы humans на странице /hr

Создание роли и пользователя

До этого мы все делали в рамках роли admin (именно поэтому в доступах мы везде прописывали admin,hr, чтобы под админом можно было протестировать форму). 

Для создания роли hr переходим на Роли /roles и добавляем роль hr.

Для создания пользователя с ролью hr переходим на Пользователи /members и создаем пользователя с ролью hr.

В отдельном браузере проверяем как работает вход под новым пользователем. 

Добавление меню для пользователя

Меню формируется через настройки страниц или раздел /menu. 

Добавим в меню пункт База сотрудников (/hr) и отделы (/deps). Через поиcк находим эти страницы, переход в Редактирование страницы и ставим для них следующие параметры: 

• порядок в меню - число. 
• галочка В меню
• иконка в меню (по умолчанию fa fa-cube). 

После установки через меню быстрых действий необходимо выполнить Очистку кеша. 

В итоге кабинет hr выглядит следующим образом. 

Примечание: 

• Чтобы пользователь по умолчанию переходил на определенную страницу, в настройках этой страницы ставим галочку Панель управления. 
• Пункты меню могут иметь вложенность до 1 уровня. Вы можете выбрать родителя для пункта через настройку Родительская страница в меню

Добавление фото/файлов на странице Сотрудника

Добавим возможность прикрепить к человеку некие файлы (более подробно про работу с ресурсами можно прочитать в этой статье). 

В разделе Компоненты / Типы ресурсов добавляем новый тип human (имя необязательно должно совпадать с кодом страницы или с чем-то еще). 

Настраиваем основные параметры Типа ресурса: 

Добавляем сниппет менеджера ресурсов в форму human (в GetItem формы в поле info добавляем). Менеджер ресурсов - компонент для загрузки файлов и прикрепления к определенной сущности (например, human).

В итоге на  странице человека появляется возможность добавлять файлы: 

Если в сниппет менеджера ресурсов добавим data-compact=”1”, то будет более компактный вид элементов: 

Примечание. если файлы не грузятся, в первую очередь проверьте, что есть доступ на запись у процесса пула (группа IIS_USRS) к папке /uploads на сервере, если не выводятся картинки в менеджере ресурсов, то читаем эту статью.

Заключение

Таким образом, мы создали небольшую систему учета по кадрам, которую в дальнейшем можно развивать под свои специфические бизнес-процессы. 

Хорошо “набив руку” на типовых компонентах (Таблица, Форма, Дашборд), можно кардинально снизить время создания подобных учетных систем, а также улучшить качество выпускаемого продукта (по сравнению с более сложным процессом заказной разработки на полном стеке веб-разработки).