FillDesk — Profile Photo Add-on Installation Guide

This document explains how to install and configure the Profile Photo add-on: a Lightning component that shows the candidate photo extracted from CVs already parsed by FillDesk, directly on the record. It is written for the Salesforce administrator setting up the add-on in an org.

1. Requirements

The Profile Photo add-on is a package extension: it only adds an Apex controller, a permission set, and two LWCs on top of the core package. It cannot be installed on its own — install the core FillDesk package first if you haven't already.

2. Install the package

2.1 Core package (install first, if not already installed)

https://help.pipelaunch.com/en/article/filldesk-salesforce-installation-and-setup-guide-xu9vmm/

2.2 Profile Photo Add-on

https://login.salesforce.com/packaging/installPackage.apexp?p0=04tTr000000osLNIAY

Sandbox install: replace login.salesforce.com with test.salesforce.com in either URL when installing into a sandbox.

Install for Admins Only (or the profiles that need the feature), then continue to the permission set step below.

3. Assign the permission set

The add-on ships its own permission set and grants no access by default — installing the package alone does not expose anything to users.

Assign both permission sets to every user who should see the photo component:

1. Setup → Permission Sets.
2. Open FillDesk: Profile Photo.
3. Manage Assignments → Add Assignment → select the users → Assign.
4. Repeat for the base FillDesk permission set if the user doesn't already have it.

The permission set does not touch object or field permissions — it exists solely so the LWC's imperative Apex call is authorized. Any field-level security needed for step 5's imageUrlFields fallback (see below) is whatever FLS the user already has on that field.

4. Add the component to a Lightning Record Page

1. Go to the record where parsed CVs live (e.g. a Contact or Candidate), click the gear icon → Edit Page (or Setup → Object Manager → [Object] → Lightning Record Pages → edit an existing page).
2. In the Lightning App Builder component palette, find FillDesk Profile Photo (Powered by PipeLaunch) and drag it onto the page (e.g. into the right-hand sidebar).
3. Select the component to open its properties panel and configure it (see JSON schema below).
4. Save, then Activate the page for the relevant app/profile if it isn't active yet.

The component supports both Desktop and Phone form factors, so it also works on Lightning Record Pages assigned to the Salesforce mobile app.

5. Configuring the component (the Configuration (JSON) property)

When you select the component in App Builder, two properties are exposed:

5.1 JSON schema

{
  "hideWhenEmpty": true,
  "cardTitle": "Candidate Photo",
  "imageShape": "circle",
  "imageSize": "medium",
  "imageUrlFields": ["Photo_URL__c"]
}

All keys are optional — an empty string keeps every default.

Unknown keys are ignored (forward-compatible), so it's safe to leave extra keys in place across upgrades.

5.2 Validation

The JSON is validated entirely in the browser (not on the server) as soon as you type it into the property panel:

• Empty string → valid, uses all defaults.
• Not parseable JSON → "config is not valid JSON: <reason>", where the reason is the browser's own parser message. This is worth reading: a config that looks correct but fails here has usually been altered on the way in — curly quotes " pasted from a word processor instead of straight ", or a value that was cut short. Turn on Developer Debug Mode to see the exact string the component received in the browser console.
• Not a JSON object (e.g. an array) → "config must be a JSON object."
• hideWhenEmpty not a boolean → '"hideWhenEmpty" must be a boolean.'
• cardTitle not a string → '"cardTitle" must be a string.'
• imageShape not "square"/"circle" → '"imageShape" must be "square" or "circle".'
• imageSize not one of "auto"/"small"/"medium"/"large" → '"imageSize" must be "auto", "small", "medium" or "large".'
• imageUrlFields not an array of non-blank strings → '"imageUrlFields" must be an array of field API names.'

Every problem is reported at once, not just the first one. If the JSON is invalid, the component shows the error(s) and skips the Apex call entirely — no data is requested from the server until the configuration is valid.

5.3 Controlling the photo size

By default the photo scales to the width of the region you dropped the component into. Because CV photos are usually portraits with unpredictable proportions, that can make the card very tall — a 2:3 photo in a wide main region can end up taller than the screen. imageSize bounds it:

