Overview

As the DynaForm designer is based on HTML5, CSS3, Bootstrap and jQuery, a new control introduced for DynaForms on ProcessMaker 3.0 is the panel. A panel control adds an extra and powerful functionality to the forms by supporting any HTML and HTML5 code inserted inside its "content" property. To add this control to the design, drag and drop the following icon from the control toolbar to the DynaForm design.

This control is related to the "External Libs" property of the form, which allows adding external libraries and adding more functionality to the control. Depending on the necessities of the design, elements such as videos, maps, jquery layout functions, css, javascript, jquery files, etc. can be inserted.

Panel Properties

This control has two properties, which indicate its type and set its ID. Additionally, it features two properties in which the code is added and the border of the panel is set.

This property defines the size of the border in pixels. For example: 1px

*Available Version: Available from version 3.0.1

Border

This property allows defining the border size of the Panel in pixels "px". For example, if setting this property as:

When rendering the form the panel border is shown as follows:

Note: Be careful of not leaving a blank space between the size and the unit ("numberpx"). For example if defining 3 px the property will not work correctly.

Content

This property allows the insertion of HTML/HTML5 code inside the Panel control in the DynaForm designer. It is also related to the "External Libs" Property of the form, which adds external libraries to be used inside the DynaForm in order to use them inside the "Content" property of a panel control. Read the examples section to learn more about them.

Inserting Variables in a Panel's Content

If needing to insert a variable in a panel's content property, then only one
variable may be used and no other text or variables may be included.

Set the above trigger to execute before the DynaForm containing the panel control.
Then, set the panel's control property to contain:

@@panelContent

The only problem with this approach is that triggers are not fired before and after a DynaForm when it is opened by a Process Supervisor. If a process supervisor will need to access the form, then it is recommended to set the trigger to fire during routing in the previous task, so it is guaranteed to have set the @@panelContent variable before the supervisor opens the form.

This may be a problem, however, if the value of the @@firstName and @@lastName variables is set in the same task as the DynaForm containing the panel control. In that situation, it is recommended use JavaScript instead of a
trigger to set the contents of the panel control.

Add two hidden controls to the DynaForm
associated with with the "firstName" and "lastName" variables. Then add the following
JavaScript code to the DynaForm to set the contents of the panel which in this example
has the ID "nameInfo":

Go to the "External Libs" property and add the following libraries in the textarea of the property:
https://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js,
https://cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css

Also, in the properties of the form, go to the "JavaScript" property, click on "edit..." and in the editor window that is opened, add the following code:

The code before embeds the map using a google map's API key. Check this page to learn more about how to embed the map using an iframe, and check this guide to learn more about how to obtain an API key.

Finally, save the form and try the it by rendering it in the "Preview". The result will be the following:

Embedding Videos in Panels

For this example, let's use an iframe to embed a video from Vimeo so our DynaForm includes a section like the following:

Let's create a new DynaForm, open it and add a title control and a panel control into the design.

Click on the title control and go to its properties. In the "label" property add the text "This is the video". It will be the title of the DynaForm.

Now, click on the panel and go to its properties at the left side. Click on the button "edit..." and add the following code in the editor window that is opened:

Multiple Selection Calendar

For this example, let's use the jQuery plugin MultiDatesPicker and other jQuery libraries to manage multiple dates inside a panel control and render in a ProcessMaker DynaForm. The final result in the form will be the following:

Notice that the source in the code is a link to a video that will be displayed when the control is rendered

The final property is the "border" property which defines the size of the border in the control. For this example, add a noticeable border of 10px. Observe that when the control is rendered the border will be much more visible than before.