Skip to content

Flow Configuration

The FlowOptions property in FlowContext has the same purpose as that in the view based flows component, but it's simpler.

    data class FlowOptions(
        val fullScreen: Boolean = false,
        val activationOption: ActivationOption = ActivationOption.QR_ONLY,
        val useDefaultEulaScreen: Boolean = true,
        val requireQRCodeConfirmScreen: Boolean = true,
        val orientation: OnboardingOrientation = OnboardingOrientation.UNSPECIFIED,
        val oAuthOption: OAuthOption = OAuthOption(),
        val screenSettings: CustomScreenSettings = CustomScreenSettings(),
        val qrCodeSecureOption: QRCodeSecureOption = QRCodeSecureOption.UNSPECIFIED,
        val customStyles: CustomStyles = CustomStyles()
    )

Properties

The table below describes the details of each property:

Property Description
fullScreen Whether to apply the edge-to-edge mode to the flow steps.
activationOption How to retrieve the application configuration. The default value is using QR code scanning. The other options include 'Discovery Service', 'MDM', etc.
useDefaultEulaScreen Whether to use the EULA screen provided by the SDK or use a customized screen.
requireQRCodeConfirmScreen Whether confirmation is required after QR code scanning.
orientation Which device orientation to use: portrait, landscape, or unspecified.
oAuthOption Determines which authentication method to use:WebView, CCT, or Browser, and whether to enable PKCE or not.
screenSettings The custom screen settings.
qrCodeSecureOption Specifies the QR code format, secure or not.
customStyles The customized style artifacts for the Fiori compose theme.

Differences With The View-Based Flows

FlowOptions in the compose version is a much simpler implementation than view-based flows, without reducing functionality.

oAuthAuthenticationOption Changed to oAuthOption

OAuthOption now contains two properties, webOption and enablePKCE. webOption is the same as oAuthAuthenticationOption in the view-based flows component.

data class OAuthOption(
    val webOption: OAuth2WebOption = OAuth2WebOption.WEB_VIEW,
    val enablePKCE: Boolean = true
)

No FlowOptions.Builder

In Jetpack Compose, Kotlin is the primary language used. With the help of the 'copy' function of the 'data' classes, we choose not to provide the 'builder' as would normally be the case using the view-based flows component. You can simply create an instance of FlowOptions with the constructor, and use the 'copy' function in other places to start a new flow with the same options.

No infoMessageOption

In the view-based flows component, there is a feature to show messages with either toast or dialog during the onboarding process.

However, many clients prefer to not see these messages provided by the SDK so, as a result, this feature has been removed. If you want to show dialogs in your customized flow, you can use the following API exposed in BaseFlow:

    fun showAlertDialog(
        @StringRes title: Int = com.sap.cloud.mobile.onboarding.compose.R.string.dialog_info_title,
        message: String,
        @StringRes positiveButtonText: Int = com.sap.cloud.mobile.fiori.compose.R.string.ok_button_label,
        positiveButtonClickListener: ViewClickListener = {},
        @StringRes negativeButtonText: Int? = null,
        negativeButtonClickListener: ViewClickListener = {},
        @StringRes neutralButtonText: Int? = null,
        neutralButtonClickListener: ViewClickListener = {}
    ) { ... }

In the preceding API, if the button text is not provided, then the corresponding button will not be shown on the dialog, so its click listener will also be ignored.

In other places in the client code where the instance of a BaseFlow is not available, use FioriAlertDialog if the client app is developed using Jetpack Compose.

EULA Property

useDefaultEulaScreen is now the only property related to the EULA screen. If this is set to 'false', then both the onboarding and the account creation flows will not use the internal EULA screen. Instead, the client code needs to provide its own EULA screen with the help of FlowActionHandler, which is described in the 'Extension Points' section.

Confirmation Options Removed

There are three properties in FlowOptions of the view-based flows component that are used for the logout, reset, and registration deletion flows. They were designed to allow the client code to provide its own confirmation dialogs if the predefined ones were insufficient. For the Jetpack Compose version, the confirmation dialogs provided by the SDK cannot be skipped, but the styles and the labels in the dialogs can be customized using the screenSettings property, which is described below.

