Press "Enter" to skip to content

How to place a view above tabs in Smartforms

5

With a right approach to your application design, you try to reuse as many components as possible. In this case Header Views are one of them. It would be great to know, how to place a view above tabs in Smartforms. Because when you have a form with several tabs and you want each panel to look the same. Therefore, you need to place the header View on each tab panel and moreover, fill it with some data, which leads to more html to download, more rules etc. Or you can use a bit of JavaScript.

If you are not sure, how to call JavaScript from the Smartforms, please, refer to the article How to add JavaScript on Smartforms.

In order to achieve this, you need to do the following:

  1. Add descriptive names to the view, which you would like to move above tabs
  2. Add a literal Data Label on your form with the script below
  3. Enjoy the result.

If you need to move several views, give the names to your views and add more jQuery lines for every view. 

The final result looks like this:

Views above tabs
  1. Hi, thanks for this very helpful code. I'd like to suggest a slight alteration in case people have need for multiple headers to be moved. Below is code that targets the view with the specific name in the code and moves it to the top. The order of the multiple headers moved is dependent on the order the views execute the Initialize method. I am by no means a jquery expert so any feedback is appreciated! Hope this helps other K2 developers!

    $('span[name=Name_of_View]').closest('div[class=view]').insertBefore('.tabs-top')

  2. Sorry mate, can't figure how to use this.

    Where should I place that script, on the form, or on the actual view?
    What is the 'Name_of_View' the name you given to the view itself, or the name the view has on the form?

  3. PS: referring to the comment from the 'Unkown' user.

  4. It does not matter where you want to place the script. The main point is that it should be the literal datalabel. As for the Name of the View – this is the exact name you give to a view when you place it on the form. And the script in this case should look like this: $('[name="Name_of_View"]').closest('div.view').insertBefore('.tabs-top')

Leave a Reply

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

two × four =