# Formatted Name

<figure><img src="/files/W2pYIBBTL800vIghXckP" alt="" width="375"><figcaption></figcaption></figure>

***

## Changing the properties

Configuring the Avonni Formatted Name Flow Screen Component is a straightforward process that involves mapping Salesforce field values to the corresponding attributes of the component. Follow these steps to set up the component:

1. **Label**: Assign a custom label to the component above the formatted name fields.
2. **First Name**: Map the Salesforce field value for the first name to this attribute to pre-populate and store the user's first name.
3. **Formal Name**: If applicable, map the Salesforce field value for the formal name to this attribute to display the full name, including title and suffix.
4. **Informal Name**: Map the Salesforce field value for the informal name to this attribute to display the first and last names without title or suffix.
5. **Last Name**: Map the Salesforce field value for the last name to this attribute to pre-populate and store the user's last name.
6. **Middle Name**: Map the Salesforce field value for the middle name to this attribute to pre-populate and store the user's middle name, if applicable.
7. **Salutation**: Map the Salesforce field value for the greeting (e.g., Mr., Ms., Dr.) to this attribute to pre-populate and store the user's title.
8. **Suffix**: Map the Salesforce field value for the suffix (e.g., Jr., Sr., PhD) to this attribute to pre-populate and store the user's suffix, if applicable.

***

## Adding interactions

Interactions define what happens when users click on an action. A list of available interactions is available [here](/flow/component-builder/interactions-panel.md).

Here are the available Actions for the Formatted Name Component:

* On **`Click`**

***

## Specifications

### Attributes

<table><thead><tr><th width="226">Name</th><th width="199.75836972343524">Type</th><th>Description</th></tr></thead><tbody><tr><td>Label</td><td>String</td><td>The Label for the Name</td></tr><tr><td>First Name</td><td>String</td><td>The Value for the first name</td></tr><tr><td>Format</td><td>Boolean</td><td>The format to display the name</td></tr><tr><td>Informal Name</td><td>String</td><td>The value of the informal name</td></tr><tr><td>Last Name</td><td>String</td><td>The value for the last name</td></tr><tr><td>Middle Name</td><td>Boolean</td><td>The value for the middle name</td></tr><tr><td>Salutation</td><td>Boolean</td><td>The value of the Salutation</td></tr><tr><td>Suffix</td><td>Boolean</td><td>The Value for the suffix</td></tr></tbody></table>

#### Avatar

<table><thead><tr><th width="287">Attribute</th><th width="112.75836972343524">Type</th><th>Description</th></tr></thead><tbody><tr><td>Variant</td><td>String</td><td>To change the shape of the Avatar</td></tr><tr><td>Initials</td><td>String</td><td>If the record name contains two words, like first and last name, use the first capitalized letter of each. For records with only a single word name, use the first two letters of that word using one capital and one lowercase letter.</td></tr><tr><td>Icon Name</td><td></td><td>The path to the image.</td></tr><tr><td>Size</td><td>String</td><td>The size of the avatar.</td></tr><tr><td>Image</td><td>String</td><td>The path to the image.</td></tr><tr><td>Presence Type</td><td>String</td><td>Presence of the user to display. Valid values include online, busy, focus, offline, blocked, and away.</td></tr><tr><td>Presence Position</td><td>String</td><td>The presence title will be shown as a tooltip hovering over the presence icon.</td></tr></tbody></table>

### Events

No events are available

### Styling Hooks

#### Container

| Name                 | Description                                  |
| -------------------- | -------------------------------------------- |
| Background Color     | Define a text color for the title            |
| Border Color         | Define a font size for the title             |
| Border Size          | Define a font style for the title            |
| Font Weight          | Define a font weight for the title           |
| Line Height          | Define a line height for the title           |
| Text Shadow          | Define a text shadow for the title           |
| Horizontal Alignment | Define a horizontal alignement for the title |

#### Name

| Name                 | Description                                  |
| -------------------- | -------------------------------------------- |
| Text Color           | Define a text color for the title            |
| Font Size            | Define a font size for the title             |
| Font Style           | Define a font style for the title            |
| Font Weight          | Define a font weight for the title           |
| Line Height          | Define a line height for the title           |
| Text Shadow          | Define a text shadow for the title           |
| Horizontal Alignment | Define a horizontal alignement for the title |

#### Label

| Name                 | Description                                  |
| -------------------- | -------------------------------------------- |
| Text Color           | Define a text color for the title            |
| Font Size            | Define a font size for the title             |
| Font Style           | Define a font style for the title            |
| Font Weight          | Define a font weight for the title           |
| Line Height          | Define a line height for the title           |
| Text Shadow          | Define a text shadow for the title           |
| Horizontal Alignment | Define a horizontal alignement for the title |

#### Avatar

| Name                 | Description                                  |
| -------------------- | -------------------------------------------- |
| Text Color           | Define a text color for the title            |
| Font Size            | Define a font size for the title             |
| Font Style           | Define a font style for the title            |
| Font Weight          | Define a font weight for the title           |
| Line Height          | Define a line height for the title           |
| Text Shadow          | Define a text shadow for the title           |
| Horizontal Alignment | Define a horizontal alignement for the title |


---

# 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://docs.avonnicomponents.com/flow/flow-components/formatted-name.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.