[JeniferLawrence]

Hello all,

please help to show the calendar in dynaform. In wiki i found that using panel we can show MultiDatesPicker. http://wiki.processmaker.com/3.0/Panel_Control . But the exact code is not working. I need to show calendar in both mobile and dynaform. Please help me.

Thank you.

[mishika]

Hello,

To show a calender in dynaform follow the steps:
* Take a hidden field say 'calender1' and a panel in the dynaform
* Let the ID of panel be 'multiplecalender'
* Add following line of code in the content of the panel:

Code: Select all

<div id="calenderdisplay"></div>

* Add following libraries to the external lib section of the form's properties:

Code: Select all

http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css,
http://code.jquery.com/ui/1.11.4/jquery-ui.js, 
http://layout.jquery-dev.com/lib/css/layout-default-latest.css, 
http://layout.jquery-dev.com/lib/js/jquery.layout-latest.js, 
http://multidatespickr.sourceforge.net/jquery-ui.multidatespicker.js

* Now, add following javascript code in the form:

Code: Select all

var dates = jQuery("#calender1").getValue().split(",");
$('#calenderdisplay').multiDatesPicker({
  addDates: dates.length>1?dates:false,
  changeMonth: true,
  numberOfMonths: [4,3],  // rows and columns to view the calender
  onSelect:function(){
    var a = $('#calenderdisplay').multiDatesPicker('getDates');
    jQuery("#calender1").setValue(a);
  }
});

where calenderdisplay is the ID given in the content section of panel and calender1 is the id of the hidden field
This will view the complete calender in the dynaform and the multiple selected dates will be stored in the variable calender1 and can be seen in variables of the debug mode(if enabled).

Hope this helps

Regards
Mishika

[JeniferLawrence]

Hello Mishika,

I have tried the code given by you. But the form is not loading. Do we need to update any plugins for that. I dont understand why this code is not running for me. The link which i provided also contains the same code. help me to analyse the issue.

[mishika]

Hello,

No, there is no need to update any plugin to achieve this.
What is the version of ProcessMaker, php and OS are you using?
Are you not able to see the dynaform even in Preview mode?

Best Regards
Mishika

[JeniferLawrence]

Hello Mishika,
Process Maker Version - 3.1.2+patch2 - Enterprise Edition:
PHP Version - 5.6.29
I am not able to preview this output through dynaform.

Regards,
Jenifer

[mishika]

Hello Jenifer,

Have you got SSL configured on your ProcessMaker?
Because the external libs included to setup calender use http and so possibly they are not accessible through https connection of ProcessMaker.
This can be one of the reason for it to not work properly.

Best Regards,
Mishika

[JeniferLawrence]

Yes ssl is configured. Apache/2.4.25 (Amazon) OpenSSL/1.0.1k-fips PHP/5.6.29

Now what i can do to make it work properly? Please help us.

[amosbatto]

JeniferLawrence, Export your DynaForm and post the json file here, and we can determine whether the problem is your form or your setup.

[JeniferLawrence]

Hi Amos,

Sorry for my delay in response.
I have attached the json file. Please help me to resolve.

[mishika]

Hello,

The form is not loading properly because one of the external lib links we are using is invalid.
You can see this in the Console tab of Developer tools when you preview the form.
The error you can see is: invalid link: http://multidatespickr.sourceforge.net/ ... spicker.js
Also, if you are using ssl, all the links will appear to be invalid.

You can use the following workaround:
For all the links that we are including in the external libs section, download those files and copy them in the folder /opt/processmaker/workflow/public_html/
In the external lib section of the form replace the links with http://<your-processmaker-domain>/filename

Hope this helps

Best Regards
Mishika

[JeniferLawrence]

Hi Mishika,

Thank you for the update. I will check and update you.

Regards,
Jenifer

[JeniferLawrence]

Hello Mishika,

http://code.jquery.com/ui/1.11.4/themes ... ery-ui.css,
http://code.jquery.com/ui/1.11.4/jquery-ui.js,
http://layout.jquery-dev.com/lib/css/la ... latest.css,
http://layout.jquery-dev.com/lib/js/jqu ... -latest.js,
http://multidatespickr.sourceforge.net/ ... spicker.js

These are the files which we are using.

http://multidatespickr.sourceforge.net/ ... spicker.js, this file has error. i am unable to download.

For the downloadable links, i am not able to find the folder "/opt/processmaker/workflow/public_html/" .

So, please advise me what i can do further.

Regards,
Jenifer

[mishika]

Hello,

Here I have attached the file for the multipicker.js
You can use this file and access that js.

jquery-ui.multidatespicker.js

(16.84 KiB) Downloaded 297 times

The /opt/processmaker is the directory where you have installed ProcessMaker. It might be some different directory where you have installed ProcessMaker. So, you have to place these files in the directory: <PM Install Directory>/workflow/public_html

Hope this helps

Best Regards
Mishika

[jackluter]

The links have the right information to arrange the calendar in the correct form.

[JeniferLawrence]

Hello Mishika and jackluter,

Thank you for the information provided.
We are testing it.

Regards,
Jenifer

[JeniferAntony]

Hello All,

This is not working.

[amosbatto]

Jenifer, I have prepared a sample process that shows the annual calendar in a panel in a DynaForm. Import this process and see if it works in your installation of PM:

Year's_calendar-1.pmx

(31.97 KiB) Downloaded 296 times

If it doesn't work, something is wrong/strange in your configuration.

[JeniferAntony]

Hello Amos,

Thank you. I will check and update you.

Regards,
Jenifer

[JeniferAntony]

Hello Amos,

No it is not working. The page is loading. Never ends.

Regards,
Jenifer

[amosbatto]

Turn on your web browser's debugger and try to open the DynaForm in preview mode in the form designer or when running a case. Look for JavaScript error messages in the debugger. On most browsers you can open the debugger by pressing F12, but see this documentation for your browser: http://wiki.processmaker.com/3.0/JavaSc ... JavaScript