Все о bpm'online 5.X & JavaScript

Добрый день! Хочу поделиться опытом работы с JS в проектах на bpm’online 5. Статья будет полезна тем, кто не знает с какой стороны подойти к этому вопросу и с чего начать. Умение работать с JS применительно к bpm’online открывает богатые возможности настройки функциональности. В статье будет рассмотрено:

  • как добавлять js-скрипты на страницы bpm’online
  • как подписываться на события "onclick", "onkeydown" и пр.
  • как генерировать сигналы для страницы
  • показан пример использования jQuery
  • использование js-библиотек

Основы

Добавление JS скрипта на страницу выполняется с помощью метода:

Page.AddScript(string script)

Добавим на «страницу карточки задачи» кнопку и напишем код обработки:


Page.AddScript("alert('Hello!')");

В результате нажатия на кнопку произойдёт следующее:

Чтобы упростить себе жизнь и не мучиться с экранированием символов, текст JS-скрипта в исходном виде можно записать в параметр бизнес-процесса.

А затем добавить скрипт, передавая в качестве текста скрипта параметр JS_FirstScript:

Page.AddScript(JS_FirstScript);

Немного модифицируем этот способ: в параметр JS_FirstScript запишем:

alert('%message%');

Добавим в Usings пространство имен System.Text.RegularExpressions
В коде пишем:

string script;

script = Regex.Replace(JS_FirstScript, "%message%", "Привет");
Page.AddScript(script);

script = Regex.Replace(JS_FirstScript, "%message%", "Пока");
Page.AddScript(script);


Подписка на события

Пример №1
Добавим возможность ловить нажатие клавиш и выполнять определённые действия:

string scriptLeft = Regex.Replace(JS_FirstScript, "%message%", "Left");
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 script = Regex.Replace(JS_FirstScript, "%message%", "Image Click!");
string imageBoxScript = "document.getElementById('PageContainer_MyGreatImageBox').onclick = function() {" + script + "}";
Page.AddScript(imageBoxScript);

Генерирование сигнала

Добавим ещё один событийный подпроцесс:

с сигналом «JSMessage»:

В скрипте «JMessage» напишем:

Page.AddScript("alert('Привет')");

Чтобы сгенерировать сигнал с помощью JS, можно использовать следующую конструкцию:

string message = "JSMessage";
string signalMessage = string.Format("Terrasoft.AjaxMethods.ThrowClientEvent(\'{0}\', '{1}');", InstanceUId, message);
Page.AddScript(signalMessage);

Теперь, по нажатию на нашу красную кнопку:

JQuery

Для того, чтобы не изобретать велосипеды, у нас есть возможность использовать JQuery в своем коде. Причём, JQuery уже добавлен в ресурсы страницы. На момент написания статьи, обычно это jQuery v1.7.1

Приведу пример анимации с помощью jQuery.
Добавим в процесс параметр «scriptAnimation». Пишем его значение:

$("#PageContainer_MyGreatImageBox").animate({
        opacity: 0,
        marginLeft: "-50"
        }, 300 );
$("#PageContainer_MyGreatImageBox").animate({
        opacity: 1,
        marginLeft: "50"
        }, 300 );

Добавим скрипт на страницу:

string imageBoxScript = "document.getElementById('PageContainer_MyGreatImageBox').onclick = function() {" + scriptAnimation + "}";
Page.AddScript(imageBoxScript);

В результате, при нажатии на изображение, оно будет сдвигаться влево на 100 пикселей и постепенно исчезать. После чего начнётся обратная анимация.

Изменив id элемента в параметре «scriptAnimation», можно подвигать, например, поле ввода автора активности:

Добавление библиотек JS на страницу

Что делать, если нам нужно подключить какой-то js-код, который просто неприлично в нормальном обществе засовывать в параметр процесса? Рассмотрим на примере добавления маски ввода к текстовому полю.
Добавим на страницу текстовое поле, назовём его MaskedTextEdit

В \inetpub\wwwroot\sitename\Terrasoft.WebApp\Resources положим файл jquery.maskedinput-1.3.js

в PageLoadComplete (иначе не сработает) пишем:

var appPath = (Page.Request.ApplicationPath == "/") ?
        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 + "');");

В результате получим текстовое поле с маской ввода:

Спасибо за внимание! Надеюсь, что эта статья поможет вам в решении ваших задач!

Нравится

Поделиться

6 комментариев

...ушел делать убегающую кнопку для клиента к 1 апреля :smile:

Добро :smile:

Все круто, только не понял, почему для обращения к TextEdit'у с клиента Вы используете свойтсво "ClientID", а для картинки смотрите ее Id в HTML-коде.
Думаю, что оптимальнее везде использовать ClientID.

Добрый день, Андрей!
На то это и примеры, чтобы показать все способы получения идентификатора. Например, понадобилось вдруг нам подвигать какое-нибудь поле, то тут ClientID нам не поможет:

Получив ClientID = PageContainer_HouseCategoryEdit мы будем двигать только текст контрола, в то время как "прямоугольник" контрола будет стоять на месте. Чтобы двигать прямоугольник, нам нужно посмотреть его Id в html:
т.е. нам нужен id div'а, а именно "ext-gen1052", или вообще "ext-gen1070", чтобы подвигать поле вместе с меткой.

Евгений, в таком случае это будет довольно небезопасно, так как после внесения изменений в дизайн страницы автогенерируемый Id уже может быть не тот_) Думаю, если нужно двигать весь контрол, то его можно поместить в контейнер и двигать контейнер. Хотя, я не пробовал, могу ошибаться.

Да, это запросто. Честно говоря, этот момент я не проверял :)

Показать все комментарии