ProcessMaker 4.1
ProcessMaker API Documentation
ProcessMaker Examples
Powered By GitBook
Screen Types
Understand the different types of Screens.

Overview

ProcessMaker provides the following Screen types, though some require packages to be installed.

Advanced-Type Screen

The Advanced Screen package must be installed.
Use the Advanced-type Screen, part of the Advanced Screen package, to design your own advanced forms using HTML syntax and JavaScript. This is an ideal solution for highly technical designers to create their own form designs and functionality.
After a new Advanced-type Screen is created, Screen Builder displays a template that contains a sample Advanced-type Screen.
The Advanced Screen type is a highly technical solution only for advanced HTML and JavaScript designers intended only for specific solutions. ProcessMaker Support cannot support nor troubleshoot advanced forms.
As a best practice when developing Advanced-type Screens, design your Screen outside of ProcessMaker to test its functionality, and then copy-and-paste your code into Screen Builder to test your Screen in Requests, Tasks or Collections. The Advanced Screen type cannot be previewed in Screen Builder.
Please use at your own risk.
Use the following template to study how to design your Advanced-type Screen.
1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
<meta charset="utf-8">
5
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
6
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
7
</head>
8
<body>
9
<div class="card">
10
<div class="card-body">
11
<h5 class="card-title">Advanced screen</h5>
12
<form onsubmit="submitForm(event)">
13
<div class="form-group">
14
<input class="form-control" type="text" name="email" placeholder="email" id="email">
15
</div>
16
<button type="submit" class="btn btn-primary">Submit</button>
17
</form>
18
</div>
19
</div>
20
21
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
22
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
23
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
24
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.js"></script>
25
<!--Do Not Delete Below -->
26
<script>/** LOAD_PM_VARIABLES **/</script>
27
<!--Do Not Delete Above -->
28
<script defer>
29
axios.defaults.headers.common['X-CSRF-TOKEN'] = PM_CSRF_TOKEN;
30
axios.defaults.headers.put['Content-Type'] = 'application/json;charset=UTF-8';
31
32
// Load values from request data
33
$("#email").val(PM_REQUEST_DATA.email);
34
35
/**
36
* Submit the form and complete the task
37
*/
38
function submitForm(event) {
39
event.preventDefault();
40
axios.put(`/api/1.0/tasks/${PM_TASK_ID}`, {
41
status: 'COMPLETED',
42
data: {
43
email: $("#email").val(),
44
}
45
});
46
}
47
</script>
48
</body>
49
</html>
Copied!

Conversational-Type Screen

The Conversational Form package must be installed.
Use the Conversational-type Screen, part of the Conversational Form package, to design functional rule-based modern chat style experiences. When a Conversational-type Screen renders, that Screen displays as a streaming interactive chat box from which the Request participant interacts with the automated chat. See What is a Conversational Screen? for more information regarding how Conversational-type Screens function.
The Conversational type provides the following controls in Screen Builder:

Display-Type Screen

Use the Display-type Screen to display information or allow Request participants to download files. The Display type has limited functionality compared the Form type, but dashboards use Display-type Screens to display key performance indicators (KPIs) and commonly used information for specific business stakeholders in your organization. The Display type provides the following controls in Screen Builder:

Email-Type Screen

The Send Email package must be installed.
Use the Email-type Screen to compose the email body for email messages to be used with the Send Email connector. The Email type provides the following controls in Screen Builder:
Do not use a Screen type other than the Email type when using the Send Email connector. Otherwise, you will not be able to reference any Screens from the Email control in Process Modeler to specify which Screen to use for the email body content.

Form-Type Screen

Use the Form-type Screen to design interactive and complex multi-page forms. Below are a few ways that Request participants might interact with a digital form:
    Enter information, such as name and email address, to apply for a loan.
    Approve the department budget.
    Upload or download documents.
All Screen controls in Screen Builder are available for the Form type.

Related Topics

Last modified 4mo ago