Creating a Rich Dialogue Panel in a ProcessMaker Dynaform

 

Hello Everyone,

Today I would like to show you an excellent way to interact with your users through your Dynaform.

Who This Article Is For

This article is aimed at ProcessMaker Process Designers and Architects.

Anyone that has an interest in ProcessMaker can also benefit from this post.

Why Use a Dialogue Panel?

There are many use cases for a dialogue panel. Just last week I had the need to create one. On my personal blog, I related a process that I designed to create greater efficiency in a clients IT request workflow.

Use Case

In short, the process was to enable an employee to request an item from IT, such as a new mouse or keyboard. Depending on the reason for needing the new item, if for example, the employee spilled coffee over the keyboard and needed a new one, the company would make the employee pay for it.

In the case of John, he needed a new mouse. The reason for it was his own negligence. Therefore he was required to pay for it. Sara in the Financial Dept that was authorizing the new mouse saw from John’s description that he needed to pay for it.

So when Sara submitted the form, she was prompted with this beautiful dialogue panel, containing John’s description and two buttons, one to require him to pay for it and one to have the company pay for it.

The Code

There are two parts to creating a beautiful dialogue panel.

Part 1

The first part is the function that actually generates the panel. The code for this is based upon the awesome leimnud framework that is used by the ProcessMaker Interface.

Note that there are 6 parameters to pass to the function. Only the first 2 are required. It is recommended to pass callbacks for the confirm button and cancel button. By default they will just close the panel. The size of the panel is defaulted to 350px width and 110px height. The buttons are defaulted to Confirm and Cancel. For Size and Buttons you just need to pass through an object in the same format as you can see below.

function createPanel(Title, Body, confirmCallback, cancelCallback, Size, Buttons){
     if(typeof Title == 'undefined') return 'Title Required';
     if(typeof Body == 'undefined') return 'Body Required';
     if(typeof Size == 'undefined') Size = {width: 350, height: 110};
     if(typeof Buttons == 'undefined') Size = {Confirm: 'Confirm', Cancel: 'Cancel'};
     panel = new leimnud.module.panel();
     panel.setStyle={content:{padding:10,paddingBottom:2,textAlign:"left",paddingLeft:50,background:"url(/images/alert.gif)",backgroundRepeat:"no-repeat",backgroundPosition:"10 50%",backgroundColor:"transparent",borderWidth:0}};
     panel.options={statusBarButtons:[{value: Buttons.Confirm},{value: Buttons.Cancel}],position:{center:true},size:{w: Size.width,h: Size.height},control:{close:true,resize:false},fx:{modal:true}};
     panel.make();
     panel.addContentTitle(Title);
     panel.addContent(Body);
     panel.fixContent();
     panel.elements.statusBarButtons[0].onmouseup=function(){
          if(typeof confirmCallback != 'undefined') confirmCallback();
          panel.remove();
          return false;
     }.extend(this);
     panel.elements.statusBarButtons[1].onmouseup=function(){
          if(typeof cancelCallback != 'undefined') cancelCallback();
          panel.remove();
          return false;
     }.extend(this);
     panel.events={remove:function(){}.extend(this)};
}

Part 2

The second part is just calling the function. This is how you would do it:

createPanel(
     'Payment Responsibility',
     'Does <strong>'+getField('user_requesting').value+'</strong> need to pay for the request? This is his description:<br /><i>'+getField('user_description').value+'</i><br />.',
     function(){
          getField("payment_responsibility").value="employee";
     },
     function(){
          getField("payment_responsibility").value="company";
     },
     {width: 300, height: 150},
     {Confirm: 'Employee Will Pay', Cancel: 'Company Will Pay'}
);

Summary

All you need to do is copy the function above and paste it into a Javascript field in your Dynaform and then reference it in the way above. You can even copy the call above and just modify it to suit your requirements.

After implementing this beautiful panel your users will thank you for giving them a richer user experience.

 

I hope you enjoyed reading this article and please feel free to share it with anyone you think would benefit from it.

About This Author

Customer & Partner Support Manager for Colosa Inc. and ProcessMaker.