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

Если передан refreshContaner, то на клиенте будет обновлена область с указанным 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).

Пример 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

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