This document explains the "Image with Preview" node type, a component used in dynamic forms for data input. This node is a specific type of attachment field that is optimized for image capture and display, offering a clear preview of the image directly within the input field. This functionality is crucial for collecting visual documentation related to operating fields, workstations, or server-side operations.
What is an Image with Preview Node?
The "Image with Preview" node is designed to allow users to capture a single photo and display it directly within the dynamic form input field. This differs from a standard attachment node by providing an immediate visual confirmation of the captured image, improving the user experience and ensuring the correct image has been obtained.
Key Characteristics
The "Image with Preview" node offers the following features:
-
Single Image Capture: Optimized for capturing a single photo per node.
-
Direct Photo Capture: The node includes the ability to capture photos directly from the device's camera.
-
Immediate Preview: The captured image is displayed directly within the input field, allowing for quick verification.
-
Maximum File Size: You can define the maximum file size allowed for the image.
-
Mandatory Photo (Optional): The node can be configured to require a photo, preventing form submission without one.
Node Display
The Image with Preview node displays consistently across different platforms.
On Server Side
The node presents an input field where users can upload or capture a single image, displaying a preview directly within the form.
On Mobile Devices (iPhone and iPad)
The display behavior is similar on mobile devices, rendering the input field with the image preview for compilation.
Dynamic Behavior with Expressions
The Image with Preview node supports the use of expressions, enabling dynamic behavior based on specific conditions. For example, expressions can be used to:
-
Make the node visible or hidden based on conditions.
-
Make the node mandatory based on conditions.
-
Automatically populate the field with a photo based on conditions.
-
Pre-fill the node based on conditions.
-
Set the node to read-only based on conditions. In read-only mode, the fields will appear in grey to clearly indicate that they cannot be edited.