Press "Enter" to skip to content

Maintain JS and CSS in K2 Application

0

In the current post I would like to share my best practices, how you can maintain JS and CSS in a K2 application, so that it is reusable and can be easily found and maintained by you or your colleagues. Please, read the post How to add JavaScript on Smartforms, where I explain how JS and CSS are injected onto the form.

The problem, that you face with injecting JavaScript onto the forms, is that it might be difficult for you or your colleagues to spot its usage and understand from which Data label it is executed and under which conditions. Therefore, it makes sense to put all your JavaScript on the view and reuse it across multiple forms. But what if you do not need to run certain JS or CSS on certain forms? You can use the approach, described below. Let us imagine I need to implement the following functionality on forms in my application:

1. Create a dedicated view

In my applications I usually create a dedicated view for JS and CSS: [Application_Namespace].JS_CSS

K2 JS CSS View

2. Create literal data labels for every function.

I usually give descriptive name to data labels, so that it is clear what they are used for. Also I set their width to 100% and they appear one under another in a nice and clear way.

K2 View with Data Labels.

3. Create expressions for every data label.

The expressions, which you create, should not be mapped to your data labels straight away. Ideally, the expressions should have same names as the data labels, thus it makes it easy to associate them in the rules.

K2 Expressions JS CSS

4. Create view parameters for every function

If there are certain functions, which you need to run on every form, then you can simply map the expression to the corresponding data label. However, if you want to control, which JS/CSS is used on the form, you need specific parameters and a couple of rules. All parameters should be Boolean and have false as default value.

K2 Parameters View

5. Create a rule to rule them all

Add the view initialization rule and add the following conditions and actions:

K2 View rules

6. Add the view to the form and manage JS/CSS upon the view initialization

Now you can add the view to any form, make it hidden and control, which JS/CSS will run, depending on the values of the parameters, with which you initialize the view.

K2 Rules Form added view

And here is the result.

K2 JS CSS Result

With this approach you can maintain JS/CSS in a K2 application, especially if you extensively use some injections. It is easy to find the corresponding JS/CSS, responsible for some functionality. If any questions, please, let me know.

Leave a Reply

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

two × 4 =