Improve custom elements with a pre-configured Rest API call

Developers Modeler
1

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 {
      bpmnFactory,
      create,
      elementFactory,
      translate
    } = this;
    function createTask( name, id) {
      return function(event) {
        const businessObject = bpmnFactory.create('bpmn:ServiceTask');
        const shape = elementFactory.createShape({ type: 'bpmn:ServiceTask',businessObject: businessObject });
        shape.businessObject.name= name;
        shape.businessObject.id= id;
        create.start(event, shape);
      };}

Capture

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">
      <bpmn:extensionElements>	  
        <camunda:connector>
          <camunda:inputOutput>
            <camunda:inputParameter name="payload">{"valueOne": "3000T"}</camunda:inputParameter>
            <camunda:inputParameter name="headers">
              <camunda:map>
                <camunda:entry key="Content-Type">application/json</camunda:entry>
              </camunda:map>			  
            </camunda:inputParameter>	
            <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>		
          </camunda:inputOutput>		  
          <camunda:connectorId>http-connector</camunda:connectorId>	  
        </camunda:connector>	
      </bpmn:extensionElements>
    </bpmn:serviceTask>	
  </bpmn:process>

I used the below resources,
https://github.com/bpmn-io/bpmn-js-example-custom-elements
https://github.com/ingorichtsmeier/camunda-modeler-plugin-connected-elements

Any Suggestions?

Thanks for this platform.
Have a great day.!

2

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.

3

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

1 Like
4

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

Thanks,

5

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

6

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);
        serviceTask.businessObject.name = name;
        serviceTask.businessObject.id = 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

2 Likes
7

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

8

Hi All,
Thanks for your inputs.

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

image

Thanks in advanced.

9

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

10