Formatted Name

What the Formatted Name Component Does

The Avonni Formatted Name Component makes it easy to enter and display people's names in a standard way. It guides users through a step-by-step process to enter different parts of a name, like title, first name, middle name, last name, and suffix. As the user types, the component checks and formats the information in real time to ensure the name is accurate and consistent.

---

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.

Here are the available Actions for the Formatted Name Component:

• On Click

---

Specifications

Attributes

Name	Type	Description
Label	String	The Label for the Name
First Name	String	The Value for the first name
Format	Boolean	The format to display the name
Informal Name	String	The value of the informal name
Last Name	String	The value for the last name
Middle Name	Boolean	The value for the middle name
Salutation	Boolean	The value of the Salutation
Suffix	Boolean	The Value for the suffix

Avatar

Attribute	Type	Description
Variant	String	To change the shape of the Avatar
Initials	String	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.
Icon Name		The path to the image.
Size	String	The size of the avatar.
Image	String	The path to the image.
Presence Type	String	Presence of the user to display. Valid values include online, busy, focus, offline, blocked, and away.
Presence Position	String	The presence title will be shown as a tooltip hovering over the presence icon.

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