How to add drag and drop between my teams and work queues in Theme-Cosmos

In UI-Kit, the OOB dashboard functionality allowed to view the list of cases for all your team members and for all your workqueues - It also allowed to drag and drop cases from one user worklist to a work queue or someone else. This functionality relied on a custom control called ‘pyCMDashboardDrag’

Here is a demo of this functionality in ui-kit

In Theme-Cosmos - this functionality is not included by default for several reasons:

  • a Drag and drop pattern to move items to different work queues or worklist is not accessible - a better approach would be to offer a ‘move’ action on the case type to move and ask where to move the item in a modal dialog

  • the custom control was not really optimal and adding some inline JS that we did not want to carry in Theme-Cosmos

  • there were also some performance issues when having a lot of users and work queues and the data pages were reloaded on each interaction causing performance issues

If you want to reuse this functionality, you can import the RAP attached to this post and add the ruleset DraggableDashboard:01-01 to your application rule - the ruleset will bring some of the sections from ui-kit into your application layer and will not fallback to the rules defined in Theme-Cosmos

On the dashboard page provided OOB, make sure to add the following 3 widgets: worklist, Team members and Work queues

Once you have published this dashboard, the old drag and drop functionality from UI-Kit should be available in Theme-Cosmos - you can watch a demo in the video below

Note: These changes were tested on a Pega Platform 8.8 system but should be working on older version of the Pega Platform.

DraggableDashboard_0.zip (304 KB)

@RichardMarsot Thank you very much for the post. Could you please help on how to configure the ‘move’ action you have described as the better approach? Are you referring to a local flow action within a case for re-assign? I am not sure if that will be convenient for a team lead or manager role to open-up each case to perform this.

On the draggable control, I came to know its not good for accessibility. So would like to opt for a better approach.

@RichardMarsot Nice discussion post! I could not locate the RAP attachment. Could you please help?

Thanks

Ganesh

@GaneshKumarC3200 sorry forgot to attach the RAP - this is fixed now

@MOHANRAJS7274 on the table with the worklist - you need to add a button with a show menu action that will perform different actions - one of this action could be ‘move’ - on click on the navigation item, open a modal dialog that let you select a user or a workbasket. From there, you just need to call the activity that is used to transfer assignment.

@RichardMarsot Thanks Richard. I have tried it in the dashboard and it works fine. But not all users have access to dashboard page. Can I use these in Home tab?

Small find below. Icon and the title needs to be changed. It should be for work queue and not team member

@GaneshKumarC3200 and @RichardMarsot I don’t see the RAP file attached either. How could I find it?

@RichardMarsot could you please tell us where is it attached?, I don’t see any link or something like that.

@antonio.gonzales you need to make sure that you are logged into your Pega community account to see attachments to posts.

You should see it at the end of Richard’s article.

@GaneshKumarC3200 thanks for the feedback - I have updated the RAP to fix the issue - I also included a HomeMain section that uses these 3 widgets - it works the same way as in a Dashboard - hope it helps!

@RichardMarsot Thanks a lot Richard. I have learnt many things from your previous posts. Hoping to learn more. Thank you.

@RichardMarsot Does this drag and drop works with using optimized layout (personalized option)?