On click of element setting, can we have the control on list of options such as User task, Send Task

[Ayush_Rastogi]

On click of element settings, can we have the control on list of options such as User task, Send Task .
If we can control, i just want to show User Task on click of element settings.

import 'bpmn-js/dist/assets/diagram-js.css';
import 'bpmn-js/dist/assets/bpmn-js.css';

import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css';
import '@bpmn-io/properties-panel/assets/properties-panel.css';

import './style.less';

import $ from 'jquery';
import BpmnModeler from 'bpmn-js/lib/Modeler';

import { debounce } from 'min-dash';

import { BpmnPropertiesPanelModule, BpmnPropertiesProviderModule, ZeebePropertiesProviderModule,
  CamundaPlatformPropertiesProviderModule} 
from 'bpmn-js-properties-panel';

import diagramXML from '../resources/newDiagram.bpmn';
import CamundaBpmnModdle from 'camunda-bpmn-moddle/resources/camunda.json'
import ZeebeBpmnModdle from 'zeebe-bpmn-moddle/resources/zeebe.json'


var container = $('#js-drop-zone');

var canvas = $('#js-canvas');

var bpmnModeler = new BpmnModeler({
  container: canvas,
  propertiesPanel: {
    parent: '#js-properties-panel'
  },
  additionalModules: [
    BpmnPropertiesPanelModule,
    BpmnPropertiesProviderModule,
    // ZeebePropertiesProviderModule,
    CamundaPlatformPropertiesProviderModule
  ],
  moddleExtensions: {
    // magic: magicModdleDescriptor,
    // zeebe: ZeebeBpmnModdle,
    camunda: CamundaBpmnModdle
  }
});
container.removeClass('with-diagram');

function createNewDiagram() {
  openDiagram(diagramXML);
}

async function openDiagram(xml) {

  try {

    await bpmnModeler.importXML(xml);

    container
      .removeClass('with-error')
      .addClass('with-diagram');
  } catch (err) {

    container
      .removeClass('with-diagram')
      .addClass('with-error');

    container.find('.error pre').text(err.message);

    console.error(err);
  }
}

function registerFileDrop(container, callback) {

  function handleFileSelect(e) {
    e.stopPropagation();
    e.preventDefault();

    var files = e.dataTransfer.files;

    var file = files[0];

    var reader = new FileReader();

    reader.onload = function(e) {

      var xml = e.target.result;

      callback(xml);
    };

    reader.readAsText(file);
  }

  function handleDragOver(e) {
    e.stopPropagation();
    e.preventDefault();

    e.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.
  }

  container.get(0).addEventListener('dragover', handleDragOver, false);
  container.get(0).addEventListener('drop', handleFileSelect, false);
}


// file drag / drop ///////////////////////

// check file api availability
if (!window.FileList || !window.FileReader) {
  window.alert(
    'Looks like you use an older browser that does not support drag and drop. ' +
    'Try using Chrome, Firefox or the Internet Explorer > 10.');
} else {
  registerFileDrop(container, openDiagram);
}

// bootstrap diagram functions

$(function() {

  $('#js-create-diagram').click(function(e) {
    e.stopPropagation();
    e.preventDefault();

    createNewDiagram();
  });

  var downloadLink = $('#js-download-diagram');
  var downloadSvgLink = $('#js-download-svg');
  var downloadXML = $('#js-download-xml');

  $('.buttons a').click(function(e) {
    if (!$(this).is('.active')) {
      e.preventDefault();
      e.stopPropagation();
    }
  });

  function setEncoded(link, name, data) {
    var encodedData = encodeURIComponent(data);

    if (data) {
      link.addClass('active').attr({
        'href': 'data:application/bpmn20-xml;charset=UTF-8,' + encodedData,
        'download': name
      });
    } else {
      link.removeClass('active');
    }
  }

  var exportArtifacts = debounce(async function() {

    try {

      const { svg } = await bpmnModeler.saveSVG();

      setEncoded(downloadSvgLink, 'diagram.svg', svg);
    } catch (err) {

      console.error('Error happened saving SVG: ', err);

      setEncoded(downloadSvgLink, 'diagram.svg', null);
    }

    try {

      const { xml } = await bpmnModeler.saveXML({ format: true });
      // console.log(xml)

      setEncoded(downloadLink, 'diagram.bpmn', xml);
    } catch (err) {

      console.log('Error happened saving XML: ', err);

      setEncoded(downloadLink, 'diagram.bpmn', null);
    }

    try {

      const { xml } = await bpmnModeler.saveXML({ format: true });

      setEncoded(downloadXML, 'diagram.xml', xml);
      // console.log(xml)
    } catch (err) {

      console.log('Error happened saving XML: ', err);

      setEncoded(downloadXML, 'diagram.xml', null);
    }
  }, 500);

  bpmnModeler.on('commandStack.changed', exportArtifacts);
});

this is my app.js file, which i have taken from properties panel example.
Please find the screenshot for your reference.

[Alexej]

You can do it by creating a CustomReplaceProvider:

import { omit } from 'min-dash';

export default class CustomReplacePadProvider {
  constructor(eventBus, modeling, popupMenu, moddle, bpmnFactory, bpmnReplace) {
    this.modeling = modeling;
    this.moddle = moddle;
    this.replace = bpmnReplace;
    this.eventBus = eventBus;

    popupMenu.registerProvider('bpmn-replace', this);
  }

// you can remove the entries in the popup header
  getPopupMenuHeaderEntries(target) {
    return function(entries) {
      return omit(entries, [
        'toggle-parallel-mi',
        'toggle-sequential-mi',
        'toggle-loop'
      ]);
    };
  }


// with this function you can manipulate the entries in the popup menu
  getPopupMenuEntries = (element) => {
      return (entries) => {
        const filteredObject = {};

        for (let key in entries) {
          if (key === "replace-with-user-task") {
            filteredObject[key] = entries[key];
          }
        }


        return filteredObject;
      }
  }
}

CustomReplacePadProvider.$inject = ['eventBus', 'modeling', 'popupMenu', 'moddle', 'bpmnFactory', 'replace'];

Export the custom provider in an index.js:

import CustomReplacePadProvider from './CustomReplacePadProvider';

export default {
  __init__: ["customReplacePadProvider"],
  customReplacePadProvider: ["type", CustomReplacePadProvider]
};

And add it to you modeler as an additionalModule:

var modeler = new BpmnModeler({
    container: '#js-canvas',
    keyboard: {
        bindTo: window
    },
    propertiesPanel: {
        parent: '#js-properties-panel'
    },
    additionalModules: [
        customReplacePadProviderModule,
    ]
});

I see that you already have a custom provider for your properties panel. This is just more of the same.