The Inline Notice¶

Overview¶

The InlineNotice component is a Fiori UI composable designed to display an inline notice with an icon, a label, and an optional hyperlink. It is intended for use with certain FormCell components that display generated content.

Inline Notice Anatomy

Key Features¶

Displays an icon and a label.
Supports a clickable hyperlink with a callback.
Fully accessible with Talk-Back and keyboard navigation.

Usage¶

Add the Composable to Your Layout¶

Here is a basic example of how to use the Inline Notice composable:

@Composable
fun InlineNoticeExample() {
    InlineNotice(
        onHyperlinkClick = {
            // Handle hyperlink click
        }
    )
}

Parameters¶

Parameter	Type	Default Value	Description
`modifier`	`Modifier`	`Modifier`	Modifier to apply to the layout.
`icon`	`FioriIcon`	`FioriIcon(resId = R.drawable.ic_sap_icon_ai, contentDescription = null)`	Icon to display in the notice.
`text`	`String`	`stringResource(R.string.inline_ai_notice_created_by_ai_verify)`	The main message text.
`hyperlinkText`	`String`	`stringResource(R.string.inline_ai_notice_learn_more)`	The text for the hyperlink.
`onHyperlinkClick`	`() -> Unit`	`{}`	Action to perform when the hyperlink is clicked.
`enabled`	`Boolean`	`true`	Whether the hyperlink is enabled.
`styles`	`InlineNoticeStyles`	`InlineNoticeDefaults.styles()`	Styles to apply to the notice.
`textStyles`	`InlineNoticeTextStyles`	`InlineNoticeDefaults.textStyles()`	Text styles to apply to the notice.
`colors`	`InlineNoticeColors`	`InlineNoticeDefaults.colors()`	Colors to apply to the notice.

Customization¶

Icon¶

You can provide a custom icon by passing a FioriIcon:

InlineNotice(
    icon = FioriIcon(resId = R.drawable.ic_custom_icon, contentDescription = "Custom Icon")
)

Label an Hyperlink¶

You can customize the message and hyperlink text:

InlineNotice(
    text = "Custom message text.",
    hyperlinkText = "Click here",
    onHyperlinkClick = {
        // Handle hyperlink click
    }
)

Styling and Colors¶

You can customize the styles and colors using the styles, textStyles, and colors parameters:

InlineNotice(
  styles = YourInlineNoticeDefaults.styles(),
  colors = YourInlineNoticeDefaults.colors(),
  textStyles = YourInlineNoticeDefaults.textStyles()
)

Accessibility¶

The InlineNotice component is designed with accessibility in mind:

Talk-Back Support: The hyperlink is focusable and clickable with Talk-Back. The onClick semantics ensure that the hyperlink is accessible for screen readers.
Keyboard Navigation: The hyperlink can be navigated using the keyboard.
Dynamic Font Scaling: Automatically adjusts to system font size changes.

Notes¶

Ensure that the InlineNotice component is added to a layout with sufficient space for the icon and label.
The component automatically handles ripple effects for the hyperlink.
Use the enabled parameter to disable the hyperlink if needed.

Last update: April 9, 2025