Camera 🆕

The Avonni Camera component allows users to capture images directly using their device's camera from within an Avonni Dynamic Component on Salesforce Lightning Pages. This provides a seamless way to add visual documentation, evidence, or profile pictures directly to Salesforce records without leaving the application.

Overview

This component integrates camera functionality into your custom interfaces. Key features include:

• Direct Image Capture: Users can activate their device camera and take photos within the component.

• Flexible Display: Show the camera view inline or launch it via a button.

• Capture Options: Configure features such as countdown timers, photo preview, and single or multiple captures per session.

• Salesforce Integration: Automatically save captured images as Salesforce Files (ContentDocument) and get their IDs.

• Customizable Interface: Adjust component size, aspect ratio, button icons, and labels.

Use Cases

The Camera component is especially valuable in mobile scenarios using the Salesforce Mobile App, but can also function on desktops/laptops with cameras:

• Field Service: Technicians capture images of equipment damage, completed work, or site conditions, linking them directly to Work Orders or Assets.

• Inspections & Audits: Documenting findings visually during inspections (e.g., property condition, safety compliance).

• Sales: Reps taking photos of product placements, event setups, or customer whiteboards during visits.

• Customer Service: Allowing customers (in Experience Cloud) or agents to upload photos related to a case (e.g., damaged product).

• Employee Records: Capturing profile pictures for User records or custom employee objects.

• Insurance Claims: Submitting photographic evidence for claims.

Adding the Camera Component

Drag and Drop: From the Component Library (left panel), find the "Camera" component and drag it onto your canvas.

Configuration

Select the Camera component on the canvas to access its properties in the Properties Panel (right panel).

Basic Properties

These properties control the fundamental labeling and identification.

• API Name: (Text) A unique identifier for this component instance (e.g., SitePhotoCapture, EvidenceCamera).

• Label: (Text, Optional) A label displayed above or alongside the component, depending on the variant. Example: "Take Site Photo:", "Upload Proof:".

• Field Level Help: (Text, Optional) Help text displayed next to the label.

Core Functionality

These settings define how the camera operates and how users interact with it.

• Value: (Text or Text Collection - Output) This property typically holds the result of the capture.

  • Data Binding: You should usually bind this to a Text Variable (for single capture) or a Text Collection Variable (if 'Allow multiple captures' is enabled).

  • If 'Save as Content Document' is enabled, this variable will be populated with the Salesforce ContentDocumentId(s) of the saved image(s) after capture. You can then use this ID in subsequent interactions (like linking the file to a record).

• Display As: (Select) Choose how the camera interface is presented:

  • inline: The live camera preview is embedded directly within the component's area on the page.

  • button: A button is displayed. Clicking the button opens the camera interface (often full-screen or modal, especially on mobile).

• Display Captured Photos: (Boolean - Checkbox) If enabled, shows thumbnails or previews of the photos the user has taken within the current session, below the camera view or after capture.

• Display Countdown: (Boolean - Checkbox) If enabled, shows a countdown timer (e.g., 3...2...1...) before the photo is actually taken after the user initiates capture.

• Countdown Duration: (Number) If 'Display Countdown' is enabled, specifies the countdown length in seconds (e.g., 3).

Multi-Capture Settings

These settings apply only if multiple captures are allowed.

• Allow Multiple Captures: (Boolean - Checkbox)

  • Checked: Users can take multiple photos in one session before confirming.

  • Unchecked (Default): Users capture only one photo per session.

• Image Layout: (Select - If Allow Multiple Captures is enabled) Defines how multiple captured photo previews are arranged (e.g., grid, carousel).

• Default Image Title: (Text - If Allow Multiple Captures is enabled) Sets a default base title for captured images saved as Salesforce Files. You might use this with formulas or variables to create meaningful names (e.g., "{!CaseNumber}Evidence").

Output/Saving

These settings control how the captured images are saved within Salesforce and linked to relevant records.

• Save as Content Document: (Boolean - Checkbox)

  • Enabled (Recommended): This is the most common and most straightforward method for handling captured images. When this is checked, the component automatically saves the captured image(s) as Salesforce File (ContentDocument) records when the user confirms the capture.

  • Disabled: If unchecked, the component's behavior for outputting image data may differ (e.g., potentially providing Base64 data via the Value property). You would then be responsible for implementing custom logic (likely using a Flow or Apex triggered by an interaction) to manually process the output data, create the Salesforce File record, and create the necessary ContentDocumentLink record to associate it with another record. This approach is significantly more complex and generally not recommended unless you have precise requirements.

