Inlay Alerts Examples | JSON Layout API V2

Example 1: Alert Types

Inlay Alerts support five types: success, danger, warning, info, and default. Each type has a default icon and color scheme.

RSL.JSONLayout.renderLayout('#container', {
    version: 2,
    layoutId: "alert-types",
    breakpoints: { xs: 1 },
    gap: "1rem",
    items: [
        { content: { type: "inlayAlert", alertType: "success", message: "Success!", details: "Your operation completed successfully." } },
        { content: { type: "inlayAlert", alertType: "danger", message: "Error!", details: "Something went wrong with your request." } },
        { content: { type: "inlayAlert", alertType: "warning", message: "Warning!", details: "Please be careful with this action." } },
        { content: { type: "inlayAlert", alertType: "info", message: "Info", details: "Here is some helpful information." } },
        { content: { type: "inlayAlert", alertType: "default", message: "Notice", details: "This is a default notification." } }
    ]
});

Example 2: Drop Shadow Variants (Simple Messages)

Alerts with only details (no message title) use the simple .alert-message-around structure. Add depth with drop shadow variants: a (inset), b (dramatic), c (subtle), or d (standard).

// Alerts WITHOUT a message (title) use the simple .alert-message-around structure
RSL.JSONLayout.renderLayout('#container', {
    version: 2,
    layoutId: "shadow-variants",
    breakpoints: { xs: 1 },
    gap: "1rem",
    items: [
        { content: { type: "inlayAlert", alertType: "success", dropShadow: "a", details: "Success with dropshadow-a (inset shadow)." } },
        { content: { type: "inlayAlert", alertType: "info", dropShadow: "b", details: "Info with dropshadow-b (dramatic multi-layer)." } },
        { content: { type: "inlayAlert", alertType: "warning", dropShadow: "c", details: "Warning with dropshadow-c (subtle inset)." } },
        { content: { type: "inlayAlert", alertType: "danger", dropShadow: "d", details: "Danger with dropshadow-d (standard box shadow)." } }
    ]
});

Example 3: Custom Styling

Override default colors and icons for fully customized alerts.

RSL.JSONLayout.renderLayout('#container', {
    version: 2,
    layoutId: "custom-alerts",
    breakpoints: { xs: 1 },
    gap: "1rem",
    items: [
        {
            content: {
                type: "inlayAlert",
                alertType: "info",
                message: "Custom Purple Alert",
                details: "Using custom background and icon colors.",
                icon: "fa-star",
                overrideBackgroundColor: "#9b59b6",
                overrideTextColor: "#ffffff",
                dropShadow: "c"
            }
        },
        {
            content: {
                type: "inlayAlert",
                alertType: "success",
                message: "Gradient-Inspired",
                details: "A teal-themed success alert.",
                icon: "fa-rocket",
                overrideBackgroundColor: "#00b894",
                overrideIconColor: "#ffffff",
                dropShadow: "d"
            }
        }
    ]
});

Example 4: Non-Dismissible Alerts

Set dismissible: false to create alerts that cannot be closed by users.

RSL.JSONLayout.renderLayout('#container', {
    version: 2,
    layoutId: "permanent-alert",
    breakpoints: { xs: 1 },
    items: [
        {
            content: {
                type: "inlayAlert",
                alertType: "warning",
                message: "Permanent Notice",
                details: "This alert has no close button and cannot be dismissed.",
                dismissible: false,
                dropShadow: "c"
            }
        }
    ]
});

Example 5: Dynamic Alerts with Auto-Dismiss

Use dynamic: true to leverage the generateAlert() function with auto-dismiss timeout and animations.

RSL.JSONLayout.renderLayout('#container', {
    version: 2,
    layoutId: "auto-dismiss-alert",
    breakpoints: { xs: 1 },
    items: [
        {
            content: {
                type: "inlayAlert",
                alertType: "info",
                message: "Auto-Dismiss Alert",
                details: "This alert will automatically close after 4 seconds.",
                dynamic: true,      // Use generateAlert() function
                timeout: 4000,      // Auto-dismiss after 4 seconds
                dropShadow: "c",
                onClose: function() {
                    console.log('Alert was closed!');
                }
            }
        }
    ]
});

Dynamic Mode Requirements

dynamic: true requires inlay-alerts.js to be loaded
Also requires color-helper.js and color-adjuster.js for color calculations
timeout shows a progress bar indicator
onShow and onClose callbacks are supported

Example 6: Alerts in Grid Layout

Inlay Alerts work seamlessly within RSL's grid system for dashboard-style notifications.

RSL.JSONLayout.renderLayout('#container', {
    version: 2,
    layoutId: "grid-alerts",
    breakpoints: { xs: 1, sm: 2, md: 3 },
    gap: "1rem",
    items: [
        { content: { type: "inlayAlert", alertType: "success", message: "Orders", details: "15 new orders today", dropShadow: "c" } },
        { content: { type: "inlayAlert", alertType: "info", message: "Messages", details: "3 unread messages", dropShadow: "c" } },
        { content: { type: "inlayAlert", alertType: "warning", message: "Tasks", details: "2 tasks overdue", dropShadow: "c" } }
    ]
});

API Reference

Complete configuration options for the inlayAlert content type.

Property	Type	Default	Description
`type`	string	"default"	Alert type: "success", "danger", "warning", "info", "default"
`message`	string	-	Alert title/heading text
`details`	string	-	Alert body/description text (supports HTML)
`dropShadow`	string	-	Shadow variant: "a", "b", "c", or "d"
`icon`	string	auto	Custom FontAwesome icon class (e.g., "fa-star")
`dismissible`	boolean	true	Show close button
`dynamic`	boolean	false	Use generateAlert() for dynamic rendering
`timeout`	number	-	Auto-dismiss after milliseconds (dynamic mode only)
`overrideBackgroundColor`	string	-	Custom background color (hex, rgb, etc.)
`overrideTextColor`	string	-	Custom text color
`overrideTitleColor`	string	-	Custom title/heading color
`overrideIconColor`	string	-	Custom icon color
`onShow`	function	-	Callback when alert is shown
`onClose`	function	-	Callback when alert is closed