Skip to content

Component Name: myNpProfileEditModal

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

API Name: c-myNpProfileEditModal Type: Form Component (Modal) Target: Not exposed

Business Purpose

Reusable modal dialog for editing NP (Nurse Practitioner) profile fields. Supports multiple field types (text, textarea, rich text, picklist, multi-picklist, checkbox, number, year) with custom validation logic for specific fields like NPI number, credentials, graduation year, and years practiced.

User Interface

Visual Description

  • Layout: Modal dialog with dynamic form input
  • Key UI Elements: Title, label, input (varies by type), save/cancel buttons, error message
  • Responsive: Modal adapts to screen size

Component Structure

Files

  • myNpProfileEditModal.html - Empty template (uses render())
  • myNpProfileEditModal.js - Controller (231 lines)
  • Multiple HTML templates for each field type:
  • textLayout.html
  • picklistLayout.html
  • multipicklistLayout.html
  • checkboxLayout.html
  • numberLayout.html
  • yearLayout.html
  • textAreaLayout.html
  • richTextLayout.html
  • myNpProfileEditModal.js-meta.xml - Not exposed

JavaScript Controller

Properties (API)

@api fieldName

  • Type: String
  • Description: API name of field being edited

@api title

  • Type: String
  • Description: Modal title

@api fieldLabel

  • Type: String
  • Description: Input label

@api value

  • Type: Any
  • Description: Current field value

@api fieldType

  • Type: String
  • Description: Type of input (text, picklist, checkbox, number, year, textarea, richtext, multipicklist)

@api options

  • Type: Array
  • Description: Options for picklists

@api errorMessage

  • Type: String
  • Description: Validation error message

@api helpText

  • Type: String
  • Description: Help text for field

Lifecycle

render()

  • Returns appropriate template based on fieldType
  • Supports 8 different templates

Event Handlers

closeModal(event)

  • Clears errorMessage
  • Dispatches "closemodal" event

handleInputChange(event)

Complex Validation Logic: - Profile_Years_Practiced_As_RN__c: Validates 1-99 whole numbers - Profile_Practicing_Np_Start_Year__c: Validates 4-digit year 1965-current year - Credentials__c: Validates alphabetic, commas, dashes, spaces only - Preferred_Name__c: Max 50 characters - Profile_NPI__c: Validates exactly 10 digits - Profile_Expected_Graduation_Year__c: Validates current year to +15 years - Checkbox fields: Handles checked state - Year fields: Validates 1900-2099 range - Number fields: Validates positive numbers

saveAccountInfo(event)

  • Validates final values
  • Converts multipicklist array to semicolon-separated string
  • Dispatches "saveinfo" event with { value, fieldname, fieldtype }

blockInvalidCharacters(event)

  • Prevents numeric input for Credentials field

Computed Properties

isCredentialField

  • Returns true if fieldName === "Credentials__c"

isProfileNPIField

  • Returns true if fieldName === "Profile_NPI__c"

hasError

  • Returns true if errorMessage exists

Events

Events Dispatched

closemodal

new CustomEvent('closemodal')

saveinfo

new CustomEvent('saveinfo', {
    detail: {value, fieldname, fieldtype}
})

Styling

Custom CSS for modal (not shown)

Dependencies

None - pure LWC component

Usage Examples

<c-my-np-profile-edit-modal
    field-name="Credentials__c"
    title="Edit Credentials"
    field-label="Credentials"
    value={credentials}
    field-type="text"
    error-message={errorMessage}
    help-text="Enter your credentials"
    onclosem Modal={handleCloseModal}
    onsaveinfo={handleSaveInfo}>
</c-my-np-profile-edit-modal>

⚠️ Pre-Go-Live Concerns

CRITICAL

  • Field-specific validation hardcoded: Lines 52-174 have hardcoded field API names - not reusable
  • Multiple truth sources: Validation logic duplicated between handleInputChange and saveAccountInfo

HIGH

  • No unit tests: Zero coverage for complex validation logic
  • Inconsistent validation timing: Some fields validate on change, others on save
  • Year field validation complex: Lines 137-151 have intricate logic that's hard to maintain
  • NPI validation incomplete: Only checks length, not NPI checksum algorithm

MEDIUM

  • Error message lifecycle: errorMessage cleared on closeModal but parent may not reset it
  • Multipicklist conversion: Semicolon separator may conflict with values containing semicolons
  • Number validation: Line 177 validates positive but line 179 resets to null (inconsistent)

LOW

  • Magic numbers: 1965, 1900, 2099, 50, 99, 10, 15 should be constants
  • Regex patterns inline: Should extract to constants

Maintenance Notes

Complexity: High Key Notes: - Component manages 8 different input types via render() - Field-specific validation makes it less reusable - Validation rules embedded in JavaScript (should be in Apex or custom metadata) - Years Practiced validation: 1-99 whole numbers - NP Start Year validation: 1965 to current year, 4 digits - Expected Graduation Year: current year to +15 years - NPI: Exactly 10 digits (but no checksum validation) - Credentials: Alphabetic, commas, dashes, spaces only - Parent component receives saveinfo event and handles actual save

Browser Compatibility: - Standard browser support