• Content Document Linked Entity Id: (Text - Appears and is relevant ONLY when 'Save as Content Document' is enabled)

  • Purpose: This critical setting tells Avonni which specific Salesforce record the newly captured image File should be automatically linked to. It populates the LinkedEntityId field on the ContentDocumentLink junction record that Salesforce creates.

  • How to Set: You need to provide the 15 or 18-character Salesforce Record ID of the record you want the file linked to. Use the resource selector icon (x) next to the property to bind this dynamically. Common and recommended sources are:

    • $Component.recordId (via Resource Selector): (Most Common Use Case) If your Dynamic Component has its Target Page Object set and is placed on a record page (e.g., an Account page), select Component > recordId (often displayed as @recordId). This automatically links the captured image to the current record being viewed on the page.
    • A Variable Resource: Select a Variable resource (e.g., {!inputRecordId}) that holds the ID of the record you want to link to. This is common if the Camera component is inside a modal or panel that received a record ID as input.

    • A Field from a Record Variable: If you have loaded a record into a Record Variable (e.g., {!relatedAccount}), you could potentially select its ID field (e.g., {!relatedAccount.Id}).

Advanced Appearance & Behavior

These properties allow fine-tuning of the look and interaction state.

• Size: (Select) Controls the approximate size of the component frame (especially for 'inline' display): small, medium, large, responsive.

• Video Aspect Ratio: (Select) Sets the aspect ratio for the live camera preview (e.g., 1:1, 4:3, 16:9). Choose one that matches typical device orientations or desired output.

• Crop Fit: (Select) Determines how the live video feed fits within the defined aspect ratio (e.g., Cover - fills the area, may crop; Contain - shows the entire feed, may have letterboxing).

• Buttons Icons: (Icon Selector) Customize the icons used for standard actions within the component:

  • Capture Photo Button Icon

  • Delete Photo Button Icon

  • (Other potential icons like switch camera, confirm, etc.)

• Labels: (Text Inputs) Customize the text labels displayed on buttons or other elements within the camera interface (e.g., change "Capture" to "Take Photo").

• Disabled: (Boolean - Checkbox) Disables the entire component, preventing interaction.

• Read Only: (Boolean - Checkbox) Typically not applicable for camera capture, but might prevent deleting already captured previews if used.

• Required: (Boolean - Checkbox) Makes capturing at least one image mandatory before proceeding (usually used with form validation).

• Visible: (Boolean) Controls the overall visibility of the component.

Configuring Interactions

Beyond its capture functionality, the Camera component enables you to trigger standard Avonni Interactions based on specific events, allowing for more dynamic workflows. You configure these in the Interactions section of the Properties Panel when the Camera component is selected.

On Image Capture

• When it Fires: This event typically triggers after the user successfully captures one or more images and confirms the action (e.g., clicks "Done" or "Save" within the camera interface, especially if Save as Content Document is enabled).

• Common Use Cases:

  • Display a Show Toast message confirming the image(s) were saved or are ready for linking (e.g., "Photo evidence captured!").

  • Update Record Variable / Execute Flow: Trigger an action to update a field on a related record indicating a photo was added (e.g., set Photo_Taken__c to true).

  • Navigate: Automatically direct the user to a different location after successful capture.

  • (If NOT using 'Save as Content Document'): Trigger an Execute Flow or Apex action to process and save the image data output by the component.

  • Link Saved File (if needed): Trigger an Execute Flow to create the ContentDocumentLink record if you didn't use the Content Document Linked Entity Id setting but did use Save as Content Document and captured the ID in the Value variable.

On Start Camera

• When it Fires: This event triggers when the camera preview becomes active (either when the component loads if Display As is inline, or when the user clicks the button if Display As is button).

• Common Use Cases: Generally less common for significant actions, but could be used to:

  • Trigger an Execute Flow for logging/auditing purposes.

  • Set Variable Value to track the camera's active state.

On Stop Camera

• When it Fires: This event triggers when the camera view is closed or deactivated, potentially without a successful capture (e.g., user clicks a 'Cancel' button if available, or navigates away).

• Common Use Cases:

  • Navigate: Return the user to a previous state or screen.

  • Set Variable Value: Update a variable to indicate that the camera is no longer active.

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.