Illustration

The Illustration component allows you to display pre-designed illustrations within your Avonni Dynamic Components.

Overview

The Illustration component is a visual element. It's primarily used to enhance the user interface and communicate information in a visually engaging way. Avonni provides a library of built-in illustrations from which you can choose.

Use Cases

• Empty States: Show an illustration when a Data Table or List has no data to display (e.g., an illustration of an empty inbox with the text "No messages yet").

• Success/Confirmation Messages: Display an illustration to confirm a successful action (e.g., a checkmark illustration after a record is saved).

• Error/Warning Messages: Use an illustration to represent an error or warning condition visually.

• Visual Breaks: Add visual interest and break up large blocks of text or data.

• Branding: Use illustrations that align with your brand's visual style.

• Page not found

Setting Up your Illustration

Properties

API Name

A unique identifier for the component within your Dynamic Component.

Title

The main title text displayed as part of the illustration. This can be static text or bound to a dynamic value (Variable, Formula, Component Attribute).

Content

Additional text content displayed below the title, often used for a description or message. This can also be static or dynamic.

Variant

Selects the specific illustration to display. Avonni provides a set of pre-designed illustrations, each with a unique name (e.g., "desert", "empty", "no_access", etc.). Refer to the Avonni documentation for a complete list of available variants and their corresponding images. The available options are not free-form text; you must choose from the provided list.

Size

Controls the size of the illustration. Common options include:

• Small

• Medium

• Large

• (Other size options might be available, depending on the Avonni version).

Visible

It controls visibility and supports dynamic show and hide.

Examples

Example 1: Empty State Illustration

1. Add an Illustration component to your canvas.

2. Set the Variant to "No Content" (or a similar variant appropriate for an empty state).

3. Set the Title to "No Records Found".

4. Set the Content to "There are no records to display at this time."

5. Set the Size to medium.

6. Configure the Visible property of the Illustration component to be dynamically controlled (e.g., show the illustration only if a Data Table has no rows).

Important Considerations

• Variant Selection: Choose a Variant that is appropriate for the message you want to convey. Refer to the Avonni documentation for visual examples of each variant.

• Title and Content: Use the Title and Content properties to provide clear and concise messages to the user.

• Dynamic Text: You can use Variables, Formulas, and Component Attributes to make the Title and Content dynamic.

• Accessibility: Consider users with visual impairments. While illustrations can be helpful, ensure that the essential information is also conveyed through text (e.g., using the Title and Content properties effectively).

• Size: Choose an appropriate size for the illustration based on its context and the surrounding components.

In Summary

The Illustration component lets you add an image to enhance your Dynamic Component visuals. Use case for the illustration components includes showing an empty state, a success message or a not found information.