The Camera form element alllows the user to create and upload a picture directly to the form using the camera of his device (laptop, tablet...) when the app is executed. App users can, for example, create a profile picture directly. Or they can use an image to record damage to delivered goods. You will find the camera element in the Complex category.

Example: Capturing Damage to a Delivery

In ACME's Procurement Process, the employees fill out the form Inspection of Delivery after receipt of the goods. In this form is recorded whether the delivery has arrived complete and undamaged.


Irene Adler would like to give the employees the opportunity to record defects in delivered goods to speed up processing in case of returns. Therefore she inserts the camera element Picture of Damage/Defects into the form.

During execution, Irene describes the defect. Then she wants to take a picture of the damage and clicks on the camera field.

The camera button opens the functionality of the camera that is built into Irenes' device. The browser also opens a dialog asking whether the camera is allowed to be used. The view of the message depends on the browser.

Irene confirms the query so she can use the camera.


Now Irene can take a picture. She positions the damaged bulb in front of the camera and uses the button  to take a photograph.

The photo is then displayed in the camera window.

Irene now wants to highlight the damage in the image. With the mouse pointer pressed, she can paint in the picture.

Irene now has three options according to the buttons in the header:

  • : She can save the picture and transfer it to the form.
  • : She can delete the image and retake the photo.
  • : She can cancel the entire action and return to the form.

Irene decides that it won't be necessary to highlight any content in the image and takes a new picture.

She confirms the new picture by clicking on the button . The photo is displayed in field Picture of Damage/Defects.

After Irene has selected the delivery note to upload, she can save her entries.

  • No labels