LWC Components Reference

This page documents the Lightning Web Components in this project.

Documentation Template

Use this template when documenting your LWC components.

---

Component Name

Path: force-app/main/default/lwc/componentName/

Description

Brief description of what this component does and its purpose.

Properties

Property	Type	Default	Description
recordId	String	-	The ID of the record to display
showDetails	Boolean	false	Whether to show detailed information
maxRecords	Number	10	Maximum number of records to display

Events

Event	Type	Description
itemselected	CustomEvent	Fired when a user selects an item
refresh	CustomEvent	Fired when the component needs to refresh

Public Methods

refresh()

Refreshes the component data.

Returns: Promise<void>

Example:

this.template.querySelector("c-my-component").refresh();

getSelectedItems()

Returns the currently selected items.

Returns: Array<Object>

Usage Example

<template>
  <c-my-component
    record-id="{recordId}"
    show-details="{showDetails}"
    max-records="{maxRecords}"
    onitemselected="{handleItemSelected}"
  ></c-my-component>
</template>

import { LightningElement, api } from "lwc";

export default class ParentComponent extends LightningElement {
  recordId = "001XXXXXXXXXXXX";
  showDetails = true;
  maxRecords = 20;

  handleItemSelected(event) {
    const selectedItem = event.detail;
    console.log("Selected:", selectedItem);
  }
}

Testing

See test file: __tests__/componentName.test.js

---

How to Document Your Components

1. Create Component Section

For each component, add a section with:

• Component name as heading
• Path to component
• Description
• Properties table
• Events table (if applicable)
• Public methods (if any)
• Usage examples
• Link to tests

2. Properties Table

Document all public properties:

| Property       | Type | Default      | Description  |
| -------------- | ---- | ------------ | ------------ |
| `propertyName` | Type | defaultValue | What it does |

3. Events Table

Document all custom events:

| Event       | Type        | Description   |
| ----------- | ----------- | ------------- |
| `eventname` | CustomEvent | When it fires |

4. Code Examples

Provide realistic usage examples:

<!-- Template example -->
<template>
  <c-your-component property="{value}" onevent="{handler}"></c-your-component>
</template>

// JavaScript example
import { LightningElement } from "lwc";

export default class Example extends LightningElement {
  // Your code
}

5. Screenshots (Optional)

Add screenshots if helpful:

![Component Screenshot](../public/images/component-screenshot.png)

Example: Account Search Component

Path: force-app/main/default/lwc/accountSearch/

Description

A search component that allows users to find and select Salesforce accounts. Features real-time search, debouncing, and keyboard navigation.

Properties

Property	Type	Default	Description
placeholder	String	'Search accounts...'	Placeholder text for search input
minSearchLength	Number	2	Minimum characters before search starts
maxResults	Number	10	Maximum number of results to show
debounceDelay	Number	300	Delay in ms before search executes

Events

Event	Type	Description
accountselected	CustomEvent	Fired when user selects an account. Detail contains account object.
searchcompleted	CustomEvent	Fired when search completes. Detail contains results count.

Public Methods

clearSearch()

Clears the search input and results.

Example:

this.template.querySelector("c-account-search").clearSearch();

focusInput()

Focuses the search input field programmatically.

Usage Example

<template>
  <c-account-search
    placeholder="Find an account..."
    min-search-length="{3}"
    max-results="{5}"
    onaccountselected="{handleAccountSelected}"
  ></c-account-search>
</template>

import { LightningElement } from "lwc";

export default class AccountSelector extends LightningElement {
  selectedAccount;

  handleAccountSelected(event) {
    this.selectedAccount = event.detail;
    console.log("Selected Account:", this.selectedAccount.Name);
  }
}

Wire Adapters Used

• None (uses imperative Apex)

Apex Methods Called

• AccountController.searchAccounts(searchTerm, maxResults)

---

Best Practices for Component Documentation

1. Keep it updated: Update docs when component changes
2. Be thorough: Document all public APIs
3. Provide examples: Real-world usage examples help users
4. Link to tests: Reference test files for more examples
5. Add screenshots: Visual aids for complex UIs
6. Document dependencies: List required Apex controllers, custom labels, etc.

Next Steps

• Apex Classes Reference - Server-side documentation
• LWC Examples - More component examples
• Development Guide - Component development