ProcessMaker API Documentation
ProcessMaker Examples

Screen Types

Understand the different types of ProcessMaker Screens.

Overview

ProcessMaker provides the following ProcessMaker Screen types. Note that not all ProcessMaker Screen types are available in the ProcessMaker open-source edition.

Advanced-Type Screen

The Advanced Screen package is not available in the ProcessMaker open-source edition. Contact ProcessMaker Sales or ask your ProcessMaker sales representative how the Advanced Screen package can be installed in your ProcessMaker instance.

Use the Advanced-type ProcessMaker 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 ProcessMaker Screen is created, Screen Builder displays a template that contains a sample Advanced-type ProcessMaker 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 ProcessMaker 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 ProcessMaker 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 ProcessMaker Screen.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<div class="card">
<div class="card-body">
<h5 class="card-title">Advanced screen</h5>
<form onsubmit="submitForm(event)">
<div class="form-group">
<input class="form-control" type="text" name="email" placeholder="email" id="email">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.js"></script>
<!--Do Not Delete Below -->
<script>/** LOAD_PM_VARIABLES **/</script>
<!--Do Not Delete Above -->
<script defer>
axios.defaults.headers.common['X-CSRF-TOKEN'] = PM_CSRF_TOKEN;
axios.defaults.headers.put['Content-Type'] = 'application/json;charset=UTF-8';
// Load values from request data
$("#email").val(PM_REQUEST_DATA.email);
/**
* Submit the form and complete the task
*/
function submitForm(event) {
event.preventDefault();
axios.put(`/api/1.0/tasks/${PM_TASK_ID}`, {
status: 'COMPLETED',
data: {
email: $("#email").val(),
}
});
}
</script>
</body>
</html>

Conversational-Type Screen

The Conversational Form package is not available in the ProcessMaker open-source edition. Contact ProcessMaker Sales or ask your ProcessMaker sales representative how the Conversational Form package can be installed in your ProcessMaker instance.

Use the Conversational-type ProcessMaker Screen, part of the Conversational Form package, to design functional rule-based modern chat style experiences. When a Conversational-type ProcessMaker 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 ProcessMaker Screens function.

The Conversational type provides the following controls in Screen Builder:

Display-Type Screen

Use the Display-type ProcessMaker 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 ProcessMaker 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 in your ProcessMaker instance to use the Email-type ProcessMaker Screen. The Email package is not available in the ProcessMaker open-source edition.

Use the Email-type ProcessMaker 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 ProcessMaker Screen type other than the Email type when using the Send Email connector. Otherwise, you will not be able to reference any ProcessMaker 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 ProcessMaker 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 ProcessMaker Screen controls in Screen Builder are available for the Form type.

Related Topics