Get Familiar with Jetpack Compose Flows Component by a Wizard-Generated Application

1. Open the project you previously created using the SAP BTP SDK Wizard for Android.

2. Press Shift twice and type build.gradle to open the build.gradle file of the app module.

3. Go to the dependencies section and find the dependency declaration for the Compose version of Flows. onboarding-compose contains the UI screens and flows-compose contains the Compose version of the Flows API and logic.

   !

   

1. Open the project you previously created using the SAP BTP SDK Wizard for Android.

2. In Android Studio, on Windows, press Ctrl+N, or, on a Mac, press command+O, and type WelcomeActivity to open WelcomeActivity.kt.

3. On Windows, press Ctrl+F12, or, on a Mac, press command+F12, and type startFlow to move to the startOnboarding method. To start the onboarding process, firstly create a FlowContext instance that contains the information required by the flow, such as the application information, customized screen settings, the flow state listener, etc. Then call the startFlow method of the FlowUtil class to start the onboarding flow. Compared to the view-based Flows, the ‘callback’ function has only two arguments, not three as in the view-based Flows. The first argument is the result code, which could be either RESULT_OK or RESULT_CANCEL, the second one is a ‘data’ intent.

   !

   

fun startOnboarding(context: Context, appConfig: AppConfig) {
    TimeoutLockService.updateApplicationLockState(true)
    WelcomeActivity.logger.debug("Before starting flow, lock state: {}", ApplicationStates.applicationLocked)
    FlowUtil.startFlow(
        context,
        flowContext = getOnboardingFlowContext(context, appConfig)
    ) { resultCode, data ->
        if (resultCode == Activity.RESULT_OK) {
            onlineInitializationAfterOnboarding(context) {
                launchMainBusinessActivity(context)
            }
            WelcomeActivity.logger.debug("After flow, lock state: {}",  ApplicationStates.applicationLocked)
        } else {
            startOnboarding(context, appConfig)
        }
    }
}

Notice that by default, the type of a flow is FlowType.ONBOARDING. To start a different type of flow, such as a Change Passcode flow, the client code must specify the flow type in the FlowContext instance. Besides the parameters specified above, there are also many other parameters in the FlowContext class that can be modified to allow the client code to customize a flow. When the values of the parameters are not specified in the client code, the default values will be used. The details of all parameters in the FlowContext class will be explained in subsequent tutorials.

4. FlowStateListener is a parameter in the FlowContext class. In Android Studio, on Windows, press Ctrl+N, or, on a Mac, press command+O, and type WizardFlowStateListener to open WizardFlowStateListener.kt. This class is a sample implementation for the callbacks defined in the FlowStateListener class. The callback functions in ‘FlowStateListener’ and the execution sequences are the same as in view-based Flows, but all of them are marked ‘suspend’ in the Compose version of Flows. This will make the client code easier to execute logic in different Dispatchers, and also make the execution sequence easier to manage. The details of FlowState and FlowStateListener will be explained in subsequent tutorials.

1. The Jetpack Compose Flows component provides the required UI screens for the onboarding process and passcode management, including the end user license agreement (EULA) screen for the user to understand and agree to the terms of using the app, the QR scan screen to get the application configuration, the sign-in screen for user authentication, and passcode screens for the user to create and confirm their passcode. Compared with the view-based Flows, the UI design is the same, but all the screens are implemented using Android Jetpack Compose.

2. There are different combinations of the screens depending on the different application configuration and user options in the FlowContext instance. The following are some screenshots in the onboarding process of the project previously generated by the wizard. The details for how to customize the screens and include or exclude a screen in a flow will be explained in subsequent tutorials.

   

Congratulations! You now understand the basic concepts of the Jetpack Compose Flows component and have examined its usage in the project created using the SAP BTP SDK Wizard for Android!