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

Last updated