Camunad 8 Desktop Modeler forms

camunda_kon · January 2, 2023, 11:54am

Hello everyone and happy new year!
I would like to ask if there are any plans to update the way we can link a form to the user task using desktop modeler for Camunda 8. Something different from pasting the JSON, like linking files from a local repository.

Thank you!

jonathan.lukas · January 3, 2023, 11:02am

Hello @camunda_kon ,

I guess this is related to our latest conversion:

Currently, there is no way of linking files in the Desktop Modeler (also not BPMN → BPMN or BPMN → DMN).

At the moment, this is solved using linking by Id which is resolved at runtime. For Camunda 8 forms, this will probably also be the first step (use a “form ref” instead of a form key which points to the form id).

In order to be able to resolve this information as links, some kind of context would be required.

I was thinking about this also some time ago, yet I do not have any information if this is in the pipeline.

Jonathan

camunda_kon · January 3, 2023, 12:47pm

So you mean that we can link a Camunda form by a form key? Or the custom form key option is only about external forms?
If yes, where do we save the Camunda form in order to be linked to the user task through the key?

jonathan.lukas · January 3, 2023, 12:52pm

Hello @camunda_kon ,

sorry for the confusion. Currently, this is not possible.

Yet, the form key field has the obligation to link a user task to its form. When pasting a form JSON to the user task, the form key will be generated and link to the form which is embedded in the XML as text somewhere else.

The reason is that currently, the form cannot be deployed separately to Zeebe.

Jonathan

camunda_kon · January 3, 2023, 1:41pm

Ok great now I understand the concept. One last thing, or if you prefer I can open a new topic. If I want to use an external form. Let’s say formio. How is this working? I create the form online and there is a generated key that I use in the modeler form key input field?

jonathan.lukas · January 3, 2023, 3:47pm

Hello @camunda_kon ,

almost yes.

For formio, it works like this: You create the form key with formio, supply it to the user task in the process.

Then, you create a component in your frontend like this:

github.com

camunda-consulting/camunda-8-code-examples/blob/main/camunda-8-process-application/camunda-8-process-application-frontend/src/components/FormIoContainer.vue

<script lang="ts" setup>
import { computed, ref, type Ref } from "vue";
import FormIoViewer from "./viewer/FormIoViewer.vue";

type Variable = {
  name: string;
  value: string;
};

const props = defineProps(["task"]);
const emits = defineEmits(["errorMessage"]);

const viewer = ref(null as any);

const formKey = ref(props.task.formKey) as Ref<string>;

const clearedFormKey = ref(formKey.value.split(":")[2]);

const variables = computed(() => {
  const raw = props.task.variables as Array<Variable>;

This file has been truncated. show original

It uses the form key to generate the url of the form to fetch it from formio.

Then, you load the form like this:

github.com

camunda-consulting/camunda-8-code-examples/blob/main/camunda-8-process-application/camunda-8-process-application-frontend/src/components/viewer/FormIoViewer.vue

<script lang="ts" setup>
import { Formio } from "formiojs";
import { computed, onMounted, ref } from "vue";

const props = defineProps(["variables", "formUrl"]);

const container = ref(null);

const form = ref(null as any);

const variablesToSubmit = ref({} as any);

onMounted(async () => {
  form.value = await Formio.createForm(
    document.getElementById("formio-form"),
    props.formUrl as string,
    {}
  );
  form.value.submission = {
    data: props.variables,

This file has been truncated. show original

The formio sdk gets the formio api link, fetches the form and injects it into the container.

Then, you have to register a listener to update the variables from the form.

Jonathan

camunda_kon · January 4, 2023, 10:44am

@jonathan.lukas As I noticed from your app, you are using the following format for the form key: “form-io:bpmn:documentupload” . Is this a standard format for every occasion? Like form-io:bpmn: + the form id ?
And lastly, when you link a formio form to the process, can it be completed through the camunda tasklist?
I am asking because I tried creating a form online, binding it like this: form-io:bpmn:myForm , but after deploying the process and starting an instance, camunda tasklist shows an empty task without form or variables.

jonathan.lukas · January 4, 2023, 10:47am

Hello @camunda_kon ,

I came up with the format on my own.

No, this is not possible with Camunda Tasklist as it relies on Camnda forms.

Jonathan

camunda_kon · January 4, 2023, 10:49am

Understood.
Thanks for all the feedback and sorry for the many questions!