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:
- Move header and footer out of the tabs section.
- Change the background of the form
- Expand or collapse the views, by clicking anywhere on the View Header.
- Add ‘Scroll To Top’ button.
1. Create a dedicated view
In my applications I usually create a dedicated view for JS and CSS: [Application_Namespace].JS_CSS
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.
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.
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.
5. Create a rule to rule them all
Add the view initialization rule and add the following conditions and actions:
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.
And here is the 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.
