Press "Enter" to skip to content

How to add JavaScript on Smartforms

1

When you need to extend K2 Smartforms with some non-standard functionality, you have a number of options. In this article I already described the pros and cons of the Custom Control vs JavaScript Injection.  In this post I will give you a number of options how to add JavaScript on Smartforms.

As I already mentioned, the JavaScript injection is difficult to maintain. Nevertheless, below you can find a number of best practices, how to implement it on the form.

1. How to add JavaScript?

For this you have to add a Data Label to your View and/or Form and do the following:

  • Add JavaScript in the  tags into the Text property.
E.g. <script>alert('This is javascript, injected into the form.')</script>
  • Make the Data Label Literal
  • Uncheck Prevent XSS option (appeared in K2 Five 5.2)

The script will run as soon as the form loads.

2. How to add and run a long JavaScript snippet?

As you might know, by the Text property of the Data Label control has a limit of 255 characters. Therefore, if your JavaScript code contains more characters, you will need a View or a Form expression. An expression can contain more text.  Moreover, with the help of the expression you can dynamically change the script with the values of other controls or parameters, before you run it. Afterwards, you have to bound the expression to the literal Data Label on your View or Form.

3. How to run JavaScript, when the document is loaded?

Please, pay attention, that there is a difference between loading of the HTML document (DOM) and loading of the form (e.g. after When the form is Initialized rule). Therefore, if you want to run the script only after the HTML document has loaded, you can use a standard jQuery method for that $().ready();. The method offers a way to run JavaScript code as soon as the page’s Document Object Model (DOM) becomes safe to manipulate.

<script>
$().ready(function(){
alert('This is javascript, injected into the form.');
});
</script>

4. How to run JavaScript after a certain control rule?

As I wrote in p.2, you will still need to create an expression with the content of the JavaScript. However, you should not map that expression to the Data Label straight away. Just transfer the script into the Data Label with the help of your Transfer Data action in one of the Smartform rules. The script will be executed as soon as the expression is sent into the Data Label. Below you can see an example of running JavaScript upon a button click.

5. How to run the same JavaScript multiple times?

The browser runs the injected script as soon as it identifies, that the DOM was changed. That is why in order to be able to run the script again, you need to clear the Data Label after the script was executed. Thus, sending the same script into the same Data Label again will be a DOM change for the browser, which will execute the same script again.

6. How can I find a Smartforms control in JavaScript?

Different controls in K2 are rendered in different ways. For example, Data Label contains a name property in HTML, by which you can find it, but the Dropdown control does not have it in HTML. Moreover, if you have a Data Label with the same name on another view, searching by name will give you more than 1 control. Below I provide you with an example, how you can get and set the value of a Data Label, which has a unique name on the whole form. (I will try to create a new article and will definitely insert the link here, which will give you more options on how different controls can be found on Smartforms).

<script>
//getting the value
vardlblValue = $('[name="Name of Your Label"]').SFCLabel('option','text');

// setting the value
$('[name="Nameof Data Label"]').SFCLabel('option', 'text', 'new value');
</script>

7. How to run a Smartform rule, after the script was executed?

As I mentioned in another article Custom Control vs Javascript Injection, it is very difficult to use the JavaScript Injection with the standard K2 Rules. However, you can implement some tricks. For example, you can set the value of a hidden Data Label. It will trigger the When control is changed rule. Please, refer to p. 6. 

8. How to add CSS?

I know, that CSS and JavaScript are different things. But the way you can add custom CSS on the Smartform is pretty much the same as for JavaScript. You only need to use different tags and add the snippet into the same literal Data Label:

<style>
.theme-entry .panel > .panel-body {
background-color: #3cb0df;
}
</style>

However, you might still have issues applying custom styles, because the theme or the control itself contains certain ones. But for most of the cases this approach works perfect. This is how the styles above are displayed:

These are some basic tricks, which you may find helpful, when you need to add JavaScript on Smartforms.

  1. Dean Draper Dean Draper

    Best write up on this topic I have seen.

Leave a Reply

Your email address will not be published. Required fields are marked *

twelve + 6 =