Press "Enter" to skip to content

Changing view background in K2 Smartforms

1

Changing a view background in K2 Smartforms is not available out of the box. Moreover, if you need to create a reusable component with the new background, which you can then reuse across one or multiple applications. Here I will quickly explain, how you can change view background in K2 Smartforms with the help of JavaScript. Please, refer to the post How to add JavaScript on Smartforms, if certain steps are not clear.

1. Add a hidden Data Label with unique name

This step is needed, so that your view instance can be easily found on a form. Finding a view by name is also ok, but then you must take care, that all your view instances have the same name on different forms.

As you can see, I added a Data Label with the name ‘dlblViewIdentifier’, which I will also use to run my JavaScript.

2. Add a hidden picture control and select the image

When you add an image into the picture control, it is stored in a System SmartBox. This SmartBox is used by a handler to load the image from the Database on the form. Since all the images might have their own IDs on different environments, we need this step to make sure the image remains the same after the deployment.

If you know the ID of your image or you created a UI, where you select such images on the Admin form and initialize the view with the ImageID parameter or…, you can skip this step.

3. Build the JavaScript expression

You have to build the following JavaScript expression, changing certain values with your own ones. Here is the code, which needs to be wrapped in <script>…</script> tag.

And here is an expression, which gets the Image ID from the hidden Picture control:

You can run the form and see the result of changing view background on K2 Smartforms:

  1. Armelle.V Armelle.V

    That’s a really useful tip!

    And if you want to control the size of an empty background, you can leave the ‘auto’ CSS property but insert a blank transparent pixel image in the size of your choice in your layout. There is one per default in the picture source picker in 16×16 px

Leave a Reply

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

2 × one =