Component Name: fellowProfileView¶

Last Updated: 2025-09-29 Source Code: https://bitbucket.org/i2cinc/i2c.salesforce.metadata/src/STAGING/force-app/main/default/lwc/fellowProfileView

API Name: c-fellowProfileView Type: Page Component Target: lightningCommunity__Page, lightningCommunity__Default

Business Purpose¶

This component displays the detailed profile page for an AANP Fellow, showing their photo, name, title/credentials, and biographical information. It's accessed from the Fellows search/listing page when users click on a Fellow's name to view their full profile.

User Interface¶

Visual Description¶

Layout: Single-column layout with photo on left, text on right
Key UI Elements: Profile photo, name with title, rich text biography
Responsive: Photo and text stack on mobile

Component Structure¶

Files¶

fellowProfileView.html - Template (30 lines)
fellowProfileView.js - Controller (79 lines)
fellowProfileView.js-meta.xml - Metadata
fellowImagePlaceholder.js - Placeholder image utility

HTML Template Structure¶

<template>
  <div class="container fellow-profile-view">
    <h1>Fellow Information</h1>
    <div class="d-flex gap-4">
      <p class="profile-image">
        <img src={fellowProfile.photo} width="100px" height="200px" />
      </p>
      <div>
        <p><strong>{fellowProfile.name}</strong> {fellowProfile.title}</p>
        <p>
          <lightning-formatted-rich-text value={fellowProfile.bio} />
        </p>
      </div>
    </div>
  </div>
</template>

Key Template Features: - Conditional rendering based on photo availability - lightning-formatted-rich-text for bio HTML content - Bootstrap flex layout

JavaScript Controller¶

Properties (API)¶

None - component gets data from URL parameters

Tracked Properties¶

@track fellowProfile¶

Type: Object
Purpose: Stores fellow's name, photo, title, bio
Updated When: After getFellowDetailsById returns

Wire Adapters¶

@wire(CurrentPageReference)¶

@wire(CurrentPageReference)
getStateParameters(currentPageReference) {
    if (!this.hasProcessed && currentPageReference && currentPageReference.state?.fellowId) {
        this.hasProcessed = true;
        this.fellowId = currentPageReference.state.fellowId;
        // Load fellow data
    }
}

Purpose: Retrieves fellowId from URL parameters Fields Retrieved: fellowId from URL state Error Handling: hasProcessed flag prevents duplicate loading

Private Methods¶

mapFellowFields(fellow)¶

Purpose: Maps Account fields to fellowProfile object Returns: { name, title, bio } Called By: After getFellowDetailsById success

decodeImage(photoField, fileServerUrl)¶

Purpose: Extracts and decodes image URL from Photo__c HTML field Returns: Decoded image URL string Called By: After getFileServerUrl success

Events¶

None

Styling (CSS)¶

Custom CSS Classes¶

.fellow-profile-view: Container
.profile-image: Image wrapper
Bootstrap utility classes (d-flex, gap-4, etc.)

Dependencies¶

Lightning Web Components (Base)¶

lightning-formatted-rich-text

Custom LWC Components¶

None

Apex Classes¶

AccountController.getFellowDetailsById(): Gets Fellow Account details
AccountController.getFileServerUrl(): Gets file server base URL

Salesforce Objects & Fields¶

Account: Name, Fellow_Title__c, Fellow_Bio__c, Photo__c

Static Resources¶

fellowImagePlaceholder.js: Placeholder image constant

Configuration¶

Component Meta XML¶

<targets>
    <target>lightningCommunity__Page</target>
    <target>lightningCommunity__Default</target>
</targets>

User Interactions¶

None - read-only display

Data Flow¶

Input Data Flow¶

URL parameter: ?fellowId=001...
    ↓
@wire(CurrentPageReference)
    ↓
getFellowDetailsById(fellowId)
    ↓
getFileServerUrl()
    ↓
decodeImage(Photo__c)
    ↓
fellowProfile → Display

Performance Considerations¶

Loads single Account record
Image decoded client-side (minimal processing)
Placeholder image imported as constant (small payload)

ARIA Labels: - Image needs alt text (missing)

Keyboard Navigation: - Not applicable (no interactive elements)

Screen Reader Support: - Headings properly structured - Rich text content accessible

Color Contrast: - Depends on rich text content

Testing¶

Jest Tests¶

Test File: __tests__/fellowProfileView.test.js exists but not reviewed Coverage: Unknown

Manual Testing Checklist¶

[ ] Valid fellowId loads profile
[ ] Invalid fellowId handling
[ ] Photo displays correctly
[ ] Placeholder shown when no photo
[ ] Rich text bio renders HTML
[ ] Mobile responsive layout
[ ] Long names/titles wrap correctly

Usage Examples¶

/fellowprofile?fellowId=0010R00000XYZ123

In Fellows Search Component¶

// Navigate to profile
this[NavigationMixin.Navigate]({
    type: 'standard__webPage',
    attributes: {
        url: `/fellowprofile?fellowId=${fellow.Id}`
    }
});

Changes & History¶

2025-09-29: Latest version

⚠️ Pre-Go-Live Concerns¶

CRITICAL - Fix Before Go-Live¶

No error handling: If getFellowDetailsById fails, user sees blank page
Missing alt text on image: Accessibility violation (line 9-12)

HIGH - Address Soon After Go-Live¶

No loading state: Component shows nothing while loading
hasProcessed not reset: If user navigates back/forward, may not reload
Photo decoding could fail: decodeImage returns empty string on failure with no fallback
No validation of fellowId: Could pass invalid ID format

MEDIUM - Future Enhancement¶

Add back button: Navigate back to fellows search
Add social sharing: Share fellow profile
Add print styling: Allow printing profile
Cache fellow data: Reduce API calls for repeat visits

LOW - Monitor¶

Console error handling: Uses console.error (lines 37, 43)
Fixed image dimensions: 100x200px may not suit all photos
DOMParser for decoding: Lines 59-61 use DOMParser which adds overhead

Maintenance Notes¶

Complexity: Low Recommended Review Schedule: Annually

Key Maintainer Notes: - Component displays public fellow information - Linked from fellowsSearch component - Photo decoding logic duplicated from other components (consider extracting to utility) - Rich text bio could contain XSS if not properly sanitized in Salesforce - Component has no error recovery - shows blank page on error - fellowId comes from URL - ensure proper validation in Apex

Browser Compatibility: - Chrome: Latest - Firefox: Latest - Safari: Latest - Mobile: iOS 12+, Android 8+