Add a control that captures a photo or video from the Screen user.
The Photo/Video control has the following functionality:
Designing the control: While designing the Screen as a Process Designer, select whether a selected Photo/Video control is used to capture a photo or video when the Screen user interacts with that control. Optionally select a custom overlay that displays over the real-time capture area.
Using the control: Based on how the Process Designer configured that Photo/Video control, the Screen user may capture one photo or video directly from a laptop camera or mobile device. While doing so, an overlay image can display over the control to guide the Screen user to frame what the control captures. That user may evaluate in real-time with the control overlay whether the capture is appropriate and adequate quality. For example, the overlay can help frame taking a photograph of oneself or a national ID card to submit for an application process.
Send the captured video or photo to ProcessMaker IDP: After the photo or video is captured, send it to a ProcessMaker IDP folder for processing using a specified document type. Note that prior to the Screen user capturing a photo or video, ensure to configure which ProcessMaker IDP folder(s) the captured photo or video may be sent after capture. You may need to ask your ProcessMaker IDP Administrator for assistance.
This control is only available for Form-type Screens. See Screen Types.
Watch the following product tour to learn how to use a Photo/Video control.
Follow these steps to add this control to the Screen:
Configure the Photo/Video control. See Settings.
Validate that the control is configured correctly. See Validate Your Screen.
Below is a Photo/Video control.
The Image control has the following configurable settings in the Properties Panel:
Expand the Variable panel from the Properties Panel on the right to configure the following properties:
Expand the Configuration panel from the Properties Panel on the right to configure the following properties:
Expand the Design panel from the Properties Panel on the right to configure the following properties:
Expand the Advanced panel from the Properties Panel on the right to configure the following properties:
From the Controls Menu on the left, expand the Input Fields category, and then locate the Photo/Video icon .
Drag and drop the control to the Screen Builder canvas. Existing controls in the Screen will adjust positioning based on where you drag the control.
Edit the default Variable Name setting value for this control if necessary. The Variable Name setting value represents data in this control during Requests. Ensure that the Variable Name setting value is a unique name from other controls in this Screen and contains at least one letter. This is a required setting.
Edit the default label that displays for this control if necessary. New Photo Video is the default value.
Select Make Required to indicate that this control is required for the user to submit the Screen. This option is not selected by default.
Enter text that provides additional guidance on this control's use. This setting has no default value.
Video: Select the Video option to capture a video from the device.
Enable the Send to IDP toggle key. The Document Type setting displays.
Enter the file name that the control saves the capture. Optionally use mustache syntax to set this value. This is a required setting.
Below is an example in Preview mode.
Select the background color that displays for this control. Optionally, click the Clear Color Selection option to remove the selected color.
Select the text color that displays for this control. Optionally, click the Clear Color Selection option to remove the selected color.
Enter the value to represent this control in custom CSS syntax when in Custom CSS mode. As a best practice, use the same CSS Selector Name value on different controls of the same type to apply the same custom CSS style to all those controls.
Specify an expression that indicates the condition(s) under which this control displays. See Expression Syntax Components. If this setting does not have an expression, then this control displays by default.
Both: The control displays on both desktop and mobile devices. Both toggle keys are enabled by default.