Extending the properties panel of normal tasks also extends that of User and Service Tasks

[Aws_rayyan]

When I extend the properties panel of the “Task” element, the newly added properties are also shown in other element types, such as “UserTask” and “ServiceTask”,

on the normal task

once changed it type using the wrench icon

I only want these properties to be shown in the normal task element.

Here is how i added the properties panel extension

Details.json

{
  "name": "Details",
  "prefix": "details",
  "uri": "http://details",
  "xml": {
    "tagAlias": "lowerCase"
  },
  "associations": [],
  "types": [
    {
      "name": "TaskDetails",
      "extends": [
        "bpmn:Task"
      ],
      "properties": [
        {
          "name": "duration",
          "isAttr": true,
          "type": "Number"
        },
        {
          "name": "remarks",
          "isAttr": true,
          "type": "String"
        }
      ]
    }
  ]
}

DetailsPropertiesProvider.js

import durationProps from './parts/DurationProps';
import remarksProps from './parts/RemarksProps';

import { is } from 'bpmn-js/lib/util/ModelUtil';

const LOW_PRIORITY = 500;



export default function DetailsPropertiesProvider(propertiesPanel, translate) {



  this.getGroups = function(element) {

    return function(groups) {

      if (is(element, 'bpmn:Task')) {
        groups.push(createDetailsGroup(element, translate));
      }

      return groups;
    };
  };

  propertiesPanel.registerProvider(LOW_PRIORITY, this);
}

DetailsPropertiesProvider.$inject = [ 'propertiesPanel', 'translate' ];

function createDetailsGroup(element, translate) {

  const detailsGroup = {
    id: 'details',
    label: translate('Details'),
    entries: [durationProps(element)[0],remarksProps(element)[0]],
    tooltip: translate('tool tip!')
  };

  return detailsGroup;
}

Thanks in advance

[Aws_rayyan]

I fixed this issue by modifying a condition in the DetailsPropertiesProvider.js,

so instead of this

this.getGroups = function(element) {

    return function(groups) {

      if (is(element, 'bpmn:Task')) {
        groups.push(createDetailsGroup(element, translate));
      }

      return groups;
    };
  };

I used this

this.getGroups = function(element) {

    return function(groups) {

      if (element.type =='bpmn:Task') {
        groups.push(createDetailsGroup(element, translate));
      }

      return groups;
    };
  };

[barmac]

The solution that you’ve found is similar to what we employ in the properties panel: bpmn-js-properties-panel/src/render/PanelHeaderProvider.js at main · bpmn-io/bpmn-js-properties-panel · GitHub

Note that the reason why your properties were shown was due to the inheritance chain. bpmn:UserTask is a specialization of bpmn:Task, so is(userTask, 'bpmn:Task') is always true.