Действия в браузере 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<hr>", 
            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

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

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

Параметр 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).

Пример 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"}        
     },      
     ]

 

Falcon Space - функциональная веб-платформа разработки на узком стеке MS SQL/Bootstrap. Вводная по Falcon Space
Насколько полезной была статья?

Google поиск по нашей документации

Falcon Space

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

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

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

по ходу эксплуатации программы. Как создается функционал на платформе

Это простой удобный интерфейс

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

Нужна бесплатная консультация?
Получить оценку проекта
Создайте концепцию проекта на основе нашего шаблона и получите оценку проекта в виде КП.
Демо-сайт решений
Базисные решения, которые можно гибко адаптировать под себя: менять внешний вид, бизнес-логику и даже структуру базы данных.
Сайт использует Cookie. Правила конфиденциальности OK