Основы работы на JS в рамках платформы. Реализация глубокой кастомизации функционала на frontend.

Введение 

В этой статье мы рассмотрим базовые моменты по работе с JS в рамках платформы Falcon Space. 

Если вам нужно сделать что-то сильно кастомное на платформе в плане работы Frontend, у вас есть множество возможностей "подлезть" со своим JS кодом. 

Если вы совсем базово знаете JS, jQuery, то вы сможете делать расширения функционала на JS. 

JS можно менять в следующих местах: 

• Глобальный JS (в быстрых действиях) - работает на всех страницах 
• JS в рамках страницы (на редактировании страницы, вкладка JS) - работает на выбранной странице 

В большинстве случаев лучше помещать код в такую обертку. В этом случае он будет выполняться после полной загрузки страницы: 

$(function(){
    // code here 
});

Простые операции с jQuery

Работа с селекторами jQuery: 

$('body') // найти элемент с тегом body
$('.p1') // все элементы с классом p1
$('#x1') // все элементы с id=x1 (если используете id то он должен быть уникальным на странице!)
$('input[type=text]') // все элементы input с атрибутом type=text

$('input:visible') // все видимые элементы input на странице

$('.p1 span') // все элементы span которые лежат к контейнерам с классом p1

$('.as-table[data-code=t1] .crd2Row[data-itemID=123] td[data-code=col1]') // ячейка с кодом col1 в строке с id=123 в таблице t1 

Получение элементов на странице: 

// установить поле формы
// для списка  
$('.as-form[data-code=form1] .as-form-item[data-code=col1] select option[value=123]').attr("selected", "selected");
// для поля с текстом
$('.as-form[data-code=form1] .as-form-item[data-code=col2] input').val('123');

// установка разметки в определенный контейнер с классом abc
$('.abc').html('здесь некая разметка'); 

Установить элемент: 

// получаем данные некоторых полей формы
// для списка  
var col1  = $('.as-form[data-code=form1] .as-form-item[data-code=col1] select').val();
// для поля с текстом
var col2  = $('.as-form[data-code=form1] .as-form-item[data-code=col2] input').val();

// получение полей таблицы 
var col3  = $('.as-table[data-code=table1] .crd2Row[data-itemID=123] .crd2Item[data-code=col3] .crd2Cell ').text(); // or .html()

Как скрыть/показать элемент: 

$('.s1').addClass('hide');
$('.s2').removeClass('hide');

Добавить элемент или удалить его со страницы: 

$('.s1').html(''); // полностью заменяем содержимое контейнера
$('.s2').append(''); // добавляем в конец контейнера
$('.s2').prepend(''); // добавляем в начало контейнера

$('.s1').remove();  // полное удаление элемента со страницы 

Получить или установить значение атрибута: 

$('.s1').attr("attr1"); // получили значение атрибута attr1
$('.s1').removeAttr("attr1"); // удалили атрибут attr1
$('.s1').attr("attr1", "123"); // установили значение атрибута attr1

 Функции обработки событий на странице: 

$(document).delegate('.s1', 'change', function(e){  // вызывается функция при изменении значения элемента 
 ...
});   

$(document).delegate('.s1', 'click', function(e){  // вызывается функция при клике на элемент
   e.preventDefault(); // отменяет действие по умолчанию, например, переход по ссылке для ссылок.

 ...
});   

Пройти в цикле некоторые элементы: 

// в списке с классом s1 проставляем у всех элементов в конце их индекс
$('ul.s1 li').each(function(index, el){
   var  s=$(this).html();
   $(this).html(s + "-" + index);
});

Как подлезть со своим кодом JS в нужный момент

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

Для этого существуют JS коллбеки.  Они вызываются тогда, когда произошло определенное событие. Его вы можете обработать, написав свой JS коллбек. 

Коллбеки таблиц - /docs/tablicy--kak-dobavit-kollbek-posle-zagruzki-tablicy

