Visual Picker Link

A visual picker link is visual enhanced box to open an external content.

The Avonni Picker Link component provides an engaging and interactive way to guide users to external content within your Salesforce Flows. A visually enhanced hyperlink grabs attention and encourages users to explore related information or resources.


Changing the Properties

Adding Content

Content for the Visual Picker Link component can be added by completing the Title and Content fields.

Adding an icon

If needed, an icon can be added on the left or right side of the content.


Adding Interactions

Interactions define what happens when users interact with the Visual Picker Link component. A list of interactions is available here.

Here are the available interactions for the Visual Picker Link component:

  • On Click: The event is fired when a user clicks on the visual picker link.


From the Styles panel, you can customize styling attributes for the Visual Picker Link component:

  • Icon: to customize the styling attributes of the icon.


Examples

Property
Value

Title

Avonni Component Builder Documentation Website

Content

This documentation explains.....

Icon Name

utility:knowledge_base

Icon Position

Left


Specifications

Attributes

Name
Type
Description

completed

Boolean

content

String

The URL of the page that the link goes to.

iconName

String

The Lightning Design System name of the icon. Names are written in the format 'utility:down' where 'utility' is the category, and 'down' is the specific icon to be displayed.

iconPosition

String

Position of the icon. Valid values include left and right.

infoOnly

Boolean

title

String

Title of the visual picker link. To include additional markup or another component, use the title slot.

Events

Name
Description

click

The event fired when the visual picker is clicked.

Styling Hooks

Icon

Name
Description

Background Color

Define a icon background color.

Background Color Complete

Define an icon background color when the "Completed" property is activated.

Foreground Color

Define a icon foreground color.

Foreground Color Utility

Define a icon foreground color utility.

Border Radius

Define a icon border radius.

Last updated