How to clean up the right section in tasklist webapp

Hi,

Is there any way to clean up the right section of the tasklist webapp (where the user task form is displayed) automatically when the task is completed by someone else ?

To be more clear here is the scenario:

  • user1 selects a task and it’s form is displayed on the right section of the tasklist webapp but does not claim it; user1 has ‘Auto-refresh’ on for it’s filters
  • user2 claims and completes the same task
  • after a while, when the auto-refresh kicks in for user1, the completed task disappears from user1 middle section but it does not disappear from the right section and so when he tries to claim it, an error will be displayed (An error happend while claiming the task. : The task does not exist anymore ) and this is what I would like to avoid by cleaning up the right section when the task disappears from the middle section; is there any way to do this without changing the tasklist webapp itself ?

Thanks

Hi,

you could extend the Tasklist with a plugin that observes the state of the task. I think tasklist.task.action is a good plugin point for that. This plugin could periodically poll the state of the task (e.g. asking “Has the assignee changed?”).

I would not observe the state of the middle section, as the currently selected task might be on a different page in that section, for example if the user has a lot of tasks in the selected filter. You would then not be able to differentiate between “The task is not in the filter anymore” and “The task is still in the filter, but on another page”.

What do you think?

Cheers
Sebastian

Hi,

Thank you for your suggestion.
I managed to deploy for the beginning a simple plugin that displays a simple ‘Clear View’ link that when cliked should clear the form but I don’t know what actions should I take.

The plugin.js is the corresponding html is below.

plugin.js:

define(
    [ 'angular' ],
    function(angular) {

      var ngModule = angular.module('tasklist.plugin.bvb-arena', []);

      var TaskMonitorController = function($scope) {
        $scope.clearTask = function () {
            $scope.$parent.$parent.taskData = null;
            $scope.$parent.$parent.task = null;
        }
      };

      TaskMonitorController.$inject = [ "$scope" ];

      var Configuration = function Configuration(ViewsProvider) {

        ViewsProvider.registerDefaultView('tasklist.task.action', {
          id : 'bvb-arena',
          label : 'Arena',
          url : 'plugin://bvb-arena/static/app/empty.html',
          controller : TaskMonitorController,
          priority : 12
        });
      };

      Configuration.$inject = [ 'ViewsProvider' ];

      ngModule.config(Configuration);

      return ngModule;
    });

empty.html

Clear View

With this in place only the ‘Clear View’ and ‘Add Comment’ button disappears, the form is still displayed.

What objects should I set to null in order to clear the form ?

Thank you

P.S. Once I do this I will make rest calls once per minute to the engine to see what happened to my task and if it’s gone from the server I will clear the web page as well.

Hi,

the task that is currently selected is persisted in the URL. So if you remove the task parameter from the URL search query, you can deselect the task. To do that, you could inject the $location service in your angular controller and remove the task with some code like

// get the URL search query
var search = $location.search();

// remove the task
delete search.task;

// set the new query
$location.search(search);

Does this approach work for you?

Cheers
Sebastian

Like a charm.
Thank you.

Hi,
I am using camunda spring boot application version 7.16.0
I am trying to use plugin point tasklist.task.action to check if assignee has changed.
How can i achieve that using plugin.
Plugin points for task list are mentioned here: Plugins | docs.camunda.org
I am trying to implement this functionality in render function.
do we have any argument provided (like taskId in tasklist.card (plugin point) ) in render function ? if not, how can i check if assignee has changed for the task.

Example: plugin.js
export default {
id: taskListActionPlugin
pluginPoint: ‘tasklist.task.action’,
render: (node) => {
//code goes here
}
}
for tasklist.card plugin point, in render function we have taskId passed as an argument.
exa:

render: (node, {taskId}) => {

}

Already many thanks!!!