Коллбеки форм - /docs/formy--kak-dobavit-kollbek-posle-zagruzki-formy-i-posle-sokhraneniya-formy

Коллбеки дашборда - /docs/dashbordy--kak

Глобальные JS коллбеки - /docs/js--kak-vyzvat-kollbek-pered-zagruzkoy-vsekh-komponentov-as-js

Как обрабатывать JSON из внешних действий

Иногда требуется обработать ответ от внешних действий. Он представляет из себя дерево объектов ответов, передаваемый в виде JSON строки. 

Обработка ответа от внешнего действия обычно происходит через коллбек saveItem некоторой формы: 

$(function(){
  as.formcallbacks["form1_saveItem"] = function(data){
    console.log("x1", data.additionalData)
      var url = JSON.parse(data.additionalData)[0].msg;
      if(url){
        var s = "Скачать документ";
        as.sys.bootstrapAlert(s, {type:"success", hidePrev: true, delay:100000});
      }else{
        as.sys.bootstrapAlert("Произошла ошибка при формировании документа", {type:"danger", hidePrev: true, delay:1000000});
      }
  }
});

Ключевое здесь - JSON.parse(data.additionalData)[0].msg 

Парсим JSON строку в объект, получаем из него определенные поля. Удобно сначала получить весь объект в консоль для дальнейшего постепенного парсинга элементов. 

Общая структура объектов такова: 

[
{	
	"items":
		[{"key":"result","value":null,"title":null,"value2":"True"},
		{"key":"msg","value":null,"title":null,"value2":""},
		{"key":"url","value":null,"title":null,"value2":null}],
	"result":true,
	"msg":"",
	"additionalData":<здесь вложенный подобный объект с такой же структурой>,
},
...
]

Как вывести некое сообщение пользователю? 

as.sys.bootstrapAlert("Some text", {type: "info", delay: 1000000, icon: "fa fa-bars", hidePrev: true});

• type - задает вид окна (success, info, danger, warning, secondary и т.д.)
• delay - сколько милисекунд будет висеть окно
• icon - можно задать иконку font awesome
• hidePrev - если true, то скрывает предыдущие сообщения при наличии таковых на странице. 

Открыть/закрыть диалоговое окно

В большинстве случаев проще использовать модальную форму (разметку кнопки с fa-form-modal).

В случае необходимости кастомного диалогового окна используем следующий код: 

// title - заголовок окна, html - разметка внутри окна. buttonText - название кнопки (если пустая строка - то кнопка не выводится)
as.sys.showDialog(title, html, buttonText, function(){
   // коллбек по нажатию на кнопку buttonText
}, isBig, function(){
   // выполняется когда окно выведено на экран
}, function(){
   // выполняется когда окно закрывается
}); 
as.sys.closeDialog() - закрытие диалогового окна. 

Как отправлять запросы на сервер и обрабатывать ответ от сервера? 

Для этого используем механизм requestJS. Подробнее - /docs/js--realizaciya-kastomnykh-dorabotok-js-po-sisteme 

Дополнительные возможности в JS

// перейти на другую страницу 
location.href='/about'

// вывести что-то в консоль браузера 
console.log("x1", data)
// или цветное решение 
as.log(params, { info: true, title: 'Sortable Request' });  // большой зеленый текст
as.log(params, { error: true, title: 'Sortable Request' }); // большой красный текст

Как обновить некую область на странице

Вы можете переинициализировать компоненты на странице, обновить данные формы или таблицы.  Для этого необходимо поместить их в некий контейнер (например с классом s1): 

<div class="s1">
  <div class="as-form" data-code="x1" data-itemid="1"></div>
  <div class="as-table" data-code="x2" data-itemid="1"></div>
</div>

Чтобы обновить данные этих формы и таблицы, вызываем as.initControls():

as.initControls($('.s1'))

Если не передать параметр, то обновление будет в рамках всего body.