Create Your Own Flow

Extend your flow class to the com.sap.cloud.mobile.flows.compose.flows.BaseFlow class, and implement the initialize function to add flow steps.

1. Create a flow class named TestFlow:

   Kotlin Copy

   class TestFlow(context: Context) : BaseFlow(context, "TestFlow") {
   
   }

2. Implement the initialize function to create and add a customized flow step to your own flow:

   Kotlin Copy

   override fun initialize() {
       val step1 = SingleStep(context, "step_1") {
           EulaScreen(
               eulaContentLocale = localeState.value,
               eulaScreenSettings = EulaScreenSettings(
                   eulaUrl = "file:///android_res/raw/custom_eula.html",
                   agreeButtonCaption = android.R.string.ok,
                   disagreeButtonCaption = android.R.string.cancel
               ),
               agreeViewClickListener = {
                   flowDone("step_1")
               },
               disagreeViewClickListener = {
                   terminateFlowWithMessage("Custom flow cancelled.")
               },
               webViewClient = object : WebViewClient() {
                   override fun shouldOverrideUrlLoading(
                       view: WebView?,
                       request: WebResourceRequest?
                   ): Boolean =
                       request?.url?.let { url ->
                           SDKCustomTabsLauncher.launchCustomTabs(context, url.toString())
                           true
                       } ?: false
               }
           )
       }
   
       addSingleStep(step1)
   }

   Show all 30 lines Show less

1. You can either add a single step or a nested flow with following methods:

   fun addSingleStep(step: SingleStep, secure: Boolean = false) fun addNestedFlow(flow: BaseFlow)

   In the flow created in the first section, we implemented a customized flow step “step1” and added the step with addSingleStep function. Now we can create another flow named “SubFlow” and add it as a sub-flow for “TestFlow” that we created in the first section:

   Kotlin Copy

   class SubFlow(context: Context) : BaseFlow(context, "SubFlow") {
       override fun initialize() {
           val step1 = SingleStep(context, "step_1") {
               ConsentScreen(
                   consentType = "CustomConsent",
                   consentScreenSettings = ConsentScreenSettings(
                       consentType = "CustomConsent",
                       description = R.string.demo_custom_consent_description,
                       agreeButtonCaption = android.R.string.ok,
                       disagreeButtonCaption = android.R.string.cancel
                   ),
                   agreeButtonClickListener = {
                       flowDone("step1_SubFlow")
                   },
                   disagreeButtonClickListener = {
                       terminateFlowWithMessage("Cancel the custom flow.")
                   }
               )
           }
   
           addSingleStep(step1)
       }
   }
   class TestFlow(context: Context) : BaseFlow(context, "TestFlow") {
       override fun initialize() {
           val step1 = SingleStep(context, "step_1") {
               ...
           }
   
           addSingleStep(step1)
           addNestedFlow(SubFlow(context = context))
       }
   }

   Show all 33 lines Show less

2. When a flow starts, by default the app will navigate to the first step added in the initialize function. If the first step should be determined at runtime, you can override the start function of BaseFlow and define your own logic for the flow start step. To navigate among your steps, you can use the navigateTo function.

   There are two steps in the flow created in the first section. The first step includes a EULA screen, and the second step is a sub-flow with consent screen. If the first step must be excluded, you can use the following code to navigate to the sub-flow when the first step with EULA screen is excluded:

   Kotlin Copy

   override fun start(popRoute: String?) {
       if(eulaExcluded) {
           navigateTo("SubFlow", popRoute)
       }     
   }

For more information, refer to Write Your Own Flow.

Congratulations! You have learned how to create your own flow using the Jetpack Compose Flows component!