Use customized form designer in flowable-modeler

Flowable Application
1

Hi, I have the idea of replacing the form designer part of flowable with my customized form designer (e.g. an open source form service called form.io which is also written in AngularJs). So if I build a form with my own form designer, I want to save the json form data in the back-end of flowable.

There are two issues I concerned.
The first is the form properties of my own designer is different from the flowable one’s. Does it matter to send and save the json form data to the back-end of flowable?
The second is where can I modify the code of flowable-modeler (The AngularJs code) to send my own form data? or can I use rest api to do this work?

Regards,
Ziwen

1 Like
2

  1. There is no need to change the backend for this. Use the formKey approach and resolve your form using that formKey that the engine exposes. On form submit, pass them as variables.

  2. Source code (html/js) for the modeler can be found here: https://github.com/flowable/flowable-engine/tree/master/modules/flowable-ui-modeler/flowable-ui-modeler-app/src/main/webapp

3

Thanks for your reply, I got the modeler code, but I am still confused about your answer for the formKey approach. I find the code where it saves form data as below:

this.saveForm = function (data, name, formKey, description, saveCallback, errorCallback) {
var fieldIndex = 0;
data.formRepresentation = $rootScope.currentForm;
data.formRepresentation.name = name;
data.formRepresentation.key = formKey;

    if (description && description.length > 0) {
        data.formRepresentation.description = description;
    }
    for (var i = 0; i < $rootScope.formItems.length; i++) {

$rootScope.formItems[i].testproperty=‘testproperty’; // Here I add an extra property to form field
var field = $rootScope.formItems[i];

        this._cleanFormField(field, fieldIndex++);
    }

I add an extra testproperty to the form field, then it cannot save the form data and gives me an error:
angular.js:9827 PUT http://localhost:8080/flowable-modeler/app/rest/form-models/77e877c2-0099-11e8-a238-0a7508fb1bfa 400 (),
so does it mean I cannot customize the properties as I want?

Regards,
Ziwen