How to set Default form in properties Panel

Developers Modeler
1

I want to add default form to Propeties panel instead of manually creating form fields and assigning values.

I am able to set default values for Name and id fields like that want to dynamically create forms for user Task

Here is my code

function createUserTask(event) {

  const shape = elementFactory.createShape({ type: 'bpmn:UserTask' });

  // shape.businessObject["type"] = "external";

  // shape.businessObject["topic"] = "boo";

  shape.businessObject["name"] = "Enter User";

  shape.businessObject["id"] = "EnterUser";

  // shape.businessObject["forms"] = "boo";

  console.dir(shape.businessObject);

  create.start(event, shape);

}

image

2

The properties panel is always reflecting the current XML state of the diagram. Therefore you can check out what these properties are setting in the XML and then create these properties manually. E.g. for form fields

image

<bpmn:userTask id="Task_1">
  <bpmn:extensionElements>
     <camunda:formData>
       <camunda:formField id="FormField_1" label="foo" type="boolean" defaultValue="bar" />
       <camunda:formField id="FormField_2" label="foo" type="string" defaultValue="bar" />
     </camunda:formData>
   </bpmn:extensionElements>
</bpmn:userTask>
3

But I want t set frms fileds dynamically smething like belw

shape.businessObject[“name”] = “Enter User”;
shape.businessObject[“id”] = “EnterUser”;
// shape.businessObject[“forms”] = “boo”;

Here is my cde
export default class CustomPalette {

constructor(create, elementFactory, palette, translate) {

this.create = create;

this.elementFactory = elementFactory;

this.translate = translate;

palette.registerProvider(this);

}

getPaletteEntries(element) {

const {

  create,

  elementFactory,

  translate

} = this;

function createServiceTask(event) {

  const shape = elementFactory.createShape({ type: 'bpmn:ServiceTask' });

  shape.businessObject["type"] = "external";

  shape.businessObject["topic"] = "get-user";

  shape.businessObject["name"] = "Get User";

  shape.businessObject["id"] = "GetUser";

  create.start(event, shape);

}

function createServiceTask2(event) {

  const shape = elementFactory.createShape({ type: 'bpmn:ServiceTask' });

  shape.businessObject["type"] = "external";

  shape.businessObject["topic"] = "save-user";

  shape.businessObject["name"] = "Save User";

  shape.businessObject["id"] = "SaveUser";

  create.start(event, shape);

}

function createUserTask(event) {

  const shape = elementFactory.createShape({ type: 'bpmn:UserTask' });

  // shape.businessObject["type"] = "external";

  // shape.businessObject["topic"] = "boo";

  console.log('user task form', shape);

  console.log('event', event);

  shape.businessObject["name"] = "Enter User";

  shape.businessObject["id"] = "EnterUser";

  // shape.businessObject["forms"] = "boo";

  console.dir(shape.businessObject);

  create.start(event, shape);

}

return {

  'create.service-task': {

    group: 'activity',

    className: 'bpmn-icon-service-task',

    title: translate('Create ServiceTask'),

    id: 1,

    action: {

      dragstart: createServiceTask2,

      click: createServiceTask2

    }

  },

  'create.service-task2': {

    group: 'activity',

    className: 'bpmn-icon-service-task',

    title: translate('Create ServiceTask2'),

    id: 2,

    action: {

      dragstart: createServiceTask,

      click: createServiceTask

    }

  },

  'create.user-task': {

    group: 'activity2',

    className: 'bpmn-icon-user-task',

    title: translate('Create UserTask'),

    id: 3,

    action: {

      dragstart: createUserTask,

      click: createUserTask

    }

  },

}

}

}

CustomPalette.$inject = [

‘create’,

‘elementFactory’,

‘palette’,

‘translate’

];

4

In the source code you’ve posted I can’t see any form fields/user task related properties. Indeed, you are creating a service task. Is this intended?

5

I do have both service task and user task. just have given example how the name and topic has been set for service task similar way im trying to set default form data for user task but im not getting how to set form fields dynamically for user task.

