Feedback Sheet

Overview

The FeedbackSheet is a flexible bottom sheet component for collecting user feedback with thumbs up/down sentiment, predefined feedback categories, and optional text input.

Key Features

• Thumbs up/down sentiment selection
• Predefined feedback categories with single-selection chips
• Optional free-form text input
• Automatic error state handling
• Built-in loading states during submission
• Smooth show/hide animations

Quick Start

Important: Define a FlexibleSheetSize when creating the sheet state. The sheet requires explicit size configuration and doesn't support wrap-content behavior.

@Composable
fun MyScreen() {
    val sheetState = rememberFlexibleBottomSheetState(
        skipIntermediatelyExpanded = false,
        isModal = true,
        flexibleSheetSize = FlexibleSheetSize(
            fullyExpanded = 0.8f,
            intermediatelyExpanded = 0.3f,
            slightlyExpanded = 0.1f
        )
    )
    var showSheet by remember { mutableStateOf(false) }

    FeedbackSheet(
        showBottomSheet = showSheet,
        sheetState = sheetState,
        onDismiss = { showSheet = false },
        onFeedbackSubmit = { feedbackData ->
            scope.launch {
                try {
                    api.submitFeedback(feedbackData)
                    CompletableDeferred(Unit)
                } catch (e: Exception) {
                    CompletableDeferred<Unit>().apply {
                        completeExceptionally(e)
                    }
                }
            }
        }
    )
}

Parameters

Parameter	Type	Default	Description
showBottomSheet	Boolean	Required	Controls sheet visibility
sheetState	FlexibleSheetState	Required	Manages sheet behavior and animations
onDismiss	() -> Unit	Required	Called when sheet is dismissed
onFeedbackSubmit	(FeedbackData) -> Job	Required	Handles feedback submission, returns Job
showInitialState	Boolean	true	Shows initial thumbs state
onThumbsUp	() -> Unit	{}	Callback when thumbs up is selected
onThumbsDown	() -> Unit	{}	Callback when thumbs down is selected
onSheetClosing	() -> Unit	{}	Callback when sheet starts closing
defaultFeedbackChips	MutableList<ChipData>	Default chips	Feedback category options
defaultTextFieldFeedback	String?	null	Initial text for feedback field
isError	Boolean	false	Shows error state
showThumbsButtons	Boolean	true	Shows thumbs buttons
showTextField	Boolean	true	Shows text field
textFieldEnabled	Boolean	!isSubmitting	Controls field interactivity
textFieldReadOnly	Boolean	false	Makes field read-only
textFieldIsError	Boolean	false	Shows text field error state
textFieldContent	FioriTextFieldContent	Default	Configures label, placeholder, character counter

Customizing the Text Field

Customize the feedback text field to match your requirements:

FeedbackSheet(
    // ... other parameters
    textFieldContent = FioriTextFieldContent(
        label = "Tell us more",
        placeholder = "What could we improve?",
        required = true,
        maxCharacterCounter = 500
    ),
    textFieldIsError = feedbackTextIsEmpty && isRequired,
    defaultTextFieldFeedback = previousFeedback
)

Required Text Field: Set required = true in FioriTextFieldContent. The submit button is automatically disabled when the required field is empty.

Feedback Data

data class FeedbackData(
    val selectedChips: List<ChipData>,
    val additionalFeedback: String = "",
    val thumbsUpSelected: Boolean = false,
    val thumbsDownSelected: Boolean = false
)

Handling Feedback Submission

Return a Job from onFeedbackSubmit. The sheet stays open automatically if the Job completes with an exception:

onFeedbackSubmit = { feedbackData ->
    scope.launch {
        try {
            api.submitFeedback(feedbackData)
            // Success - sheet closes
        } catch (e: Exception) {
            // Error - sheet stays open and shows error state
            throw e
        }
    }
}

Sheet Size Configuration

The FeedbackSheet requires explicit size configuration using FlexibleSheetSize:

val sheetState = rememberFlexibleBottomSheetState(
    flexibleSheetSize = FlexibleSheetSize(
        fullyExpanded = 0.80f,          // 80% of screen for feedback form
        intermediatelyExpanded = 0.3f,  // 30% for initial thumbs state
        slightlyExpanded = 0.1f         // 10% for minimal state
    )
)

Recommended Heights:

• Initial State (Thumbs): 25-35%
• Expanded State (Form): 70-85%
• Error State: Consider using 33% for intermediatelyExpanded

Customization

FeedbackSheet(
    // ... other parameters
    colors = FeedbackSheetDefaults.colors(
        sheetContainerColor = MaterialTheme.colorScheme.surface
    ),
    styles = FeedbackSheetDefaults.styles(
        sheetCornerRadius = 16.dp,
        topPadding = 8.dp
    )
)

Related Components

• Writing Assistant Sheet - Handles AI writing assistant interactions with feedback
• Inline AI Feedback - Lightweight thumbs up/down feedback component
• FeedbackPage - Internal page component (can be used independently)

API Reference

• com.sap.cloud.mobile.fiori.compose.ai.aifeedback.FeedbackSheet
• com.sap.cloud.mobile.fiori.compose.ai.aifeedback.FeedbackPage
• com.sap.cloud.mobile.fiori.compose.ai.aifeedback.FeedbackData

---

Last update: November 14, 2025