Добрый день! Хочу поделиться опытом работы с JS в проектах на bpm’online 5. Статья будет полезна тем, кто не знает с какой стороны подойти к этому вопросу и с чего начать. Умение работать с JS применительно к bpm’online открывает богатые возможности настройки функциональности. В статье будет рассмотрено:
- как добавлять js-скрипты на страницы bpm’online
- как подписываться на события "onclick", "onkeydown" и пр.
- как генерировать сигналы для страницы
- показан пример использования jQuery
- использование js-библиотек
Основы
Добавление JS скрипта на страницу выполняется с помощью метода:
Добавим на «страницу карточки задачи» кнопку и напишем код обработки:
В результате нажатия на кнопку произойдёт следующее:
Чтобы упростить себе жизнь и не мучиться с экранированием символов, текст JS-скрипта в исходном виде можно записать в параметр бизнес-процесса.
А затем добавить скрипт, передавая в качестве текста скрипта параметр JS_FirstScript:
Немного модифицируем этот способ: в параметр JS_FirstScript запишем:
Добавим в Usings пространство имен System.Text.RegularExpressions
В коде пишем:
script = Regex.Replace(JS_FirstScript, "%message%", "Привет");
Page.AddScript(script);
script = Regex.Replace(JS_FirstScript, "%message%", "Пока");
Page.AddScript(script);
Подписка на события
Пример №1
Добавим возможность ловить нажатие клавиш и выполнять определённые действия:
string scriptRight = Regex.Replace(JS_FirstScript, "%message%", "Right");
string KeyboardScript = "document.onkeydown = function(event) {var key_code = event.keyCode; if(key_code == 37){" + scriptLeft + "}if(key_code == 39){" + scriptRight + "}}";
Page.AddScript(KeyboardScript);
После нажатия на нашу красную кнопку, на страницу добавятся обработчики нажатия кнопок «Стрелка влево» и «Стрелка вправо». Нажимая на стрелки, получаем:
Само собой, если добавить этот скрипт в "Init", то обработчики появятся уже после открытия страницы.
Пример №2
Добавим обработку клика по изображению. Дизайнер bpm'online не позволяет добавить обработчик события «click» на элемент «Область изображения», но мы можем сделать это с помощью JS. Добавим картинку на страницу:
Мы будем искать html-элемент этой картинки по id, поэтому посмотрим на него:
id = PageContainer_MyGreatImageBox
Добавим обработку клика на картинку:
string imageBoxScript = "document.getElementById('PageContainer_MyGreatImageBox').onclick = function() {" + script + "}";
Page.AddScript(imageBoxScript);
Генерирование сигнала
Добавим ещё один событийный подпроцесс:
с сигналом «JSMessage»:
В скрипте «JMessage» напишем:
Чтобы сгенерировать сигнал с помощью JS, можно использовать следующую конструкцию:
string signalMessage = string.Format("Terrasoft.AjaxMethods.ThrowClientEvent(\'{0}\', '{1}');", InstanceUId, message);
Page.AddScript(signalMessage);
Теперь, по нажатию на нашу красную кнопку:
JQuery
Для того, чтобы не изобретать велосипеды, у нас есть возможность использовать JQuery в своем коде. Причём, JQuery уже добавлен в ресурсы страницы. На момент написания статьи, обычно это jQuery v1.7.1
Приведу пример анимации с помощью jQuery.
Добавим в процесс параметр «scriptAnimation». Пишем его значение:
opacity: 0,
marginLeft: "-50"
}, 300 );
$("#PageContainer_MyGreatImageBox").animate({
opacity: 1,
marginLeft: "50"
}, 300 );
Добавим скрипт на страницу:
Page.AddScript(imageBoxScript);
В результате, при нажатии на изображение, оно будет сдвигаться влево на 100 пикселей и постепенно исчезать. После чего начнётся обратная анимация.
Изменив id элемента в параметре «scriptAnimation», можно подвигать, например, поле ввода автора активности:
Добавление библиотек JS на страницу
Что делать, если нам нужно подключить какой-то js-код, который просто неприлично в нормальном обществе засовывать в параметр процесса? Рассмотрим на примере добавления маски ввода к текстовому полю.
Добавим на страницу текстовое поле, назовём его MaskedTextEdit
В \inetpub\wwwroot\sitename\Terrasoft.WebApp\Resources положим файл jquery.maskedinput-1.3.js
в PageLoadComplete (иначе не сработает) пишем:
string.Empty :
Page.Request.ApplicationPath;
var csnameJQm = "JQMask";
var csurlJQm = "/Resources/jquery.maskedinput-1.3.js";
var scriptManager = ScriptManager.GetCurrent(Page.AspPage);
scriptManager.RegisterClientScriptIncludeInternal(csnameJQm, appPath + csurlJQm);
string CommunicationMask = "+7(999)999-99-99";
Page.AddScript("$('#" + Page.MaskedTextEdit.ClientID + "').mask('" + CommunicationMask + "');");
В результате получим текстовое поле с маской ввода:
Спасибо за внимание! Надеюсь, что эта статья поможет вам в решении ваших задач!
...ушел делать убегающую кнопку для клиента к 1 апреля :smile:
Все круто, только не понял, почему для обращения к TextEdit'у с клиента Вы используете свойтсво "ClientID", а для картинки смотрите ее Id в HTML-коде.
Думаю, что оптимальнее везде использовать ClientID.
Добрый день, Андрей!
На то это и примеры, чтобы показать все способы получения идентификатора. Например, понадобилось вдруг нам подвигать какое-нибудь поле, то тут ClientID нам не поможет:
Получив ClientID = PageContainer_HouseCategoryEdit мы будем двигать только текст контрола, в то время как "прямоугольник" контрола будет стоять на месте. Чтобы двигать прямоугольник, нам нужно посмотреть его Id в html:
т.е. нам нужен id div'а, а именно "ext-gen1052", или вообще "ext-gen1070", чтобы подвигать поле вместе с меткой.
Евгений, в таком случае это будет довольно небезопасно, так как после внесения изменений в дизайн страницы автогенерируемый Id уже может быть не тот_) Думаю, если нужно двигать весь контрол, то его можно поместить в контейнер и двигать контейнер. Хотя, я не пробовал, могу ошибаться.
Да, это запросто. Честно говоря, этот момент я не проверял :)