Действия в браузере actions JSON

Введение

После выполнения действий в SQL на клиенте иногда возникает необходимость что-то обновить или сделать. 

Для этого используются JS коллбеки. Но есть более простая альтернатива - настройка actions в виде JSON, где указывается JS что необходимо сделать на странице. 

Пример реализован на демостенде watch - https://demo.web-automation.ru/list/watch/rabota-actions--json-dlya-vypolneniya-deystviy-v-brauzere---1149

Где доступна эта настройка: 

• Формы SaveItem, CheckField, SaveField, 
• Таблицы RemoveItem, UpdateField, Import, Create, Operation

Параметр actions представляет из себя массив, каждый объект которого состоит из полей действий (alert, refreshContainer и т.д.)

Какие операции может выполнять actions

Параметр modal - вывод модального окна. 

• title - заголовок окна
• text - разметка окна 
• btnText - кнопка внизу окна (если пустое, то не будет указана кнопка). Ее обработка может работать через кастом JS обработчик
• big - если 1, то окно будет на весь экран.

Пример: 

select 1 Result, ' ' Msg, '
    [{modal: {
    		title:"111",
            text:"222", 
            big: 1, 
            btnText:"123"
    	}
    }]    
    ' actions

Параметр audio (путь к файлу mp3) - если указан путь к файлу, то он будет единоразово проигран в браузере получателя. 

Параметры для alert: 

• text - текст сообщения
• title - заголовок окна
• type - вид окна (primary, success, warning, danger, info и т.д.)
• delay - задержка сколько будет показываться окно в мс (если 0, то будет висеть постоянно)
• hidePrev - если true, то уберет все предыдущие сообщения 

Массив updates позволяет обновить в режиме реального времени поле таблицы или формы. Указываем тип компонента (control), код компонента (code), itemID (привязка к сущности - параметр компонента data-itemID), какая колонка (col) и какое значение необходимо установить. Для таблиц также передается pk - первичный ключ таблицы (параметр id). 

Параметр setContainerContent - позволяет установить через delay мс нужную разметку(value) в некотором контейнере с селектором selector. 

Если передан refreshContainer, то на клиенте будет обновлена область с указанным jquery селектором в refreshContainer. 

Параметр redirectUrl - если задан, то пользователь, которому пришло это сообщение, будет переведен на указанный адрес. 

Параметр focus - задает селектор элемента, на который будет установлен фокус ввода. 

Параметр pushOptions задает настройки push уведомления пользователю: 

• title - заголовок push уведомления
• body - текст
• icon - ссылка на иконку
• image - ссыка на картинку
• id - id, который передается в data в push уведомлении
• actions  - массив действий (с полями action, title). Отображаются внизу push уведомления как ссылки.  
• vibrate - если true, то будет вибрация мобильного устройства при пуш уведомлении. 
• tag - некая строка, которая позволяет сделать так, чтобы выводилось одно пуш уведомление (а не много дублей) при нескольких открытых вкладках (например, идентификатор уведомления). 

Параметр printlog выводит общий поток подобных данных в контейнере слева внизу на странице: 

• title - заголовок
• text  - текст
• type - тип (warning, info, danger, success,primary).

Параметр addClass позволяет добавить css класс к какому-то объекту на странице (параметры class и selector).

Параметр removeClass позволяет удалить css класс у какого-то объекта на странице (параметры class и selector).

Параметр attr задает атрибут html элемента - поля selector(jquery селектор атрибута), key (название атрибута), value (значение атрибута).

Параметр removeAttr удаляет атрибут html элемента - поля selector(jquery селектор атрибута), key (название атрибута).

Параметр showModalForm задает вывод формы в диалоговом окне. Поля code, itemID, big, title, btnText.

select 1 Result, 'OK' Msg, 
    '
    [{"showModalForm": 
    	{
        	"code": "newPage", "itemID": "0", "big": "1", "title": "Новая страничка", "btnText": "Отправить"
        }
    }]
    ' actions

