Заполнение формы с режимом Черновик

Введение 

В этой статье научимся делать форму, которая будет сохранять свое состояние (создавать черновики). 

Если пользователь уйдет, он сможет потом ее дозаполнить (закрыть сайт, потом открыть заново). 

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

Это решение не универсальное и нужно дорабатывать свою форму для подобной функциональности. Но все это делается штатными средствами Falcon Space. 

Как реализовать форму с режимом Черновик 

1. Создаем таблицу для хранения черновиков. Сами поля будут храниться в JSON. Это позволяет делать универсальное хранилище для всех подобных форм. 

SQL для таблицы as_drafts: 

IF NOT EXISTS (SELECT * FROM sysobjects WHERE name= 'as_formDrafts' and xtype='U') BEGIN
	CREATE TABLE [dbo].[as_formDrafts]
	( 
	 [id] [int] IDENTITY(1,1) NOT NULL 
	 CONSTRAINT [PK_as_formDrafts] PRIMARY KEY CLUSTERED ( [id] ASC ) 
	) ON [PRIMARY] 
	print 'Создана таблица as_formDrafts ' 
END
GO 
IF COL_LENGTH( 'as_formDrafts', 'userGuid') IS NULL BEGIN 
	ALTER TABLE as_formDrafts
	ADD [userGuid] uniqueidentifier NULL  
END 
IF COL_LENGTH( 'as_formDrafts', 'formCode') IS NULL BEGIN 
	ALTER TABLE as_formDrafts
	ADD [formCode] nvarchar (128) NULL  
END 
IF COL_LENGTH( 'as_formDrafts', 'itemID') IS NULL BEGIN 
	ALTER TABLE as_formDrafts
	ADD [itemID] nvarchar (128) NULL  
END 
IF COL_LENGTH( 'as_formDrafts', 'created') IS NULL BEGIN 
	ALTER TABLE as_formDrafts
	ADD [created] datetime NULL  
END 
IF COL_LENGTH( 'as_formDrafts', 'body') IS NULL BEGIN 
	ALTER TABLE as_formDrafts
	ADD [body] nvarchar (max) NULL  
END 
IF COL_LENGTH( 'as_formDrafts', 'disabled') IS NULL BEGIN 
	ALTER TABLE as_formDrafts
	ADD [disabled] bit NULL  
END 

2. Создаем форму, создаем для нее поля. В нашем случае это 4 поля s1-s4. 

3. Прописываем GetItem формы. 

Выявляем уникальный идентификатор пользователя falconGuid (он у любого юзера в куки лежит). 

По falconGuid, коду и itemID формы ищем черновик. Если он есть - то разбираем JSON на наши поля (s1-s4). 

Также выводим в Subtitle дату черновика. 

CREATE PROCEDURE [dbo].[fm_watch_formDraft_getItem]
    @itemID nvarchar(256),	
	@username nvarchar(256),
    @parameters ExtendedDictionaryParameter Readonly
AS
BEGIN	
	declare @falconGuid uniqueIdentifier =(select convert(uniqueIdentifier, Value2) 
                                           from @parameters where [key]='falconGuid')
    
    declare @data nvarchar(max), @draftDate datetime 
    select top 1 @data = body, @draftDate = created
    from as_formDrafts 
    where formCode='watch_formDraft' 
    	and itemID = @itemID
    	and userGuid = @falconGuid
        and (disabled is null or disabled = 0)
    order by id desc
                                        
    if(len(@data)> 0 and isjson(@data)=1) begin 
    	-- SELECT 1
    	SELECT *
		FROM OPENJSON (@data, N'$')
        WITH (
          s1 nvarchar(max) N'$.s1',
          s2 nvarchar(max) N'$.s2',
          s3 nvarchar(max) N'$.s3',
          s4 nvarchar(max) N'$.s4'          
        ) t1
    	-- SELECT 2
        select 'h2' HeaderTag, 1 LineLabel, 
        	1 DisableSaveStateChecking, -- даем пользователю уйти со страницы при несохр данных
        	'Черновик сделан ' +
            dbo.as_timeDelay(datediff(minute, @draftDate, getdate()))  +
            'назад' Subtitle    
    end else begin 
    	-- SELECT 1
    	select 1
        
        -- SELECT 2
        select 'h2' HeaderTag, 1 LineLabel,
        	1 DisableSaveStateChecking, -- даем пользователю уйти со страницы при несохр данных,
            '' Subtitle 
    end 
