Improve custom elements with a pre-configured Rest API call

Hi All,

I am trying to develop a service task in the palette/context pad that is pre-configured with a Rest API call.
I was able to pre-configure it with “Name and ID”. But I am trying to improve it for a Rest API call.

This is my Current Development, I need to improve this function for a Rest API call (http-connector)

    const {
    } = this;
    function createTask( name, id) {
      return function(event) {
        const businessObject = bpmnFactory.create('bpmn:ServiceTask');
        const shape = elementFactory.createShape({ type: 'bpmn:ServiceTask',businessObject: businessObject }); name; id;
        create.start(event, shape);


What I am trying to achieve: (pre-configured service task should return this script.)

  <bpmn:process id="outbound_payment_flow" name="outbound_payment_flow" isExecutable="true"> 
	<bpmn:serviceTask id="funds_task" name="funds control">
            <camunda:inputParameter name="payload">{"valueOne": "3000T"}</camunda:inputParameter>
            <camunda:inputParameter name="headers">
                <camunda:entry key="Content-Type">application/json</camunda:entry>
            <camunda:inputParameter name="method">POST</camunda:inputParameter>
            <camunda:inputParameter name="url">http://localhost:8085/inboundPayment/fc_sample</camunda:inputParameter>		
            <camunda:outputParameter name="funds_control_response">${response}</camunda:outputParameter>		

I used the below resources,

Any Suggestions?

Thanks for this platform.
Have a great day.!

Hi! Have you considered using element templates for this? Seems like they already provide what you need (pre-configured connectors). It would be also possible to use them outside the Camunda Modeler via the bpmn-js-properties-panel.

Maybe this thread can be interesting as well: How to add custom service tasks to modeler tool palette? - #8 by PUBG_Noob

1 Like

Hahah, I know @dushman_nalin . :laughing: This might help for us.


Hi Niklas_Kiefer, Thanks for your reply.
This is much closer to my requirement. I am trying it.

This is the expected answer.

 function createTask(name, id) {
      return function (event) {
        const serviceTask = elementFactory.createShape({
          type: "bpmn:ServiceTask"
        var urlInputParameter = bpmnFactory.create('camunda:InputParameter', {
          // type: 'string',
          name: 'url',
          value: 'http://localhost:8085/sample'
        var methodInputParameter = bpmnFactory.create('camunda:InputParameter', {
          // type: 'string',
          name: 'method',
          value: 'POST'
        var contentTypeInputParameter = bpmnFactory.create('camunda:InputParameter', {
          // type: 'string',
          name: 'Content-Type',
          value: 'application/json'
         var payloadInputParameter = bpmnFactory.create('camunda:InputParameter', {
          // type: 'string',
          name: 'payload',
          value: "lllll"

         var responseOutPutParameter = bpmnFactory.create('camunda:OutputParameter', {
          // type: 'string',
          name: 'responsename',
          value: "${response}"

        var inputOutput = bpmnFactory.create('camunda:InputOutput', {
          inputParameters: [urlInputParameter,methodInputParameter,contentTypeInputParameter,
            payloadInputParameter ],   
            outputParameters: [responseOutPutParameter]  

        const connector = bpmnFactory.create("camunda:Connector", {
          connectorId: "http-connector", inputOutput
        var extensionElements = bpmnFactory.create('bpmn:ExtensionElements', {
          values: [connector]
        serviceTask.businessObject.set("extensionElements", extensionElements); = name; = id;
        create.start(event, serviceTask);

how to call this function

    return {
      'create.low-task': {
        group: 'activity',
        className: 'bpmn-icon-service-task red',
        title: translate('Test Service Task'),
        action: {
          dragstart: createTask("Test name", "test"),
          click: createTask("Test name", "test")

Note: No need to add type for “camunda:InputParameter”, by default, it will take the “String or Expression” type

Useful resources
connector tag
inputParameters tag
saving issue with custom elements


hi , i want to use the type map for an inputParameter , how can i do that ?

Hi All,
Thanks for your inputs.

I am facing below issue, please help me with this.


Thanks in advanced.

Please do not necrobump old topics. Instead link to this thread from new topic.