Camera

Overview

The Camera component enables native image capture functionality directly within your Salesforce pages. It leverages the device's hardware (laptop webcam or mobile camera) to capture photos without requiring the user to leave the application or upload files manually.

This component is designed to streamline workflows that require visual documentation, automatically saving captured images as Salesforce Files (ContentDocument) and linking them to the current record.

---

Common Use Cases

Use Case	Description	Example
Field Service	Technicians can document site conditions or completed repairs directly on mobile.	Linking a photo of a repaired HVAC unit to a Work Order record.
Inspections & Audits	Real-time visual proof for compliance checks and safety audits.	Capturing images of property damage during a housing inspection to attach to a Case.
Customer Support	Allow agents or customers (Experience Cloud) to submit visual evidence of issues.	A customer uploading a photo of a damaged shipment directly to a support portal Claim.
Sales & Retail	Document visual merchandising, shelf displays, or event setups.	A sales rep taking a photo of a store display to verify compliance with a marketing agreement.
HR & Identity	Capture standardized profile photos for identification.	Updating a User or Employee record with a fresh profile picture.

---

Configuration

Select the Camera component on the canvas to access its properties. The configuration is divided into Data/Storage, Display settings, and Interaction events.

Data & Storage (Crucial)

These settings determine where the photo is stored and which Salesforce record it attaches to.

Value (Variable - Required)

Bind this to a Text Variable (for single capture) or Text Collection (for multi-capture).

Output: Upon successful capture, this variable will store the Salesforce ContentDocumentId(s) of the new file(s).

Save as Content Document (Boolean)

• Checked (Recommended): Automatically saves the image as a Salesforce File (ContentDocument) immediately upon confirmation.

• Unchecked: Returns Base64 image data only. Requires advanced custom logic (Apex/Flow) to process and is not recommended for standard use cases.

Content Document Linked Entity Id

• Visible only when "Save as Content Document" is checked.

• Purpose: Specifies the Salesforce Record that the photo should be attached to.

• Configuration: Usually bound to the current page's record ID using $Component.recordId (or @recordId).

Display & Behavior

Control how the camera appears to the user and how the capture workflow operates.

Setting	Description
Display As	Inline: Embeds the live camera feed directly on the page. Button: Shows a "Take Photo" button that opens a modal/fullscreen camera when clicked.
Allow Multiple Captures	If True, users can take several photos in one session. Requires the Value attribute to be a Collection Variable.
Display Captured Photos	If True, shows thumbnails of taken photos below the camera view for review before saving.
Display Countdown	Adds a delay (in seconds) between pressing the shutter and taking the photo. Useful for hands-free scenarios.

Visual Customization

Fine-tune the aesthetics of the camera frame.

Aspect Ratio

Sets the frame dimensions (e.g., 1:1 Square, 4:3 Standard, 16:9 Widescreen).

Crop Fit

Determines if the video feed should Cover (fill the frame, potentially cropping edges) or Contain (show full feed, potentially with black bars).

Icons & Labels

You can customize the specific icons and text labels for the Shutter, Delete, and Confirm buttons to match your brand language.

---

Configuring Interactions

The Camera component supports unique events that trigger other actions (like Flows or Toast notifications).

Event	Trigger	Common Use Case
On Image Capture	Fires after the user successfully takes a photo and clicks confirm.	Show Toast ("Photo Saved!") or Navigate to the next step in a wizard.
On Start Camera	Fires when the camera preview opens (or page loads if Inline).	Logging analytics or setting a "Camera Active" variable.
On Stop Camera	Fires when the user closes the camera or cancels the action.	Resetting variables or navigating back to a home screen.

---

Example

Adding Photo Evidence to a Case

1

Add Camera Component

Add the Camera component to the canvas.

2

Configure Camera

• API Name: evidenceCamera

• Label: "Attach Photo Evidence"

• Display As: button

• Allow Multiple Captures: Checked

• Save as Content Document: Checked

3

Add Interaction to Button

• Select the evidenceCamera component.

• Go to the Interactions panel.

• Add an action to the On Image Capture event (or similar success event).

• Action Type: Show Toast

• Configure Toast: Variant success, Title Success, Message Photo(s) attached to Case!.

Ensure the Save as Content Document option is enabled (checked) on the component, AND that the Content Document Linked Entity Id field is set to the current record's ID (by binding it to $Component.recordId using the resource selector)

Result: User clicks "Attach Photo Evidence", takes photos, confirms. The photos are saved as Files and automatically linked to the Case. A success toast confirms the action.

Key Considerations

• Permissions: Users need device permissions to access the camera. They also need Salesforce permissions to create ContentDocument (Files) and potentially ContentDocumentLink records if saving/linking files.

• Mobile First: While functional on desktops with webcams, the user experience is typically optimized for the Salesforce Mobile App or mobile browsers.

• Save as Content Document: Enabling this is the simplest way to persist images in Salesforce. If disabled, handling the output data requires custom logic (Flow/Apex).

• Network Connection: Required for saving files to Salesforce. Consider offline capabilities if necessary (this may require different solutions).

• Storage Limits: Be mindful of Salesforce file storage limits.

---

In Summary

The Avonni Camera component offers an integrated, no-code solution for capturing images directly within your Salesforce UI on Lightning Pages, streamlining workflows for field service, inspections, evidence gathering, and more, particularly in mobile use cases.