Skip to content

Component Name: myNpProfileDisplayField

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

API Name: c-myNpProfileDisplayField Type: Display Component Target: Not exposed

Business Purpose

Reusable field display component for NP (Nurse Practitioner) profile pages. Shows a field label, value, and edit button. Handles special rendering for boolean values and rich text (Fellow Bio).

User Interface

Visual Description

  • Layout: Label + value + edit button
  • Key UI Elements: Field description, field value, edit link
  • Responsive: Adapts to container

Component Structure

Files

  • myNpProfileDisplayField.html - Template
  • myNpProfileDisplayField.js - Controller (34 lines)
  • myNpProfileDisplayField.js-meta.xml - Not exposed

JavaScript Controller

Properties (API)

@api fieldDescription

  • Type: String
  • Description: Field label (e.g., "Email:", "Fellow Bio:")

@api fieldValue

  • Type: Any (String, Boolean, etc.)
  • Description: Field value to display

@api buttonLabel

  • Type: String
  • Description: Edit button text

Computed Properties

isValueBoolean

  • Returns true if fieldValue is boolean type

isBooleanTrue

  • Returns true if fieldValue === true

isFellowBio

  • Returns true if fieldDescription === "Fellow Bio:"
  • Used to render rich text instead of plain text

booleanLabel

  • Converts boolean fieldValue to "Yes" or "No"
  • SIDE EFFECT: Mutates this.fieldValue (anti-pattern!)

Event Handlers

openModal()

  • Dispatches "openmodal" custom event
  • Parent component handles actual modal display

Events

Events Dispatched

openmodal

new CustomEvent('openmodal')
- No detail payload - Parent component opens edit modal

Styling

Custom CSS (not shown in JS file)

Usage Examples

<c-my-np-profile-display-field
    field-description="Email:"
    field-value={email}
    button-label="Change Email"
    onopenmodal={handleOpenModal}>
</c-my-np-profile-display-field>

<!-- Boolean field -->
<c-my-np-profile-display-field
    field-description="Active:"
    field-value={isActive}
    button-label="Change Status"
    onopenmodal={handleOpenModal}>
</c-my-np-profile-display-field>

⚠️ Pre-Go-Live Concerns

CRITICAL

  • Getter mutates state: booleanLabel getter (lines 20-28) modifies this.fieldValue - violates LWC best practices and causes unpredictable behavior!

HIGH

  • No unit tests: Zero coverage
  • Hardcoded "Fellow Bio:": Special logic tied to specific label string (line 16-18)
  • Boolean conversion permanent: Once fieldValue is converted to "Yes"/"No", original boolean lost

MEDIUM

  • No rich text sanitization: Assumes Fellow Bio is safe HTML
  • buttonLabel may not always apply: Component always shows edit button even if field not editable

LOW

  • Return empty string from getter: booleanLabel returns '' unnecessarily (lines 23, 26)

Maintenance Notes

Complexity: Low Key Notes: - CRITICAL: booleanLabel getter has side effect - must be refactored - Used throughout NP profile pages - Parent component manages edit modal - Boolean to "Yes"/"No" conversion is common pattern but implemented incorrectly - Fellow Bio gets special treatment with rich text rendering

Browser Compatibility: - Standard browser support - Rich text rendering via lightning-formatted-rich-text