Removal of the effectiveOAuthClientId Property

The effectiveOAuthClientId property of the view-based flow was marked as deprecated and it has now been completely removed from the Jetpack Compose version. FlowActionHandler helps the client code to identify the effective OAuth client, which is described in 'Extension Points'.

Screen Settings

The screenSettings property allows the client code to customize every screen during the onboarding or restore process.

data class CustomScreenSettings(
    val logoScreenSettings: ScreenLogoSettings = ScreenLogoSettings(),
    val eulaSettings: EulaScreenSettings = EulaScreenSettings(),
    val activationDiscoveryScreenSettings: ActivationDiscoveryScreenSettings = ActivationDiscoveryScreenSettings(),
    val activationSelectionScreenSettings: ActivationSelectionScreenSettings = ActivationSelectionScreenSettings(),
    val basicAuthenticationScreenSettings: BasicAuthenticationScreenSettings = BasicAuthenticationScreenSettings(),
    val biometricScreenSettings: List<BiometricScreenSettings> = listOf(),
    val launchScreenSettings: LaunchScreenSettings = LaunchScreenSettings(),
    val qrConfirmScreenSettings: QRConfirmScreenSettings = QRConfirmScreenSettings(),
    val qrCodeReaderScreenSettings: QRCodeReaderScreenSettings = QRCodeReaderScreenSettings(),
    val setPasscodeScreenSettings: SetPasscodeScreenSettings = SetPasscodeScreenSettings(),
    val signInScreenSettings: SignInScreenSettings = SignInScreenSettings(),
    val verifyPasscodeScreenSettings: VerifyPasscodeScreenSettings = VerifyPasscodeScreenSettings(),
    val consentScreenSettings: List<ConsentScreenSettings> = listOf(),
    val confirmationSettings: List<ConfirmationDialogSettings> = listOf()
)

The preceding CustomScreenSettings source code contains the settings for every screen used in the onboarding and restore flows. The client code can use them to provide its own labels and button captions for the screens.

There are three settings that are defined as lists: biometricScreenSettings, consentScreenSettings, and confirmationSettings, because there are cases where one screen will be used for different purposes.

For example, there is a screen during onboarding to enable the biometric authentication and there is another screen during the restore flow to unlock the app using biometrics: the screen implementation is the same, but the labels on the two screens should be different.

To allow the flows component to be able to pick the right screen settings, when you provide them, the type property is mandatory.

For example:

data class BiometricScreenSettings(
    val biometricScreenType: String,
    val iconHeight: Dp = 64.dp,
    @StringRes val title: Int = R.string.enable_biometric_title,
    @StringRes val description: Int = R.string.enable_biometric_description,
    @DrawableRes val icon: Int = R.drawable.biometrics,
    @StringRes val iconContentDescription: Int = R.string.sap_enable_biometric_content_desc,
    @StringRes val biometricAuthTitle: Int = R.string.enable_biometric_title,
    @StringRes val biometricCancelButton: Int = android.R.string.cancel
) : BaseScreenSettings

The biometricScreenType property must be chosen from 'BiometricScreenType.ENABLE.nameorBiometricScreenType.UNLOCK.name`, as shown below:

enum class BiometricScreenType {
    ENABLE, UNLOCK
}

Like the biometric screen settings, the consent screens and the confirmation dialog settings need to be chosen from:

//in flows-compose
enum class ConsentType {
    USAGE,
    CRASH_REPORT
}

//in onboarding-compose
enum class ConfirmationType {
    RESET, LOGOUT, DEL_REGISTRATION, FORGOT_PASSCODE
}

Fiori Compose Theme Customization

Use customStyles to customize the Fiori compose theme.

data class CustomStyles(
    val lightThemeAttributes: BaseAttributes = BaseAttributes(baseColors = BaseColors()),
    val darkThemeAttributes: BaseAttributes = BaseAttributes(baseColors = BaseColors())
)

To customize the Fiori compose theme, the client code needs to provide two sets of BaseAttributes, one for light mode, the other for dark mode. For details on how to customize the Fiori compose theme, please refer to the Fiori document.


Last update: November 30, 2023