[flattante]

Hi all,
I'm looking for a way to change the default processmaker's UI replacing the dynaforms with custom forms based on bootstrap and php.
There is an easy way or the creation of a custom plugin is a mandatory?

Thanks!

[amosbatto]

There is no easy way to do this. You are going to have to edit the ProcessMaker source code. A plugin won't work.

The PHP files to generate Dynaforms are:
workflow/engine/classes/model/Dynaform.php
workflow/engine/classes/DynaformField.php

The principal JavaScript file is:
workflow/public_html/lib/pmdynaform/build/js/PMDynaform.js

Frankly, I think that you would do better to not touch the ProcessMaker source code. Instead, I recommend that you use JavaScript in your Dynaform to hide the existing fields and then construct your new form on top of the old form with the information in the getFormById("dynaformID").model.attributes.items array.

When the Dynaform is submitted, you can copy the values from your custom fields to the standard Dynaform fields and let ProcessMaker process the submitted Dynaform normally.

Here is some sample JavaScript that can get you started:

Code: Select all

//hide all existing fields in the Dynaform:
$("div.row").hide();

var formId = $("form").prop("id");

//get the structure of the Dynaform:
var aRows = getFormById( $("form").prop("id") ).model.attributes.items;

for (var rowNo in aRows) {
    for (var fieldNo in aRows[rowNo]) { 
        var oField = aRows[rowNo][fieldNo];
        if (oField.type == 'text') {
             var html = '<div class="row"><p><b>' + oField.label + '</b><br><input type="text" id="'+
                   "my_"+oField.id+'" name="'+"my_"+oField.id+'" value="'+oField.data.value+'"></p></div>';
             $("#" + formId ).append(html);
        }
        else if (oField.type == 'textarea') {
             var html = '<div class="row"><p><b>' + oField.label + '</b><br><textarea id="'+
                   "my_"+oField.id+'" name="'+"my_"+oField.id+'" value="'+oField.data.value+'"></p></div>';
             $("#" + formId ).append(html);
        }
        //do the same for all the rest of the field types
    }
}

//when the form is submitted, copy the values from your custom fields to the Dynaform fields:
$("#"+formId).setOnSubmit( function() {
  var aFieldTypes = ['text', 'textarea', 'checkbox', 'dropdown', 'suggest', 'radio'];

  for (var rowNo in aRows) {
    for (var fieldNo in aRows[rowNo]) { 
        var oField = aRows[rowNo][fieldNo];

        //if a field with a value, then copy the value from the custom field to the standard Dynaform field:
        if (aFieldTypes.indexOf( oField.type ) != -1) {
             var v = $("#my_" + oField.id).val(); 
             $("#" + oField.id).setValue(v);
        }
        else if (aFieldTypes = "checkgroup") {
             //copy this differently
        }
        else if (aFieldTypes = "grid") {
             //copy this differently
        }
    }
  }
});

You will have to expand this code, but it gives you the basic idea.