[pincap123]

Hi Guys,

I am trying to automate the loan application workflow. We have around 300 fileds in a dynaforms. I have 3 questions here

1. Is it possible to have multi tabs in dynaforms
2. Does processmaker becomes slow if I add around 300-400 fileds?
3. Is it the right solution for automating the complex business process.

I will appreciate if anyone can answer my questions.

[Bosatzu]

I have the same issue, I have a dynaform with a lot of fields. I tried to find a solution but I didn't.

[ethanpresberg]

Hi Guys,

1. Yes, but you would need to use a plugin like jQuery Accordion
2. ProcessMaker per se does not become slow. It would really depend on your machines hardware and browser etc
3. Yes, ProcessMaker is the BEST solution for automating complex business processes. But I am biased, so... :p

[HelenG]

Hello,

In Processmaker 2.8 we have created multitabs form because we have the ability to use HTML editor (if you need the code i can send you).

In Processmaker 3 we do not have the HTML editor in forms so where we can add the jQuery plugin that you have mentioned?
More over where we can add css for the forms?
So if anyone has done (really not only in the words) something with that we would appreciate to give us an advice.

It would be the best solution if it give us the opportunity to be more flexible.

Kind regards,
Eleni

[ethanpresberg]

Hi Eleni,

You can write your javascript code in the javascript editor.
To access this, simply select the gray border of the form from within the form builder and then on the left hand side there is a button for accessing the javascript editor. jQuery is already preloaded for you, all you need to do is just start writing jquery syntax.

To add the jquery accordion or other javascript or even css libraries, again access the form properties by selecting the gray border and then simply put the publicly accessible url into the field called external libs. You can put as many javascript or css links in there as you like, they need to be comma separated. Once you put the links to the files there, they will be automatically included on the dynaform so that you can access the scripts from within your javascript.

Let me know if you need additional information.

[no51water]

Anyone can share with me the example with js code and ext. lib. links on this topic, i would much appreciated...thanks.

[ashkufaraz]

You can define this function

Code: Select all

function ShowtabFrame(url,id,title){
	var TabPanel = parent.Ext.getCmp('caseTabPanel');
		TabPanel.add({
			id: id,
			title: title,
			defaultSrc: url,
			loadMask: {
				msg: _('ID_LOADING_GRID') + '...'
			},
			autoWidth: true,
			closable: true,
			autoScroll: true,
			bodyStyle: {
				height: (parent.PMExt.getBrowser().screen.height - 60) + 'px',
				overflow: 'auto'
			}
		}).show();
		TabPanel.doLayout();
}

For add tab with extjs then for url parameter set address of other dynaform

I hope this can help you

[nobody]

If you are interested in a somewhat dynamic accordion, that can be added to (almost) any dynaform, this is one of the options. It hides the dynaform rows (instead of fields) and works even if you have subforms in your dynaform. I recommend navigating through subforms by tabs. For tabs navigation, see this nice example by 'dipo majekodunmi
https://medium.com/dipolediamond/how-to ... 529d4e514
Back to the accordion. First, insert panels in the dynaform on places according to your choice. The javascript below works with classes solely, so there is no need for specifically naming the panels.
In each of the panels you inserted, click edit and write this html code:

Code: Select all

<button class="accordion" style="background-color:lightblue;">Section 1</button>

Styling of the panels is up to you, it suffice if you add the css in the first panel only (since we define the accordion class in the first panel). As an example of CSS, this worked for me quite nicely with the PM interface. just remember to include the css in the style/style tags in the html of the first panel:

Code: Select all

<style>
.accordion {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    text-align: left;
    border: none;
    outline: none;
    transition: 0.4s;
}
  .accordion:after {
    content: '\02795'; /* Unicode character for "plus" sign (+) */
    font-size: 13px;
    color: #777;
    float: right;
    margin-left: 5px;
}

 .activated:after {
    content: "\2796"; /* Unicode character for "minus" sign (-) */
}
</style>

After that, in the javascript section of the dynaform, put the following:

Code: Select all

//----------------------------
//Accordion Navigation
//----------------------------
function next(event){
  event.preventDefault();
var myCollection = $('.accordion');   //get the collection of all elements with class accordion

var clickedButtonIndex = myCollection.index($(event.target)); //find the index of the button that was clicked in the accordion collection
var clickedButtonObject = myCollection.eq(clickedButtonIndex)[0]; //temporarily store the clicked button as object. We will assign the "activated" lass later
var firstPanel = myCollection.eq(clickedButtonIndex).parent().parent(); //find the panel in which the button (accordion) was clicked 

  
var nextButtonIndex = (clickedButtonIndex + 1) % myCollection.length; //get the index of the next accordion (button) in the accorion collection
var nextPanel = myCollection.eq(nextButtonIndex).parent().parent(); //get the panel in which the next accordion button is located
    
var list1 = $('.pmdynaform-field');  //get the collection of dynaform rows
      var firstRow = list1.index(firstPanel)+1; //get the first row of the active accordion section. Add 1 to exclude the accordion panel itself
      var lastRow = list1.index(nextPanel)-1; //get the last row and subtract 1 to exlude the second accordion panel

if (clickedButtonObject.classList.contains("activated")){ //check if the accordion is active already
    for (i = firstRow; i < lastRow;i++){ //hide the rows between the two accordions if the accordion was active
  		list1[i].style.display = 'none';
            $(clickedButtonObject).removeClass("activated");
    }
    } else {
       for (i = firstRow; i < lastRow;i++){ //hide the rows between the two accordions if the accordion was inactive
 		 list1[i].style.display = 'block';
       		$(clickedButtonObject).addClass("activated");

    }
      
}}
      
$('.accordion').click(next); //assign event to all elements with class "accordion" and call the function

Now, we need something which will hide the rows in the dynaform immediately after the dynaform is loaded/displayed. To do this, add the following js after the last line of the code:

Code: Select all

function HideAll(){
var a;
var i;
var aForms = $('.form-horizontal'); //get the collection of dynaform forms and subforms
	
  for (a = 1;a<aForms.length;a++){  //[b]CHANGE [/b]this to a=0 in case there are no subforms in your dynaform
var subCol = $('.accordion',aForms[a]);
		
    if (subCol.length > 0 && typeof(subCol) != "undefined") {//check if there are any accordions in the subform
var aRows = $('.pmdynaform-field', aForms[a]) //get the subcollection of all rows within the subform
//console.log(aRows);  
  
for (i = 0;i < aRows.length;i++){ 
 
  if ($(aRows[i]).children().children('.accordion').length>0) {
    console.log(aRows[i]);
 //console.log(aForms[a].(aRows[i]));
   aRows[i].style.display = 'block';
   aRows[i-1].style.display = 'block';
  } else {
   aRows[i].style.display = 'none';
  }
   if ($(aRows[i]).children().children('.accordion.last').length>0) {   
     aRows[i].style.display = 'none';
   aRows[i-1].style.display = 'none';
   }}}}}
  
HideAll(); //call the function at dynaform startup 

This is how it looks like in the preview:



Edit:
I forgot to mention that you need to create a closing panel at the end of each subforms. In this panel, you insert this html:

Code: Select all

<button class="accordion last">Always Hidden</button>

This panel makes sure that also the last accordion expands/collapses correctly.

[amosbatto]

Nice solution. I'm impressed.

[nobody]

Thank you Amos. It took me a while to figure out the DOM structure of the dynaforms, but I found it very well designed and customizable.