# Show Contact with Photo

## Goal

Display contact details including their profile photo by loading contact information and asynchronously fetching the contact's image.

## Actions Required

| Action                                  | Purpose                      |
| --------------------------------------- | ---------------------------- |
| AddressBookReadContacts                 | Fetch contacts from device   |
| AddressBookGetReadContactsSuccessResult | Get contact count            |
| AddressBookGetContactInfo               | Extract contact details      |
| AddressBookLoadContactImage             | Load contact's profile photo |

## Variables Needed

* contactCount (Int)
* selectedIndex (Int) - Contact to display
* firstName (String)
* lastName (String)
* fullName (String)
* phoneNumbers (Array: String) - PlayMaker Array (set element type to String)
* emailAddresses (Array: String) - PlayMaker Array (set element type to String)
* contactImage (Texture) - Output of AddressBookLoadContactImage
* errorCode (Int)
* errorDescription (String)

## Implementation Steps

### 1. State: ReadContacts

**Action:** AddressBookReadContacts

* **Inputs:**
  * limit: 0 (read all)
  * offset: 0
  * mustIncludeName: true
* **Events:**
  * successEvent → GetCount
  * failureEvent → ShowError

### 2. State: GetCount

**Action:** AddressBookGetReadContactsSuccessResult

* **Outputs:**
  * contactCount → contactCount
* **Transition:** Display contact list, wait for user selection

### 3. State: GetContactDetails

**Action:** AddressBookGetContactInfo

* **Inputs:**
  * contactIndex: selectedIndex (user-selected contact)
* **Outputs:**
  * firstName → firstName
  * lastName → lastName
  * fullName → fullName
  * phoneNumbers → phoneNumbers array
  * emailAddresses → emailAddresses array
* **Transition:** Go to LoadImage

### 4. State: LoadImage

**Action:** AddressBookLoadContactImage

* **Inputs:**
  * contactIndex: selectedIndex (same as GetContactInfo)
* **Outputs:**
  * contactImage → contactImage (Texture2D)
  * errorCode → errorCode
  * errorDescription → errorDescription
* **Events:**
  * successEvent → DisplayContactWithImage
  * failureEvent → DisplayContactWithPlaceholder

**Note:** This is an async operation; wait for the event before proceeding.

### 5. State: DisplayContactWithImage

Display in UI:

* Image component.texture = contactImage
* Text: fullName
* Text: phoneNumbers\[0] (if array Length > 0)
* Text: emailAddresses\[0] (if array Length > 0)

### 6. State: DisplayContactWithPlaceholder

If image loading failed (no photo available):

* Display default avatar/placeholder image
* Show contact details normally

## Image Loading Flow

```
ReadContacts
    └─ GetCount
        └─ User selects contact (sets selectedIndex)
            └─ GetContactDetails(selectedIndex)
                └─ LoadImage(selectedIndex)
                    ├─ Success → Show photo
                    └─ Failure → Show placeholder
```

## Common Issues

* **No Image Available**: Not all contacts have photos; always handle failureEvent with a placeholder
* **Image Load Delay**: LoadContactImage is async; don't update UI until successEvent fires
* **Wrong Index**: Ensure selectedIndex matches between GetContactInfo and LoadContactImage
* **Texture Memory**: Loaded Texture2D objects use memory; dispose or cache wisely for large lists

## Performance Tips

**Lazy Loading:** Only load images when user views a contact, not for entire contact list upfront.

**Image Caching:** Cache loaded images to avoid re-loading when user revisits same contact.

**Placeholder Strategy:** Show placeholder immediately, load image in background, update UI on success.

**Memory Management:** For contact lists showing multiple photos, consider loading/unloading images as user scrolls.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://assetstore.essentialkit.voxelbusters.com/features/address-book/playmaker/use-cases/use-case-4-contact-with-photo.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.