Here is my code
function createServiceTask2(event) {

  const shape = elementFactory.createShape({ type: 'bpmn:ServiceTask' });

  shape.businessObject["type"] = "external";

  shape.businessObject["topic"] = "save-user";

  shape.businessObject["name"] = "Save User";

  shape.businessObject["id"] = "SaveUser";

  create.start(event, shape);

}

function createUserTask(event) {

  const shape = elementFactory.createShape({ type: 'bpmn:UserTask' });

  shape.businessObject["name"] = "Enter User";

  shape.businessObject["id"] = "EnterUser";

  console.dir(shape.businessObject);

  shape.businessObject["formKey"] = "camunda-forms:deployment:EnterUser.form";

  create.start(event, shape);

}

Here in User Task i am able to set formkey but i need to set form fields like username age etc instead of using formkey

image

Thanks in advance

6

Did you already have a look at this thread on how to create form fields programmatically? The properties panel is only displaying the camunda:formData properties.

7

I Have added forms fields to modelling as per you post but it is not reflecting in uset task forms.

image
image1910×886 86.4 KB

Hers is my code

export default class CustomPalette {

constructor(create, elementFactory, palette, translate, elementRegistry, moddle, modeling) {

  this.create = create;

  this.elementFactory = elementFactory;

  this.translate = translate;



  this.elementRegistry = elementRegistry;

  this.moddle = moddle;

  this.modeling = modeling;



  palette.registerProvider(this);

}



getPaletteEntries(element) {

  const {

    create,

    elementFactory,

    translate,



    elementRegistry,

    moddle,

    modeling,

  } = this;



  function createUserTask2(event) {

    const shape = elementFactory.createShape({ type: 'bpmn:UserTask' });



    shape.businessObject["name"] = "Created User";

    shape.businessObject["id"] = "CreatedUser";

    console.dir(shape.businessObject);

    shape.businessObject["formKey"] = "camunda-forms:deployment:CreatedUser.form";

    updateFormField('');

    create.start(event, shape);

  }



  function updateFormField(elementID) {

    console.log('....forms');

    //var element = elementRegistry.get(elementID);



    var element = elementFactory.createShape({ type: 'bpmn:UserTask' });



    var extensionElements = element.businessObject.get('extensionElements');



    if (!extensionElements) {

      extensionElements = moddle.create('bpmn:ExtensionElements');

    }



    var form = extensionElements.get('values').filter(function (elem) {

      return elem.$type == 'camunda:FormData'

    }

    )[0];



    if (!form) {

      form = moddle.create('camunda:FormData');

    }



    var formField = moddle.create('camunda:FormField', { 'defaultValue': 'false', 'id': 'FormField_Test', 'label': 'Confirm?', 'type': 'boolean' });

    var existingFieldsWithID = form.get('fields').filter(function (elem) {

      return elem.id == formField.id;

    });



    for (var i = 0; i < existingFieldsWithID.length; i++) {

      form.get('fields').splice(form.get('fields').indexOf(existingFieldsWithID[i]));

    }

    form.get('fields').push(formField);



    extensionElements.get('values').push(form);

    console.log('extensionElements', extensionElements);

    modeling.updateProperties(element, { extensionElements: extensionElements });

    console.log('modeling', modeling);

    element.businessObject["extensionElements"] = extensionElements;

  }



  //updateFormField('CreatedUser');



  return {

    

    'create.user-task2': {

      group: 'activity2',

      className: 'bpmn-icon-user-task',

      title: translate('Created User'),

      id: 4,

      action: {

        dragstart: createUserTask2,

        click: createUserTask2

      }

    },

  }

}

}

CustomPalette.$inject = [

'create',

'elementFactory',

'palette',

'translate',

'elementRegistry',

'moddle',

'modeling'

];

8

Did you debug what doesn’t work in particular? If you share your custom palette inside a CodeSandbox, then it will be easier for us to help you.

9

I was passing wrong element id. Fixed it. Thanks for the solution