{ "imageSize": "medium" }

"medium" is roughly passport-photo scale and is the usual answer when a photo is "too big".

How the presets behave:

• The height is what the preset really controls. Because the photo already scales to the component width, capping the height is what gives you a predictable card size — one setting renders at the same size in a narrow sidebar and in a wide main region alike. The width limit is only there so an unusually wide photo (a landscape scan or a group shot) isn't drawn as a letterbox strip.
• The photo keeps its own proportions and is never stretched. It's scaled to fit inside the box.
• The photo is never wider than the card, whatever the preset says — in a region narrower than the limit above, it shrinks to fit.
• A photo narrower than the card is centered in it.
• With "imageShape": "circle", the same number becomes the circle's diameter, so a medium circle takes up as much of the page as a medium square. The photo fills the circle without distortion (it's cropped from the centre, as "circle" always does).
• A photo smaller than the box is not enlarged to fill it, so small headshots stay sharp instead of going blurry. Use "auto" if you would rather they scale up to the card width.
• Clicking the photo still opens the full-screen view, which always shows the whole picture at full size regardless of this setting. That's the point of bounding the card photo — the detail is one click away.

5.4 Where the photo actually comes from (not configurable)

The primary photo source is not driven by this JSON — it's read from the parsed-CV documents FillDesk already generated for the record. The Apex service looks for a content.picture.url value in the newest parsed CV JSON attached to the record, e.g.:

{
  "content": {
    "name": "Jordan Sampleton",
    "picture": {
      "url": "data:image/png;base64,iVBORw0KGgo..."
    }
  }
}

Only data:image/... values are accepted at that path (a plain https:// URL there is rejected, since displaying it would require a CSP Trusted Site the add-on doesn't ship). If a record has multiple parsed CVs with photos, the component shows them as a carousel with indicator dots, newest first. There is no config option to change this JSON path — it's fixed to match FillDesk's own parsing output.

6. Bonus: visualizing a plain record field that holds a picture URL

If a record has no parsed CV with a photo — or you want to show a photo sourced from somewhere else entirely, like a LinkedIn/HR-system sync field — use imageUrlFields to point the component at one or more record fields instead. This is a pure fallback: it only kicks in when no parsed document supplies a photo.

Example: show the value of a custom field Photo_URL__c on Contact whenever no CV photo is available, as a rounded avatar bounded to a small size, and hide the component entirely on records with neither:

{
  "hideWhenEmpty": true,
  "cardTitle": "Contact Photo",
  "imageShape": "circle",
  "imageSize": "small",
  "imageUrlFields": ["Photo_URL__c"]
}

You can list more than one field — they're tried in order, and the first one with a value wins:

{
  "imageUrlFields": ["LinkedIn_Photo_URL__c", "Photo_URL__c"]
}

Notes when using this fallback:

• Each entry must be the exact API name the field has in the current org, including any namespace prefix (e.g. ns__Field__c), since the names are passed directly into the standard getRecord Lightning Data Service wire.
• The field's value can be a normal https:// URL or a data:image/… data URI.
• A remote https:// image only renders if its host is added as a CSP Trusted Site (img-src) in Setup → CSP Trusted Sites — this add-on does not add one for you, since the source is admin-defined and arbitrary.
• The user still needs field-level security (read access) on any field listed here — the permission set in Section 3 does not grant FLS.

7. Quick checklist

1. Core FillDesk package installed (v1.39.0-2 or later).
2. Profile Photo add-on package installed.
3. FillDesk permission set assigned to users.
4. FillDesk: Profile Photo permission set assigned to users.
5. Component added to the target object's Lightning Record Page via App Builder and the page activated.
6. Configuration (JSON) set as needed (card title, shape, size, empty-state behavior, and/or imageUrlFields fallback).
7. If using imageUrlFields with a remote https:// field, its host is added to CSP Trusted Sites.
8. After changing the configuration, hard-refresh the record page (Ctrl/Cmd + Shift + R) — Lightning caches component resources aggressively.

Updated on: 28/08/2026