Public Inputs

Expose the following parameters as public inputs.

Mode (Text or Static Entity)

Values:

• "Like"
• "Rating"

Behavior:

• Like: Treated as a binary like/unlike interaction (typically one heart).
• Rating: Selected heart index represents a numeric rating.

Hearts (Integer)

Default: 5
Range: 1–10

Description:
Defines the total number of hearts rendered.

Color (Text)

Examples:

• #FF4B6E
• red
• CSS variable

Description:
Defines the fill color of the hearts.

Animation (Text or Static Entity)

Supported values:

• Pop
• Pulse
• Spin
• Bounce
• Shake
• Flip
• Fade

Description:
Defines the visual effect applied when a heart is selected.

SizePx (Integer)

Default: 32
Range: 12–96 pixels

Description:
Defines the width and height of each heart icon.

SpacingPx (Integer)

Default: 8
Range: 0–40 pixels

Description:
Defines the horizontal spacing between hearts.

RadiusPercent (Integer)

Default: 12
Range: 0–50%

Description:
Defines the border radius applied to the heart container.

ShowShadow (Boolean)

Description:
Enables or disables a drop shadow on the hearts.

Disabled (Boolean)

Description:
When set to true, the component becomes read-only and user interaction is disabled.

Public Outputs

SelectedValue (Integer)

Range:

• 0 → No selection
• 1..Hearts → Index of selected heart

Usage:
Bind this value to an entity attribute or use it in client/server logic.

OnChange (Event )

Triggered when the user changes the selection through click or tap.

Output:

• SelectedValue

Allows the parent screen to respond to user interaction.

Usage in Screens

To use the component in an OutSystems screen:

1. Drag the Hearts Component from the toolbox onto the screen.
2. Set Mode:
   • "Like" for like/unlike behavior.
   • "Rating" for rating interactions.
3. Configure Hearts (for example 5 or 10).
4. Optionally customize:
   • Color
   • Animation
   • SizePx
   • SpacingPx
   • RadiusPercent
   • ShowShadow
5. Bind SelectedValue to a local variable or aggregate attribute.
6. If logic is needed on selection, handle the OnChange event and implement actions (for example saving the rating or sending feedback).

Example Usage

Product Rating

• Mode = "Rating"
• Hearts = 5
• Animation = "Bounce"
• Disabled = False

Like Button

• Mode = "Like"
• Hearts = 1
• Animation = "Pop"
• ShowShadow = True