Press "Enter" to skip to content

K2 Slide In Worklist


Recently at the customer I have been challenged with an interesting requirement, i.e. to have a slide in worklist in K2 Cloud. The idea is to have it available on any form and somehow to indicate, that a user has some new tasks. I decided to create a reusable view, which you can add to any form you want and which will do the trick. For this you will need CSS and JavaScript. Therefore, please, refer to the article How to add JavaScript on Smartforms, if you do not know, how to do that.

And before we start,I want you to see my final result. If you like it, then go ahead and I will explain, how you can achieve that.

K2 SLide In demo

These are the main features of the so-called widget, which you will get in the end:

  • It is completely self-contained – after you create it, the only thing you need is to add the view on the form, where you would like to have that widget.
  • It notifies the user about new tasks – by default, the color of the appearing panel is the same as the view header, i.e. it depends on the theme. And it turns red when the worklist is refreshed and some new tasks appear there.

So let’s move to implementation.

1. Add a worklist on the view.

First of all, you need to create a view and add a worklist there. I would also recommend to show only 1 column on that worklist. Otherwise, your users will have to scroll to see all other columns. In my case I added a worklist with 1 column Folio. Also, you need to configure a Refresh Interval, if you want the slider to turn red, when you have tasks.

Worklist Demo

2. Add JS and CSS onto the view.

You can add 2 DataLabel, which will contain JavaScript and CSS. In order to be able to find this view in JavaScript, I am using a unique name of the Data Label, where I put JavaScript. The name of the control should be unique across the whole form, where you will add this view. I added 2 controls with the following names:

  • JS – Move Worklist – here I will add JavaScript and this name I will use in my JS code;
  • CSS – Apply Styles – here I will add my CSS styles;

This is the code, which i used for the demo:

3. Simply add the view to some form and test.

As I have already mentioned, the only thing you need is to add the view on the form, where you would like to have a k2 slide in worklist. The view contains all the logic and will load everything automatically.

I have not tested a K2 slide in worklist with all possible screen resolutions, therefore, feel free to use it, change it and, if needed, ask questions about anything.

I have create a separate repo on GitHub, where I will try to collect all such nice K2 features. you can find it under K2Devs.

  1. Andrew Andrew

    How can I use this in a manner where the
    – sliding panel is a column on the left
    – pushes form contents to the right when expanded (using lithium theme)
    – minimized panels show a few icons
    – has the expand click function at the top of the minimized panel

    • Konstantin Fukszon Konstantin Fukszon

      Hi Andrew,
      I am not sure I got the question right. What I created is just a bit of hiding and showing the view on the form.
      If you need some more sophisticated approach, where e.g. you can see a list of controls and when collapsing the panel becomes smaller and you see only some icons etc. – you will have to create this in a custom way. So you will need to adjust your layout with JS. There is no simple way of doing you need.
      Best regards,

Leave a Reply

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

twelve − 2 =