Questions and discussion about using ProcessMaker 2: user interface, running cases and functionality

Moderators: ArturoRobles, ArturoRobles

Forum rules: Please search to see if a question has already been asked before posting. Please don't ask the same question in multiple forums.
By pincap123
#784761
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.
By Bosatzu
#784777
I have the same issue, I have a dynaform with a lot of fields. I tried to find a solution but I didn't.
User avatar
By ethanpresberg
#784982
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
By HelenG
#786064
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
User avatar
By ethanpresberg
#786067
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.
By no51water
#787017
Anyone can share with me the example with js code and ext. lib. links on this topic, i would much appreciated...thanks.
User avatar
By ashkufaraz
#787055
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
By nobody
#814988
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:
Image
Image

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.
Attachments
(14.47 KiB) Downloaded 127 times
Last edited by nobody on Tue Jul 03, 2018 5:25 am, edited 1 time in total.
By nobody
#815005
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.

Maybe try increasing your thread stack size? Seems[…]

I use PM 3.4. Android push works while IOS push do[…]

[quote=ziadeh post_id=823031 time=1550759948 user_[…]

I have to support reports in processmaker 3.4. A s[…]