Параметр showModalTable задает вывод таблицы в диалоговом окне. Поля code, itemID, big, title.

select 1 Result, 'OK' Msg,
    '
    [{"showModalTable": 
    	{
        	"code": "pages", "itemID": "0", "big": "1", "title": "Таблица в мод окне"
        }
    }]
    ' actions 

Пример JSON actions

Пример JSON объекта с 1 элементом в массиве, который содержит все варианты действий:

    [
     {
     	"alert": {"text": "111", "title": "222", "type": "secondary", "delay": 5000, hidePrev: true, icon: "fa fa-bars fa-3x"},
     	setContainerContent:{selector: "h1", delay: "2000", "value": "11111111"},
        audio: "/uploads/mp3/call.mp3",
        printlog: {title: "111", text: "222", type: "success"},
        pushOptions:{
        	title: "11111", body: "222222",	icon: "", image: "", id: 0,
            actions:  [{ action:  "https:yandex.ru" , title: "Yandex.ru" }] ,
            vibrate: null, tag: "nt"+0
        },
        updates: [
        	{control: "form", itemID: 0, code: "watch_actionsjson", col: "actions", value: "xxxxx"},
            {control: "table", itemID: 0, code: "watch_actionsjson", col: "actions", pk:"123", value: "xxxxx"},            
        ],
        refreshContainer: "body", 
        redirectUrl: "", 
        addClass: {selector:"body", class:"text-danger"},
        removeClass: {selector:"h1", class:"text-danger"} ,
        attr: {selector:"body", key:"data-p1", value: "xx1"},
        removeAttr: {selector:"h1", key:"data-p1"}        
     },      
     ]

Обработка результата внешнего действия через actions 

Внешнее действие можно обработать через JS коллбек, но если вам прсото надо вывести результат операции в alert, то проще это сделать через actions.

Например, в форме мы хотим получить по SaveItem размер свободного места через внешнее действие diskInfo

-- в SaveItem
-- SELECT 1
	select 1 Result, ' ' Msg , '
    {"outerAction": {
    		"text":"",
            "delay": 10000,
            "icon": "icon",
            "title": "" ,
            "closeDialog" : true,
            "refreshContainer" : "",
            "spCallbackResult": false
    	}
    }
    ' actions
-- SELECT 2   
select 'diskinfo' type, '' disk

Тип outerAction содержит следующие поля: 

• text - что выводим в alert (если пустое, то берется Msg от рзеультата внешнего действия),
• delay - задержка в мс - сколько показывается alert (по умолчанию 10000),
• icon  - иконка Font Awesome
• title - заголовок окна alert
• closeDialog - если true, то в случае успешной операции будет закрыто диалоговое окно. 
• refreshContainer - какую область обновить на странице после успешной операции (селектор jquery)
• spCallbackResult - если true, то результат операции будет браться не из result, msg внешнего действия, а из outer_ процедуры. Это позволяет на сервере обработать результат и выдать в готовом виде на фронт. 

Пример:

SaveItem формы: 

-- SELECT 1
	select 1 Result, 'OK' Msg , '
    {"outerAction": {    		
            "spCallbackResult": true
    	}
    }
    ' actions
-- SELECT 2
select 'diskinfo' type, '' disk, 'test1' spCallback

Outer коллбек

CREATE OR ALTER PROCEDURE [dbo].[outer_test1]
	@parameters ExtendedDictionaryParameter readonly,
	@data nvarchar(128) = '',
	@username nvarchar(128) = ''
AS
BEGIN
	declare @TotalFreeSpace nvarchar(max) =(select Value2 from @parameters where [Key]= 'TotalFreeSpace')
	declare @bt bigint = try_cast(@TotalFreeSpace as bigint)
	-- SELECT 1 ReesultModel
	select 1 Result, 'Свободно на диске: '+  isnull(cast(@bt / 1024/1024 as nvarchar), 'XX') + 'Мб' Msg	
		
END

В итоге при нажатии кнопки будет  показан alert с нужной строкой о свободном месте на диске.