Custom <select> for Camunda-Modeler

Hello! I need to replace the drop-down list in the service task with my custom one. I want to make a drop-down list with JavaClass so that you can simply select the java class.
I tried to do it with this code, and I need to hang up some kind of handler to redraw the drop-down list every time I access a service task.

function CreateCustomSelect() {

  const container = document.querySelector('');

if(container) {
  const divSelect = document.createElement('div');

  const select = document.createElement('select');
  select.classList.add('bio-properties-panel-input'); = 'bio-properties-panel-javaClassType'; = 'javaClassType';

  const option1 = document.createElement('option');
  option1.text = 'Java Class 1';
  option1.value = 'value of java class 1';

  const option2 = document.createElement('option');
  option2.text = 'Java Class 2';
  option2.value = 'value of java class 2';

  const option3 = document.createElement('option');
  option3.text = 'Java Class 3';
  option3.value = 'value of java class 3';



  const divJavaClassType = document.createElement('div');


  console.log('>>>New Select is added<<<');

  const defaultJavaClass = document.getElementById('bio-properties-panel-implementationType');
  defaultJavaClass.selectedIndex = 1;
  if(defaultJavaClass.selectedIndex = 1) {
    console.log('>>>defaultItem is done<<<');

  const hideSelect = document.querySelector('.bio-properties-panel-select');
  if(hideSelect) { = 'none';
    console.log('>>>Select of Camunda-Modeler is Hidden<<<');

  const selectValue = document.getElementById('bio-properties-panel-javaClassType');
  const inputValue = document.getElementById('bio-properties-panel-javaClass');

  function updateInputValue() {
    if (inputValue !== null) {
        inputValue.value = selectValue.value;
  select.addEventListener('change', updateInputValue);



This is not how you’d extend the properties panel. Please have a look at the examples we provided for extending the properties panel: GitHub - bpmn-io/bpmn-js-examples: Some examples how to use bpmn-js

I will try. Thank you!

Will this article help me? GitHub - camunda/camunda-modeler-plugin-example: Plugin example for the Camunda Modeler. Use this as a starting point for creating your own plugins.

The Camunda Modeler plugin example can help you understand how to integrate a bpmn-js extension (e.g., a properties panel extension) into the Camunda Modeler.