END

4. Прописываем процедуру изменения полей

Извлекаем все поля формы, помещаем в JSON и сохраняем в Черновики. 

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

CREATE PROCEDURE [dbo].[fm_watch_formDraft_checkItemField]
    @itemID nvarchar(128),	
	@username nvarchar(256),
	@field nvarchar(256),
	@value nvarchar(max), 
    @parameters ExtendedDictionaryParameter readonly
AS
BEGIN	
	declare @falconGuid uniqueIdentifier =(select convert(uniqueIdentifier, Value2) 
                                           from @parameters where [key]='falconGuid')

	declare @s1 nvarchar(max) =(select Value2 from @parameters where [key]='s1')
    declare @s2 nvarchar(max) =(select Value2 from @parameters where [key]='s2')
    declare @s3 nvarchar(max) =(select Value2 from @parameters where [key]='s3')
    declare @s4 nvarchar(max) =(select Value2 from @parameters where [key]='s4')
     
    declare @body nvarchar(max) = cast((SELECT  top 1 @s1 s1, @s2 s2, @s3 s3, @s4 s4
	from as_trace -- no matter
	FOR JSON AUTO) as nvarchar(max))
    
    insert into as_formDrafts (userGuid, formCode,itemID, body, created)
    values (@falconGuid, 'watch_formDraft', @itemID, @body, getdate())
    
	-- SELECT 1
	select '' Msg, 1 Result, 
    	'.as-form[data-code=watch_formDraft] .as-formDraft:first' ReplaceContainer, 
    	'Черновик сохранен в '+ convert(varchar(5), getdate(), 108) ReplaceContainerHtml
END

5. Обрабатываем в SaveItem - мы должны пометить текущие черновики как недействующие (чтобы при следующей загрузке этой формы с этим itemID они не загрузились заново). 

CREATE PROCEDURE [dbo].[fm_watch_formDraft_saveItem]
   @username nvarchar(256), 
   @itemID nvarchar(256),
   @parameters ExtendedDictionaryParameter readonly
AS
BEGIN
	declare @falconGuid uniqueIdentifier =(select convert(uniqueIdentifier, Value2) 
                                           from @parameters where [key]='falconGuid')
   	 
	declare @ps1 nvarchar(max)
	select @ps1 = Value2 from @parameters where [key]='s1'
	declare @ps2 nvarchar(max)
	select @ps2 = Value2 from @parameters where [key]='s2'
	declare @ps3 nvarchar(max)
	select @ps3 = Value2 from @parameters where [key]='s3'
	declare @ps4 nvarchar(max)
	select @ps4 = Value2 from @parameters where [key]='s4'
	-- отключаем все предыдущие черновики (но не удаляем для истории)
	update as_formDrafts
    set disabled=1
	where formCode= 'watch_formDraft'
    	and itemID = @itemID
    	and userGuid = @falconGuid    
    
	-- SELECT 1
	select 1 Result, 'Сохранили данные. ОК' Msg, '' SuccessUrl, 0 HideFormAfterSubmit, '' RefreshContainer, 1 EnableSaveAlert

END

Таким образом мы создали механизм фиксации состяния форм. Причем можно дополнительно дальше анализировать как пользователь заполняет форму - как быстро он переходил по полям, в какой последовательности (для этого надо разбирать JSON черновиков). 

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

 

 

Насколько полезна эта возможность?

Другие модули

Редактирование одиночных полей формы в личном кабинете

Кнопка очистки формы

Цвет фона формы. Как изменить фон формы на сайте

Сообщение-уведомление на сайте вместо показа формы (NoForm). Отображение сообщения о недоступности формы

Работа с буфером обмена на сайте. Как скопировать текст в буфер обмена

Обновление содержимого страницы сайта (Refresh container). Перезагрузка части страницы

Любой вид формы на сайте - гибкая разметка формы

Выбор адреса и координат с подгрузкой из Google Maps API

Последние обновления

Платформа Falcon Space

Это снижение стоимости владения

за счет меньшего количества людей для поддержки

Это быстрое внесение изменений

по ходу эксплуатации программы

Это современный интерфейс

полная адаптация под мобильные устройства

Сайт использует Cookie. Правила конфиденциальности OK