# Formatted Value

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

***

## Changing the properties

Configuring the Avonni Formatted Value 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:

<table><thead><tr><th width="241">Attribute</th><th>Description</th></tr></thead><tbody><tr><td><strong>Label</strong></td><td>The "Label" attribute defines the label for the value. It provides context and identifies the data for users.</td></tr><tr><td><strong>Helptext</strong></td><td>The "Helptext" attribute provides additional information about the value. It usually includes clarification or specific instructions to the users about the data.</td></tr><tr><td><strong>Variant</strong></td><td>The "Variant" attribute adjusts the position of the formatted value and the label. This enables the customization of how the formatted value and label are displayed in relation to each other.</td></tr><tr><td><strong>Type</strong></td><td>The "Type" attribute determines the format of the value. This can be a text, numerical, date, or other Salesforce field types. This attribute ensures the value entered adheres to the expected format.</td></tr><tr><td><strong>Value</strong></td><td>The "Value" attribute corresponds to the data that needs to be formatted. This is the actual data entered by the user or displayed to the user.</td></tr><tr><td><strong>Linkify</strong></td><td>The "Linkify" attribute, when set to true, transforms the value into a hyperlink. This link redirects users to the related record upon clicking. It provides a convenient way to navigate directly to the associated record.</td></tr><tr><td><strong>Label icon</strong></td><td>The "Label Icon" attribute adds an icon to the label. It consists of a set of sub-attributes defining the icon's name, size, position, etc., enhancing the visual representation of the label.</td></tr><tr><td><strong>Value icon</strong></td><td>The "Value Icon" attribute allows you to append an icon next to the value. Like the "Label Icon", it contains sub-attributes specifying the icon's details. This provides visual enrichment to the data being displayed.</td></tr></tbody></table>

{% hint style="info" %}
When utilizing the 'Get Records' flow action, lookup values are not retrieved and, therefore, cannot be displayed using Avonni Formatted Value components. As a potential solution, consider creating a formula within the object to deliver the desired value.
{% endhint %}

***

## Adding interactions

No interactions are available.

***

## Events

No events are available

***

## Styling Hooks

#### Border

| Name   | Description                        |
| ------ | ---------------------------------- |
| Size   | Define a text color for the title  |
| Style  | Define a font size for the title   |
| Color  | Define a font style for the title  |
| Radius | Define a font weight for the title |

#### Spacing

| Name         | Description                                                                                                                                                                                                                                                  |
| ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Block start  | To specify the margin at the start of the block flow.                                                                                                                                                                                                        |
| Block end    | To specify the margin at the end of the block flow.                                                                                                                                                                                                          |
| Inline start | The "start" and "end" values, used in conjunction with "inline," refer to the start and end points of the line of text. For a left-to-right language like English, "inline-start" would be equivalent to "left", and "inline-end" would be equal to "right". |
| Inline end   | The "start" and "end" values, used in conjunction with "inline," refer to the start and end points of the line of text. For a left-to-right language like English, "inline-start" would be equivalent to "left," and "inline-end" would be equal to "right". |

#### Container

| Name             | Description                                           |
| ---------------- | ----------------------------------------------------- |
| Background color | Define a background color for the component container |

#### Value

| Name        | Description                        |
| ----------- | ---------------------------------- |
| Color       | Define a text color for the value  |
| Font Size   | Define a font size for the value   |
| Font Style  | Define a font style for the value  |
| Font Weight | Define a font weight for the value |

#### Label

| Name        | Description                        |
| ----------- | ---------------------------------- |
| Color       | Define a text color for the label  |
| Font Size   | Define a font size for the label   |
| Font Style  | Define a font style for the label  |
| Font Weight | Define a font weight for the label |


---

# 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-value.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.
Attribute	Description
Label	The "Label" attribute defines the label for the value. It provides context and identifies the data for users.
Helptext	The "Helptext" attribute provides additional information about the value. It usually includes clarification or specific instructions to the users about the data.
Variant	The "Variant" attribute adjusts the position of the formatted value and the label. This enables the customization of how the formatted value and label are displayed in relation to each other.
Type	The "Type" attribute determines the format of the value. This can be a text, numerical, date, or other Salesforce field types. This attribute ensures the value entered adheres to the expected format.
Value	The "Value" attribute corresponds to the data that needs to be formatted. This is the actual data entered by the user or displayed to the user.
Linkify	The "Linkify" attribute, when set to true, transforms the value into a hyperlink. This link redirects users to the related record upon clicking. It provides a convenient way to navigate directly to the associated record.
Label icon	The "Label Icon" attribute adds an icon to the label. It consists of a set of sub-attributes defining the icon's name, size, position, etc., enhancing the visual representation of the label.
Value icon	The "Value Icon" attribute allows you to append an icon next to the value. Like the "Label Icon", it contains sub-attributes specifying the icon's details. This provides visual enrichment to the data being displayed.