Integration options for embedding Task and Process Web components into an external portal

Camunda 7 Topics Discussion & Questions
,
1

Hi all.

I know some have asked about this in the past, and I’ve looked at (I think) all the external embedded integration samples around, but I need to embed the Tasklist and Process functionality into an external React based portal.

The catch is this isn’t a basic workflow I can quickly recreate (like in some of the examples out there), it’s a more complicated and customized one that we deploy as a WAR in Camunda. Meaning using the REST API to recreate all the functionality in that custom workflow would be a duplication of effort, and there would be coordination problems (when someone updates the workflow WAR, it could break support in the portal for working with a Task/Process). Furthermore we want to keep the existing Camunda Web App for advanced usage (both sites would be accessible), while having the portal be more of a direct/streamlined interface that brings in other functions that aren’t Camunda specific. e.g. the portal will include Tasks/Processes but also some external metrics and compliance Web UI support.

I can’t find an exclusive yes or no on whether an iFrame approach to embedding the Tasklist component into another site is possible.

I’ve already integrated the Camunda REST API into my React+Node.js frontend/backend and played with just listing current Tasks with some details.

Can the Camunda JS SDK can be used to load a custom Workflow WAR form, with the integrated controls already included?

For example, when I watch the network URIs between the browser and Camunda, the Tasklist view will return the available Task JSON with relative URL, and the selected form will call a “startForm” URL:

http://192.168.3.5:8080/camunda/api/engine/engine/default/process-definition/ExistingSystemAssessment:1:26349a5c-a02f-11ea-be89-0242ac120003/startForm

Which loads my custom Workflow WAR content:

http://192.168.3.5:8080/custom-workflows/forms/expedited/v2/new-system-assessment.html?noCache=1591198991055&userId=camundau&engineName=default

If I load the above custom Workflow content in a new tab, I get the process HTML and broken Javascript. If it loaded in the Camunda Web context, the “New Process” modal will display the same content, but with Close and Start buttons, etc…

Is it possible to load/import/embed the Task and Process Web context into another Web app? Again, I don’t mind leveraging the REST API, I just can’t afford to recreate all the Task/Process controls in yet another full stack Web app.

Thanks!

2

I tried out the JS SDK browser forms sample here: https://github.com/camunda/camunda-bpm-examples/tree/master/sdk-js/browser-forms

However Chrome complains with: scripts.js:100 Uncaught TypeError: Cannot read property 'replace' of null

The view rendered and shows my sample tasks (there’s 2 displayed) but when I select one the replace method call fails because the taskService.form() is returning a null form (taskFormInfo). The task exists and the ID is set. When loadTaskForm() is called, the ID is correct.

var url = taskFormInfo.key.replace('embedded:app:', taskFormInfo.contextPath + '/');

The sample was updated recently but it’s not working as described. I deployed it to my Camunda webapp directory and simply browsed to it.

3

Hi @duhmojo,

From what I understand, you already have HTML forms, a custom webapp for human task management and want to use them with camunda. Is that correct?

While the REST API can be overwhelming at first, I think in your case it is easiest to change the calls of the existing webapp. In the most simple terms, you only need GET Task List and POST complete. If you want to deploy the forms to camunda as well, you might need GET Form key as well.

Of course, I don’t know your specific situation or architecture. It would be nice to see how your Form HTML looks like for further suggestions.

Cheers
Martin

4

Thanks Martin. I’ll stick with this post to the discussion (I have my other post you replied to as well that I’ll leave alone).

We have external forms deployed as a WAR in the Camunda webapps directory. We normally access it from the Camunda Web UI to create new processes and work with the tasks. We need to expose some of this in an external portal. The Camunda SDK-JS seems like the right way to go, but as you pointed out, with an external form the Task URL is null. Our forms are kind of big because they’re mapped to a compliance process, So there’s over a dozen fields (date, drop down lists, etc… some JavaScript, even an embedded CSV file upload/validation function). We want existing Camunda use of the forms to work like normal, but also support it from a portal (the reason is the process is more than Camunda alone and we want to kind of unify the various functions in one place).

So, what is a safe/recommended way to determine the external form URL and what should be passed into SDK_JS CamSDK.Form()?

Camunda loads our external form from this URL: http://192.168.3.5:8080/test-workflows/forms/expedited/v2/new-system-assessment.html?noCache=1591198991055&userId=camundau&engineName=default

If I open it in a browser tab I’ll get the form, kind of broken without the Camunda included Angular/jQuery support, but it loads.

Can I quickly adapt the browser test to load and submit it? Something like:

var url = "/test-workflows/forms/expedited/v2/new-system-assessment.html";
    new CamSDK.Form({
      client: camClient,
      formUrl: url,
      taskId: taskId,
      containerElement: $formContainer,

      // continue the logic with the callback
      done: callback
    });
5