K2 Гуру: Использование Javascript-кода в K2 smartforms

(данная статья доступна в PDF-версии: загрузить)
K2 smartforms – отличный инструмент для быстрой разработки форм для веб и SharePoint. Использующий технологию K2 SmartObjects, с его помощью можно быстро создавать достаточно сложные рабочие пользовательские интерфейсы в несколько раз быстрее по сравнению с традиционным программированием. При этом делать это без какого-либо кодирования, в визуальном редакторе, загружаемом в Интернет-броузере.

Однако, иногда, разработчики хотят добавить некоторую особенность, модифицировать поведение элементов интерфейса, иметь возможность использовать собственные наработки из других систем и проектов, с К2 не связанных, и т.п. Одним из наиболее часто задаваемых вопросов является возможность использования Javascript в смартформах.

Сейчас мы увидим, как это возможно сделать. Я не буду выдумывать что-то сложное, покажу эту функциональность на примере простейшей функции alert, но очевидно, что доказав возможность использования javascript в коде мы даем еще один дополнительный инструмент разработчику, расширяя и без того значительную функциональность K2 smartforms.

Итак:

1. Загружаем K2 Designer (smartforms), создаем новую папку или используем уже имеющуюся и добавляем новое представление (View). В данном примере я задал наименование представления как “Тестирование Javascript”

После чего нажимаем кнопку «Next» для перехода к следующему шагу визарда-конфигуратора представления.

2. Задаем желаемую разметку представления, я выберу для примера таблицу из 2-х строк и колонок. Нажимаем Next.

3. Добавляем в первую ячейку компонент Label и TextBox из панели инструментов, а в правую верхнюю ячейку – Hyperlink контрол. При желании можно поменять их ID.

4. В свойствах гиперлинка находим блок Expression и нажимаем кнопку, расположенную рядом с этим блоком для формирования нового выражения. Откроется визард конфигурирования выражения. Нажмем на экране визарда кнопку “Add” для добавления нового выражения.

5. Переключимся во вкладку “Operators”, раскроем список текстовых функций и выберем оттуда функцию Hyperlink, которая формирует гиперлинк на основании параметров.

6. Сконфигурируем параметры этой функции. У нее два параметра. Первый параметр – отображаемое имя/текст гиперлинка, я задал его константой, указав слово «Сообщение». В качестве второго параметра я должен сформировать и указать команду javascript, которая будет отображать мой алерт. Так как в качестве текста алерта я хочу использовать введенный пользователем на форме текст, я сначала добавляю к выражению во второй параметр функцию Concatenate (объединяет строки, указанные в ней как параметр), а затем в ней уже и формирую выражение javascript:alert(‘Текст сообщения’). В качестве текста сообщения я использую значение контрола TextBox, который присутствует в списке контролов на вкладке Context.

7. В законченном виде мое выражение будет выглядеть так:

8. Нажимаю ОК и вижу сформированное выражение. Нажимаю ОК еще раз, чтобы данное выражение было присвоено моему контролу Hyperlink на форме.

9. Осталось поменять свойство Target у моего гиперлинка, ставим Current Frame.

10. И теперь можно тестировать. Результат на следующем скриншоте.

Однако, это не все. Более сложные Javaскрипты можно вызывать и по-другому. Но здесь нам понадобится компонент HTML Literal, который можно загрузить здесь - http://www.k2underground.com/groups/html_literal_control и установить за считанные секунды.

1. Отредактируем созданное представление.

2. Воспользуемся компонентом HTML Literal и опустим его на наше представление:

3. Открыв свойство HTML у контрола HTML Literal, мы можем добавить любой Javasript-код

4. Далее опускаем на форму еще один контрол Hyperlink и аналогично предыдущему примеру конфигурируем для него вызов Javascript-функции. Теперь подставляем имя функции, которую мы интегрировали в форму с помощью HTML Literal.