accountSearch

A searchable account picker for use in Screen Flows. When the user selects an account, the component automatically fetches related contacts and builds the mergeData JSON that excelTemplate expects.

Package: Keelstone-Samples
Component name: c:accountSearch
Flow target: lightning__FlowScreen

Flow output properties

Property	Type	Description
selectedAccountId	String	Salesforce ID of the selected Account
selectedAccountName	String	Name of the selected Account
mergeData	String	JSON string — { account: {...}, contacts: [...] }

These are declared as @api properties and registered as Flow output variables, so Flow automatically stores their values when the user navigates to the next screen.

Flow validation

The component implements the Flow validation API. Navigating to the next screen without selecting an account shows a validation error: "Please select an account before continuing.".

// Implemented internally — no action required by the flow builder
@api validate() {
  return this.selectedAccount
    ? { isValid: true }
    : { isValid: false, errorMessage: 'Please select an account before continuing.' };
}

Search behavior

• Triggered after 2 characters are typed
• 300 ms debounce — waits for the user to pause before searching
• Calls AccountSearchController.searchAccounts(searchTerm) (SOQL LIKE '%term%')
• Returns up to 20 accounts ordered by Name

Select behavior

Each result row has a Select button on the right edge. Clicking the button or anywhere on the row has the same effect — both trigger selection. The button provides a visible affordance; the full row click is there for users who naturally click the content.

When an account is selected:

1. The account is stored as selectedAccount
2. AccountSearchController.getContacts(accountId) fetches up to 50 contacts (ordered by LastName, FirstName)
3. mergeData is serialized as JSON:

{
  "account": {
    "Id": "001...",
    "Name": "Acme Corp",
    "Phone": "555-0100",
    "Website": "https://acme.com",
    "BillingCity": "San Francisco",
    "BillingState": "CA",
    "Owner": { "Name": "Jane Smith" }
  },
  "contacts": [
    {
      "Id": "003...",
      "FirstName": "John",
      "LastName": "Doe",
      "Title": "CEO",
      "Email": "john@acme.com",
      "Phone": "555-0101"
    }
  ]
}

Using in a flow

Add the component on a Screen and map its output variables:

<!-- Flow screen definition (simplified) -->
<screens>
  <screen>
    <name>Search_Screen</name>
    <fields>
      <componentType>c:accountSearch</componentType>
      <outputParameters>
        <assignToReference>selectedAccountId</assignToReference>
        <name>selectedAccountId</name>
      </outputParameters>
      <outputParameters>
        <assignToReference>selectedAccountName</assignToReference>
        <name>selectedAccountName</name>
      </outputParameters>
      <outputParameters>
        <assignToReference>mergeData</assignToReference>
        <name>mergeData</name>
      </outputParameters>
    </fields>
  </screen>
</screens>

The Keelstone_Account_Search sample flow shows the complete setup — use it as a reference.

Customizing the query

To search different fields or return additional account data, copy the component from the Samples package and modify AccountSearchController.searchAccounts():

@AuraEnabled(cacheable=true)
public static List<Account> searchAccounts(String searchTerm) {
    String pattern = '%' + searchTerm + '%';
    return [
        SELECT Id, Name, Phone, Website, BillingCity, BillingState,
               Owner.Name, Industry, AnnualRevenue   // add fields here
        FROM Account
        WHERE Name LIKE :pattern
        ORDER BY Name ASC
        LIMIT 20
    ];
}

Update mergeData construction in the component JS to include the new fields.