Работа с формами
Компонент Форма
Способы вывода формы на странице
Форму можно вывести в следующих вариантах:
1. Просто сразу на странице в виде сниппета div с классом as-form
<div class="as-form" data-code="x1" data-itemid="123"></div>
2. Как ссылка на модальную форму. Подробнее про форму в модальном окне.
3. Как контекстное окно рядом с кнопкой (окно закрывается по нажатию на крестик). Подробнее про popover формы.
4. Как выпадающее окно рядом с кнопкой (окно закрывается по нажатию вне окна). Подробнее про dropdown формы.
5. Загрузка формы по ссылке в некий контейнер на странице. Подробнее про загрузку форм по ссылке.
Форма может содержать либо стандартную, либо кастомную разметку (в форму можно помещать другие компоненты, например таблицы, формы, файлы и т.д.).
Howto по формам можно посмотреть здесь - howto по формам Falcon Space.
Настройка хранимых процедур для формы
Какие есть процедуры у формы:
- GetItem - заполнение полей формы и изменение настроек файлы.
- CheckItem - проверка полей формы перед сохранением.
- SaveItem - сохранение формы по кнопке.
- Progress - отображение полоски прогресса при заполнении полей формы.
- CheckField - вызывается при изменении поля формы (например, для проверки корректности его значения)
- SaveField - вызывается для одиночного сохранения поля (поменял поле, ушел с него и поле сразу сохранилось)
Процедуры формы генерируются автоматически в настройках формы.
Важно следовать общему стилю и виду шаблонных процедур (они имеют префикс fm_example_).
Хранимая процедура извлечения данных формы GetItem
CREATE PROCEDURE [dbo].[fm_tatest_getItem]
@itemID int, --Стандартные параметры, они всегда приходят в эту процедуру.
@username nvarchar(256)
AS BEGIN -- инициализация формы данными. Названия вывода 1 SELECT должны совпадать с элементами формы
if(@itemID>0) begin --Перед началом можно проверить права данного username -- 1 SELECT значения элементов формы
select * from as_trace t1 where id = @itemID -- 2 SELECT дополнительные параметры настройки формы
/* select 'Редактирование "'+header+'"' Title, '' Subtitle, 'Сохранить' ButtonText, 'success' Background */
-- 3 SELECT некие табличные данные в свободном формате для вывода в форме через JS Render
end else
begin
select 1
end
select '' Title, '' Subtitle, 'h2' HeaderTag, 1 LineLabel
END
На входе:
username - текущий пользователь
itemID - что передано в data-itemID сниппета формы (может быть и строкой, по умолчанию int)/
в процедуру может передаваться необязательный параметр @parameters ExtendedDictionaryParameter в котором передаются системные параметры:
- langID - текущий язык пользователя
- falconGuid - guid пользователя, хранящийся у него в куки (работает для всех пользователей, в том числе неавторизованных), также в этом параметре передаются параметры URL страницы, на которой находится форма
НА выходе 3 SELECT:
- SELECT 1 - данные формы (колонки).
Также в этом запросе указываются метаданные к колонкам:
- возможные дополнительные CSS классы к элементам ставятся через class_{colCode}
- для списковых полей можно задать через параметр dict_{colCode} список возможных значений для элемента в формате Value1,Text1||Value2,Text2||...
- блокировать поле можно через установку в 1 для disabled_{colCode}
- disableXSS_{colCode}. Если 1 то отключает проверку XSS на данном поле
- можно указать что поле можно одиночно редактировать через префикс edt_{colCode}
- можно указать дополнительные подсказки для поля (при клике на них будет меняться значение поля) example_{colCode}. В качестве значения можно указать несколько значений через "||", например value1||value2||value3
- у поля можно указать гибкие настройки через JSON в поле options_{colCode}. Более подробно про настройки по каждому типу поля - /docs/formy--upravlenie-nastroykami-polya-cherez-options--polya
- подмена названия поля title_{colCode}
- тип поля можно переопределить через type_{colCode}
- SELECT 2 - Настройки формы.
- AlertOptions - JSON настройки для системного уведомления о заполнении формы (ОК или Fail). См. подробнее...
- Background (код фона формы, напр success) - задает фон формы.
- ButtonText - текст у кнопки действия (Сохранить).
- ChangeFontSize - если 1, то вверху появляются кнпоки для изменения размера шрифта.
- ChangeTriggerFieldOnLoad - если указано поле формы (или поля формы через запятую), то при загрузке будет вызвано событие изменения поля (например, чтобы прогрузить некоторые данные через ChangeitemField).
- CopyClipboard - некий текст. Если он указан, то вверху формы возникает значок Буфера обмена, при клике происходит копирование этого текста в буфер обмена.
- DisableAntiXSS - если 1, то для полей ввода будет отключена обработка HTML Encode (т.е. защита от XSS будет отключена и ее надо частично будет реализовать в коде SQL).
- DisableCheckField - если 1, то проверка полей при изменении через процедуру CheckField отключена.
- DisableFocusOnLoad - если 1, то при загрузке формы по умолчанию не будет ставиться фокус ввода на 1 поле формы (актуально когда несколько форм на странице).
- DisableSaveStateChecking - если 1, то для формы не будет выполняться проверка на изменения формы перед случайным закрытием или переходом на другую страницу. По умолчанию такая проверка есть для всех форм - если что-то меняли, то при случайном переходе на другую страницу будет возникать предупреждение о несохраненных данных.
- EditableSuccessMessage - задает текст сообщения об успешном изменении одиночного поля.
- EnablePrint - если 1, то появляется кнопка отправки на печать (печатается только форма, а не вся страница).
- EnterKeyMode - как будет обрабатываться нажатие на Enter на поле. save - сохраняем форму. next -переход к следующему полю (но некоторые поля пропускают - Переключатель, HTML editor и другие сложные поля).
- HeaderTag - h1, h2, h3, h4, h5, h6 - позволяет указать тег для вывода заголовка формы.
- Hide - если 1, то компонент совсем не выведется (пустой div и установка класса hide).
- LineLabel - если 1, то при дефолтовой разметке формы метки полей будут выводиться на отдельной строке (по умолчанию они выводятся слева от элемента управления).
- NoForm - JSON настройки для вывода сообщения (например, нет доступа). При этом форма не показывается совсем - только вывод сообщения. Настройки:
- title - заголовок
- text - текст сообщения
- type - стилизация окна (success,warning,primary, info и т.д.)
- icon - вывод иконки
- alert - если true, то будет выводиться не разметка в форме, а alert окошко справа вверху (в случае модальной формы - модальное окно будет закрываться)
- Subtitle - разметка под заголовком формы.
- Title - заголовок формы.
- TitleTooltip - подсказка-значок рядом с Title формы.
- SELECT 3 - дополнительные табличные данные (произвольные колонки) для вывода через jsRender разметку
- SELECT 4 - вызов внешних действий. См. вызов внешних действий
Хранимая процедура проверки элемента CheckItem
CREATE PROCEDURE [dbo].[fm_test_checkItem]
@username nvarchar(256),
@itemID int,
@parameters ExtendedDictionaryParameter READONLY
AS BEGIN -- процедура проверки корректности данных перед сохранением
declare @ptitle nvarchar(max)
select @ptitle = value from @parameters where [key] = 'title'
declare @id int
select @id = id from as_trace where header=@ptitle and id <> @itemID
if(@id >0) begin
select 0 Result, 'В системе уже есть элемент с выбранным Заголовком (ID='+cast(@id as nvarchar)+')' Msg
end else begin
select 1 Result, '' Msg
end
END
Процедура возвращает модель ResultModel: Result, Msg
Если Result=1 то проверка прошла успешно.
Примечание: ранее использовался способ передачи колонок формы как параметров хранимой процедуры (он оставлен для совместимости). В настоящий момент используется коллекция @parameters для передачи колонок (также в рамках этой коллекции дополнительно передаются langID и falconGuid).
Если не хотите использвоать CheckItem - оставьте в ней только select 1 Result, '' Msg
Хранимая процедура сохранения элемента SaveItem
CREATE PROCEDURE [dbo].[fm_metric_saveItem]
@username nvarchar(256),
@itemID int,
@parameters ExtendedDictionaryParameter READONLY
AS BEGIN
declare @pcode nvarchar(max), @ptitle nvarchar(max)
select @pcode = Value2 from @parameters where [key]='code' -- всегда Value2, а не Value
select @ptitle = Value2 from @parameters where [key]='title'
update as_mt_metrics set code = @pcode, title = @ptitle
where id = @itemID
-- SELECT 1 select 1 Result, '' Msg, '' Icon, '' RefreshContainer, 10000 AlertDelay, 0 EnableSaveAlert, '' SuccessUrl, 0 HideFormAfterSubmit
-- SELECT 2 Внешние действия
-- select 'notification' type, 'text1' text , 'demo1' [to], 'ticketExecutor' typeCode, 'http///' url, 'add111' additional select 'email' type, 'ru@rudensoft.ru' [to], 'sub1' subject, 'body1' body
END
Входные параметры:
@username - текущий пользователь
@itemID - переданный параметр itemID
@parameters - коллекция параметров из URL (Key, Value)
Примечание: в @parameters используйте Key, Value2, помимо полей формы там находятся еще следующие параметры:
- buttonType - код кнопки сохранения (если используется множесто кнопок сохранения на форме)
- confirmCode - код подтвержения операции (для спец режима работы формы по подтверждению действия)
- referrer - URL страницы, на которой расположена форма
- langID - ID языка пользователя
- falconGuid -Guid посетителя из куки (в том числе и неавторизованного).
- falconFR - первый внешний источник, откуда пришел пользователь.
- falconFP - первая посещенная страница нашего сайта.
- userIP - IP пользователя
- userPort - порт, по которому обратился пользователь (обычно это 443 или 80)
- domain - домен сайта (в случае если используем несколько доменов для одного и того же сайта).
Первый запрос (SELECT 1) возвращает модель:
- Msg - задает текст сообщения о результате операции (Если передать 1 пробел ' ', то сообщение не будет выводиться. Если пустая строка - то результат по умолчанию),
- Result - если 1 то операция успешно выполнена,
- ItemID - переданный начальный ItemID в форму,
- SuccessUrl - если непустая строка, то после выполнения операции осуществляется переход по этому адресу,
- HideFormAfterSubmit - если 1, то форма скрывается после сохранения (а модальное окно закрывается),
- RefreshContainer - селектор контейнера, который надо обновить (например, можно ставить глобальный контейнер на странице ‘.pHtml’). В итоге после сохранения происходит обновление других компонентов в рамках указанного контейнера,
- Refresh - если 1, то выполняется обновление компонента после операции.
- Actions - JSON для действий в браузере.
- EnableSaveAlert - если 1, то результат будет всегда выдаваться во всплывающем окне справа наверху (даже несмотря на то, что есть {form-result}),
- Icon - если указано, то будет выводиться данная иконка в сообщении справа вверху. Пример: fa-cube (подробнее о стилизации иконок можно почитать здесь, об анимации иконок здесь),
- AlertDelay - задержка показа окна результата в мс. По умолчанию 30000,
- Type - цветовое решение окна: danger, success, warning, info, primary и т.д.,
- Confirm - JSON объект для вывода окна подтверждения выполнения действия (поля title,text, btnText, confirmCode, system). См. Как сделать окно подтверждения действия формы.
- ReplaceContainer и ReplaceContainerHtml - если есть задача заменить HTML в каком-то блоке, то указываем селектор в ReplaceContainer и разметку в ReplaceContainerHtml.
- RunAction - задается разметка кнопки (например, с as-form-modal), которая будет активирована (событие click) после успешного выполнения SaveItem.
Второй запрос (SELECT 2) это вызов внешнего действия. См. вызов внешних действий
Примечание: ранее использовался способ передачи колонок формы как параметров хранимой процедуры (он оставлен для совместимости). В настоящий момент используется коллекция @parameters для передачи колонок (также в рамках этой коллекции дополнительно передаются langID и falconGuid)
Хранимая процедура сохранения одиночного поля SaveField
CREATE PROCEDURE [dbo].[fm_metric_saveEditableField]
@pk nvarchar(128), -- id for item
@fieldCode nvarchar(64), -- form field @value nvarchar(max), -- field value
@username nvarchar(256) -- current user
AS BEGIN
if(@fieldCode='XXXXXXXXXXXXXXXXXXXXX') begin
update as_categories set typeCode = @value where id = @pk
select 1 Result, '' Msg return
end
-- ...
--SELECT 1 Result,Msg select 0 Result, 'Не найден код сущности' Msg
-- SELECT 2 Внешние действия (notification, email и т.д.)
END
Возвращает SELECT 1 (Result, Msg) и SELECT 2 (Внешние действия)
SELECT 1
- Result - результат операции
- Msg - сообщения
- Icon - иконка Font Awesome
- Type - тип окна (primary, success и т.д.)
- RefreshContainer - jquery селектор для обновления части страницы (какую область страницы с компонентами обновить, например ".class1")
- Actions - JSON для действий в браузере.
- ShowContainer - какой контейнер показать, jquery selector
- HideContainer - какой контейнер скрыть, jquery selector
- ReplaceContainer и ReplaceContainerHtml - если есть задача заменить HTML в каком-то блоке, то указываем селектор в ReplaceContainer и разметку в ReplaceContainerHtml.
- Refresh - если 1, то выполняется обновление компонента после операции.
Также в процедуру можно передавать параметр @parameters типа ExtendedDictionaryParamerer для передачи спец параметров (langID и falconGuid).
Хранимая процедура для заполнения списковых полей
Имя процедуры задается автоматически в виде fm_{formCode}_{colCode}_dict и процедура редактируется через кабинет в Управление колонками.
CREATE PROCEDURE [dbo].[fm_notificationType_categoryName_dict]
@username nvarchar(256)
@itemID int
AS BEGIN
select 'Не выбрано' Text, 0 Value, 0 Selected -- 'Group1' optGroup для категорий в списке. (и по нему же должна быть сортировка)
union
select name Text, id Value, Selected from as_nt_notificationCategories order by Text
END
Передается ItemID на случай использования универсальной процедуры.
На выходе модель:
- Value - значение варианта выбора,
- Text - выводимые текст варианта,
- Selected - если 1, то элемент будет выбран,
- Disabled - если 1, то элемент будет недоступен для выбора,
- OptGroup - строковая метка для организации двухуровневых списков (важно, чтобы сортировка была по этому параметру),
- Color - цвет элемента, например, #ffa
- Value2 - (в некоторых особых случаях используется это поле).
Примечание.
- В процедуру может передаваться необязательный параметр @parameters DictionaryParameter в котором передаются системные параметры (langID, falconGuid)
- Ранее использовалось поле для хранения имени процедуры. Он остался рабочим для совместимости. Сейчас это поле не выводится и вместо него необходимо использовать новые процедуры с редактированием через кабинет.
- Если нужен элемент Не выбрано, то можно сделать union select 0 Value, ‘Не выбрано’ Text
- OptGroup используется для организации списка с категориями (для этого первый optGroup должен быть непустым и список должен быть упорядочен по optGroup).
- Если установлен Color - то список и его элементы будут иметь указанные цвета.
- Если стоит Disabled=1, то элемент списка будет неактивен.
Хранимая процедура для проверки одиночных полей при заполнении формы CheckItemField
Если существует подобная процедура с именем fm_{entity}_checkItemField, то она будет вызываться всякий раз, когда редактируется одно из полей формы.
Входные параметры:
@username - текущий пользователь
@itemID - переданный параметр itemID
@field - код поля
@value - текущее значение поля
@parameters - коллекция параметров из URL (Key, Value2)
CREATE PROCEDURE [dbo].[fm_metric_checkItemField]
@username nvarchar(256),
@itemID int,
@field nvarchar(256),
@value nvarchar(max),
@parameters ExtendedDictionaryParameter readonly -- необязательный
AS BEGIN
if(@field = 'roles') begin
if(charindex(' ', @value)>0) begin
select 'В ролях не должно быть пробелов!' Msg, 0 Result, '.projectStageCont' RefreshContainer, '.p1' ShowContainer, '.p2' HideContainer, '' ReplaceContainer, '' ReplaceContainerHtml
end
end
-- SELECT 1
select '' Msg, 1 Result
-- SELECT 2 Outer actions
END
На входе - ID сущности, код поля, значение и текущий пользователь.
В процедуру можно передавать параметр @parameters типа ExtendedDictionaryParamerer (Key, Value2) для передачи спецпараметров (langID и falconGuid) и текущие значения других полей формы.
Этот параметр также используется для извлечения данных, полученных из внешнего API.
На выходе:
SELECT 1
- Msg - сообщение
- Result - 1 или 0 (если 0 - значит поле невалидное)
- RefreshContainer - jquery селектор для обновления части страницы (какую область страницы с компонентами обновить, например ".class1")
- ShowContainer - какой контейтер показать, jquery selector
- HideContainer - какой контейтер скрыть, jquery selector
- ReplaceContainer и ReplaceContainerHtml - если есть задача заменить HTML в каком-то блоке, то указываем селектор в ReplaceContainer и разметку в ReplaceContainerHtml.
SELECT 2 - вызов внешних действий
Также вы можете задать коллбек для обработки в JS результата проверки поля - as.formcallbacks["{formCode}_checkField"](params, data).
Создание формы
Для создания формы необходимо сделать следующее:
-
В меню "Компоненты" выбрать "формы". На странице управления формами нажать кнопку "Новая форма".
-
Настроить параметры формы
-
Настроить поля формы
-
Создать хранимую процедуру fm_{code}_getItem (для формы редактирования. Она получает данные для загрузки текущего состояния формы. Для формы добавления это не нужно делать).
-
Создать хранимую процедуру fm_{code}_checkItem. Она вызывается для проверки полей формы перед сохранением. Если ее нет, то проверка не производится.
-
Создать хранимую процедуру fm_{code}_saveItem. Она сохраняет в базе значения формы при нажатии на кнопку Сохранить.
Поля формы
Код - код поля формы.
Название - название поля (отображается на самой форме).
Тип данных - тип данных поля (строка, число, дробное число и прочее, более подробно о типах полей формы ниже в этой статье.)
Placeholder - текст пустого поля.
Подсказка - текст отображающийся при наведении курсора на поле.
Порядок - порядок вывода элемента на форме (чем значение меньше тем элемент располагается выше)
Обязательное поле - если значение установлено в "Да", то система будет проверять заполненность данного поля при проверке или сохранении, и если поле не заполнено будет выдаваться предупреждение, что поле не заполнено.
Хранимка значений - задается источник данных для спискового элемента в форме (пример: выпадающий список значений)
Ширина колонки - задаётся в процентах или пикселях.
Зависимые колонки - указываются названия (код) зависимых полей формы. Пример: есть поле выбора страны, на основании выбора страны следующее поле будет иметь города относящиеся к данной стране. Более подробно здесь
Хранимая процедура отображения статуса заполнения формы Progress
CREATE PROCEDURE [dbo].[fm_knowledgeBaseArticle_progress]
@username nvarchar(256),
@itemID int,
@parameters ExtendedDictionaryParameter Readonly
AS BEGIN
-- процедура для визуализации прогресса формы
declare @fieldchannel nvarchar(max) = ''
select @fieldchannel = value from @parameters where [key]='channel'
-- SELECT 1 select 1 Result, '' Msg
-- SELECT 2 набор индикаторов прогресса
select 'Первый параметр' Title, 40 Value, 'Хорошо' [Text]
union
select 'Второй параметр' Title, 20 Value, 'Не очень' [Text]
END
Пример: [fm_example_progress]
На входе все элементы формы (передаются из несохраненной формы в параметре @parameters, там же передаются langID и falconGuid).
На выходе:
SELECT 1 - Result, Msg
SELECT 2 - Text, Value (от 0 до 100), Title
Эта процедура вызывается, если установлен тип прогресс-бара в GetItem Select 1: 'circle|line' ProgressType
Вызывается при каждом изменении элементов формы и выводится там где разметка {form-progress}
Примечание:
Круговая диаграмма работает только со значениями, кратными 10 (т.е. округляет до десятков). Если вам нужно использовать точные значения (например, отображать скидку в 3.5%, то используйте line режим для отображения прогресса).
Типы полей формы
Пример полей формы на демостенде
Вы можете использовать следующие типы полей
- Editor (CSS), editorCSS - редактор CSS с подсветкой синтаксиса
- Editor (HTML), editorHTML - редактор HTML с подсветкой синтаксиса
- Editor (JS), editorJS - редактор JS с подсветкой синтаксиса (если нужно отменить возможность форматировать код - ставим CSS класс as-disableAutoFormat)
- Editor (SQL), editorSQL - редактор SQL с подсветкой синтаксиса
- hidden - input type=hidden поле. Просто значение поля прокидывается из GetItem в SaveItem через форму (внимание, пользователь может его изменить через HTML).
- HTML, html - выбор Rich редактора tinyMCE
- HTML Lite, html-lite - выбор Rich редактора tinyMCE в упрощенном виде
- HTML5 Color, html-color - редактирование цвета
- HTML5 Date, html-date - поля для ввода даты. Форма сохранения YYYY-MM-DD (и не зависит от настройки в GetLayoutInfo dateFormat!)
- HTML5 Datetime local, html-datetime-local - поле для ввода даты и времени без учета часового пояса. Формат сохранения YYYY-MM-DDTHH:MM, ВАЖНО - datatime-local не работает в Firefox (поэтому используйте в большинстве случаев поля date + time).
- HTML5 Email, html-email - редактирование email
- HTML5 Month, html-month - выбор месяца. Формат сохранения YYYY-MM.
- HTML5 Number, html-number - выбор числа
- HTML5 Tel, html-tel - поле для телефона (установка формата делается через GetLayoutInfo, параметр phoneFormat, а для лендов добавить hidden поле с классом as-phoneFormat, и value="+d ddd-ddd-dddd")
- HTML5 Time, html-time - поле для ввода времени/ Формат сохранения HH:MM
- HTML5 Url, html-url - поле для ввода URL
- HTML5 Week, html-week - выбор недели. Формат сохранения 2020-W01 (YYYY-WWW).
- localStorage, sessionStorage, cookie, urlParameter - скрытые поля для передачи параметров в saveItem из куки, локальных ресурсов браузера или из URL.
- Альтернативный способ выбора содержимого текстовых файлов, textFile - файл не грузится на сервер, а содержимое файлов извлекается из него прямо в браузере. Подробнее.
- Ввод пароля, password - используется в формах регистрации. Скрывает ввод в виде звездочек.
- Выбор radio, radio - одиночный выбор через радиокнопки (в стиле связанных кнопок Bootstrap)
- Выбор иконки, iconPicker - выбор иконки Font Awesome. В базе значение хранится в текстовом виде, например, fas fa-search
- Выбор времени, time - выбор времени из выпадающего списка
- Выбор диапазона дат, daterange - (формат даты можно задать через настройку format либо использовать глобальную настройку dateFormat в GetLayout)
- Выбор места (гео), geo-autocomplete - вывод поля с поиском геолокации. Формат хранения значения - {lat}||{lon}||{geotext}||{JSONOptions}
- Выбор файла, files - можно добавлять файлы к форме (в том числе и в форме на добавление, когда еще нет сущности, к которой привязывать файлы). Подробнее.
- Дата выбор, date - выбор даты через плагин Datepicker (формат устанавливается в GetLayout в параметре dateFormat).
- Дерево с галочками, treeCheckboxes - выбор галочек в иерархическом списке
- Дробное число, float - число с плавающей точкой
- Картинки Radio, imageRadio - выбор через радиокнопки с картинкой
- Картинки Флажки, imageCheckboxes - выбор флажков с картинками.
- Многострочный текст, text - вывод textarea
- Переключатель, switch - чекбокс в виде переключателя (Да, Нет). В placeholder можно задать текст вместо Да/Нет. Для изменения размера можно передать классы в GetItem SELECT 1 ( 'as-switch-large' class_immediatelyLoad). as-switch-large, as-switch-mini, as-switch-small
- Подсказки dadata, dadata - поле с выпадающими подсказками по разным объектам - адреса, компании, банки и т.д. (демо)
- Слайдер значений, slider - выбор числа или диапазона чисел в виде ползунка.
- Содержимое файла, fileContent - загрузка файла через менеджер ресурсов и передача его содержимого в SQL процедуру в виде строки. Подробнее.
- Сортировка дерева, treeOrder - управление структурой дерева через Drag&Drop
- Список chosen, chosen - выбор из списка с возможностью поиска
- Список, select - комбосписок для одиночного выбора
- Список множественный chosen, chosenMiltiple - множественный выбор элементов из списка (в сохранение они идут как id через запятую).
- Список-поиск, select-search - поиск через autocomplete
- Список 2 (более функциональный), select2 - выбор элемента с поиском, добавлением элемента
- Стандартный выбор radio, defaultRadio - стандартный выбор из радиополей.
- Строка по шаблону, patternString - вводим некую строку, разбираем регулярным выражением и выводим разметку с неким значением (например, ввод ютуб ссылки и вывод iframe)
- Строка, string - текстовое поле в 1 строку
- Таймер, timer - поле, которое позволяет запускать таймер по секундам. Время в итоге передается в виде mm:ss.
- Установка рабочего графика, weekTime - позволяет выбрать определенные часы в неделе.
- Флажки, checkboxes - множественный выбор через галочки
- Флажок, bool - чекбокс
- Файл на внешнем ресурсе, remoteFile - указание URL и передача в процедуру saveItem тела файла, загруженного по данному URL. Подробнее.
- Целое число, int - целочисленное число
- Цвет множ. colorCheck, цвет colorRadio - выбор цвета (одиночный и множественный). В value - цвет, в text - текст (необязательно).
Примечание: если HTML5 будут введены некорректно, то они подсвечиваются розовым и форма не будет сохраняться, пока не будут исправлены ошибки.
Некоторые типы полей имеют дополнительные настройки в GetItem SELECT 1 в параметрах options_{code}. Подробнее
Форма с редактированием по отдельным полям (мгновенное сохранение полей, editable поля).
Можно сделать форму, где каждое поле будет сохраняться отдельно.
Для этого необходимо сделать следующее:
- В GetItem установить какие поля будут редактируемые, для этого добавляем в SELECT 1 выходные колонки вида 1 edt_{colName} (тем самым эти колонки будут реагировать на изменения и вызывать сохранение этих полей).
- Реализовать процедуру SaveField (сохранение отдельных полей формы).
- Кнопку Сохранить либо скрыть через CSS, либо использовать кастомную разметку формы и не вставлять кнопку в разметку.
Примечание:
1. Данный режим сохранения подходит для полей ввода, галочек, радиопереключателей, textarea, выбора из списка. Режим не работает для набора галочек и для сложных полей типа Code Editor.
2. Если вам необходимо установить вывод сообщения после успешного сохранения поля, то используйте в процедуре формы GetItem в SELECT 2 параметр EditableSuccessMessage (строка).
Форма с дополнительными параметрами
Бывают случаи когда нужно в форму передать несколько параметров (а не только data-itemID).
Форма без параметров
Данная форма может использоваться для выполнения каких-либо действий.
Т.е. выводим информацию с помощью Getitem и кастомной разметки + выполняем действие.
Важно! В процедурах CheckItem и SaveItem не должно быть параметров fieldName.
Работа с внешним источником API в форме
Среди настроек формы есть 3 параметра подключения внешних источников (коды API запросов через запятую, для выполнения исходящих запросов при различных событиях формы):
- GetItem API - запускается перед GetItem процедурой (загрузка формы).
- SaveItem API - запускается перед SaveItem процедурой (нажали кнопку Сохранить).
- CheckField API - запускается перед CheckField процедурой (изменили поле).
Результат ответ запроса API передается в хранимую процедуру через параметр @parameters ExtendedDictionaryKey (в Key пишется код запроса).
Решение проблем
Не получается корректно сохранить скрипт в форме
При использовании script
при кастомной разметке формы возникает проблема вложенных тегов script. Поэтому не используйте для формы кастомную разметку в случае если планируется эту форму использовать для редактирования каких-либо скриптов (теги script, например счетчики).
Ошибка при начальной загрузке формы
fm_{code}_getItem - всегда должен возвращаться какой-то результат. Если ваша форма на добавление, то можете просто возвращать select 1.
Криво выводятся подписи для элементов формы
Используйте разметку bootstrap для скелета формы (классы row, col-md-X и т.д.). Для меток используйте тег label с классом as-form-cap.
Множественный вызов GetItem процедуры
Дело в том, что процедура GetItem вызывается не только при первичной загрузке формы, но и при выполнении значимых действий (инициализация объекта формы) - при сохранении, при отслеживании изменения поля или сохранения одиночного поля и т.д.
Если вам необходимо отследить первый инициализирующий запуск GetItem, то используйте параметр isMainLoadForm в @parameters.
Пример:
CREATE PROCEDURE [dbo].[fm_myForm_getItem]
@itemID nvarchar(256),
@username nvarchar(256),
@parameters ExtendedDictionaryParameter readonly
AS
BEGIN
declare @isMainLoadForm bit = (select try_cast(value2 as bit) from @parameters where [Key]='isMainLoadForm')
print @isMainLoadForm
END
Для первичной загрузки параметр будет равен 1, в других случаях 0.
Howto по формам
Полный список вопросов, как реализовать ту или иную возможность на форме, описан в разделе Howto Формы.
Дополнительные материалы
- Как создать форму для редактирования сущности
- Как сделать кастомную HTML разметку для формы
- Как установить некоторые поля в форме по умолчанию при загрузке
- Как сделать модальную форму
- Как вывести форму во всплывающем окне рядом с кнопкой (popover)
- Как передать в форму скрытый параметр
- Загрузка формы по ссылке
Google поиск по нашей документации
- Руководства
- Основа Falcon Space
- Основные компоненты Работа со статусами. Управление статусами заявок, сущностей в личных кабинетах пользователей Работа с таблицами. Создание таблиц на сайте Работа с формами Работа с дашбордами личных кабинетов Диаграммы и графики в личном кабинете на сайте Календарь. Управление событиями в личном кабинете Терминал - рабочее пространство с окнами и вкладками
- Возможности
- Коммуникация с пользователем
- Дизайн, стилизация, юзабилити
- Лендинги
- Универсальный API
- Примеры интеграций
- Каталоги
- Навигация
- Документы
- Дополнительные компоненты
- Продвижение, SEO
- Системные моменты
- Системное администрирование
- HOWTO
- Таблицы
- Формы
- Загрузка файлов, картинок
- Работа с SQL
- HOWTO JS
- HOWTO Верстка
- Решение проблем
Выгода от использования Falcon Space
В 2-3 раза экономнее и быстрее, чем заказная разработка
Более гибкая, чем коробочные решения и облачные сервисы
Используйте готовые решения и изменяйте под свои потребности
- Шаг 1. Создать концепт проекта
- Шаг 2. Получить оценку бюджета (КП)
- Шаг 3. Заключить договор
- Шаг 4. Создать совместно техническое задание
- Шаг 5. Поэтапная реализация проекта