Add script to Expression
Add JavaScript and CSS to K2 smartforms

Add JavaScript and CSS to K2 smartforms

Comments 6 comments

This article shows how you can add JavaScript and CSS to K2 smartforms without developing custom controls.

Why do I need to add scripts to the Form?

Some of the reasons will be:

  • To change the style of a specific View(s) or control(s) on the Form without amendment the Theme css.
  • To execute a custom JavaScript without developing a custom K2 smartforms control.

How can I add scripts to K2 smartforms?

If you notice, the Data Label control has a Literal option. This option determines whether the Value provided will be printed on screen or will be evaluated like normal Html. So let’s test this out.

  1. Start your K2 Designer website.
  2. Create a new Form, give it a name and add a Data Label to the design canvas.

    Add Data Label
    Add Data Label
  3. Now, set the Data Label control on focus and review the Properties panel.
  4. In the Properties panel, add the following script to the Text value. 
    <script>alert('hi, this is a JS test!');</script>

    Add Script to Text
    Add Script to Text
  5. Scroll down further to find the Literal option. Make sure it is unchecked for now and click Finish.

    Turn off Literal option
    Turn off Literal option
  6. Browse the Form and you will see the scripted added earlier printed on the Form. It is not evaluated as JavaScript.

    Script printed on display
    Script printed on display
  7. Go back and edit the Form. This time, check the Literal option on the Data Label and click on Finish.

    Turn on Literal option
    Turn on Literal option
  8. Refresh the display Form again and you should be greeted with your JavaScript alert! Do note that setting CSS style in the Data Label Value will work too!

    JavaScript alert using Data Label
    JavaScript alert using Data Label

Wait! It’s not a good idea to have script in your Data Label. Huh??

Yes, you heard it right. I just showed you how to execute scripts using Data Label, but it is not a good idea to do so. Why?

In K2 smartforms before 4.6.11,

  • You may find that the Data Label will be missing when you return to edit the Form. This is because the Data Label value will be evaluated during design time and it ends up un-selectable on the design canvas.
  • If you added a bad JavaScript, you may end up unable to design the Form as the bad script will be evaluated during design time and cause undesirable issues.

So, how to add JavaScript and CSS to K2 smartforms, the correct way?

The correct way will be to use an Expression. The reason being, Expression will be evaluated during runtime, but not in design time mode. So any bad scripting will not affect your design canvas and you won’t end up with a un-repairable Form. So let’s see how to use an Expression to print our scripts.

  1. Create a new Form and add a Data Label to the design canvas.
  2. Check the Literal option.
  3. Click on the Expression button.

    Click Expression button
    Click Expression button
  4. Click on Add.

    Click Add
    Click Add
  5. Give the Expression a Name and set the value with the following text and click OK. 
    <script>alert('hi, this is a JS test!');</script>

    Add JavaScript and CSS to K2 smartforms
    Add JavaScript and CSS to K2 smartforms
  6. Ensure that the new Expression is selected and click OK again.

    Select Expression
    Select Expression
  7. Click Finish and test your Form now. You should be greeted with the JavaScript alert.

 

Have Fun!

 

 

Ji Kai
Latest posts by Ji Kai (see all)

6 thoughts on “Add JavaScript and CSS to K2 smartforms”

  1. Hi J.K

    Thanks for the article, just a quick question. Can I have a separate JavaScript file saved in the same folder as the K2 SmartForm that I am using, then on the expression just call the the file instead of writing the whole JavaScript code.

    like: http://myscripts.js

    I have done this way on my application, but there’s an “Uncaught SyntaxError: Unexpected token <" error when I run the form and press F12

    Reply

    1. Hi Thando,

      I’ve not tried importing a js file via the Data Label or the Expression before. Personally, I only use this method for simple functions like inserting CSS to create special layout effects without editing the original style sheet or do page refreshes in older version of K2 where the Timer control is not available.

      In cases where I need to import js into the form, I’ll built it into a custom smartforms control. This will ensure max compatibility with smartforms without the issues like your token error and it’s pretty simple to create. If you try out the steps in my article, Create Custom K2 smartforms Control Part 1, have a look at the “_control.cs” file. Add your js to the project, update the sample WebResource and ClientScript attributes and deploy. When you run your form with the custom control, you will be able to see your javascript under “Runtime > Content > Js > (projectname).js” in the browser’s developer tool.

      JK.

      Reply

  2. Hi JK.

    Article is really helpful but I want to know. How to apply specific css file’s class for a specific control. For example I have five buttons on my smart form. Default theme is already applied on all the buttons but I want to apply my class of a specific css file on one of the buttons. So how to do it?

    Regards

    Reply

    1. Hi Asad,

      You can do this using the Data Labels with Literal option.

      1. Create a folder in the smartforms directory and place your CSS file there. e.g. C:\Program Files (x86)\K2 blackpearl\K2 smartforms Runtime\Styles\CustomCss\MyStyle.css
      2. Add a Data Label, named “CSS File” and tick the “Literal” option.
      3. In the initialise method, add a “Transfer Data” event and pass “< link rel="stylesheet" type="text/css" href="/Runtime/Styles/CustomCss/MyStyle.css" />” into the “CSS File” data label.
      4. Take note of the “Name” field of your button. This value will be revealed as the “name” attribute of the html element. In my example, my button’s name is “ButtonB”.
      5. Add a Data Label, named “JS Script” and tick the “Literal” option.
      6. In the initialise method, add a “Transfer Data” event and pass “$('a[name="ButtonB"]').addClass('Test1');” into the “JS Script” data label.
      7. Test it.

      When the form/view load, the CSS file will be loaded into the “CSS File” data label and the jQuery to add the CSS class will be executed in the “JS Script” data label.

      JK

      Reply

Leave a Reply