Onboarding using FUIWelcomeScreen of SAP Cloud Platform SDK for iOS

The SAP Fiori framework of SAP Cloud Platform SDK for iOS has FUIWelcomeScreen class which is one of the onboarding patterns which can be used to display a welcome screen in the application. FUIWelcomeScreen is a subclass of UIViewController .

Why do we have to use FUIWelcomeScreen ? Cant we use any custom controller sub classed from UIVIewController. Yes you can, but FUIWelcomeScreen provides a very convenient and easy way to display welcome screen. It has built in UI Components which can be used after instantiation. There is no hassle of creating UI Components, IBAction’s , IBOutlet’s etc .

In this blog, I will demonstrate how you can programmatically  instantiate and use FUIWelcomeScreen. You can also design using Storyboard and then use segue to present the welcome screen.

This is how the Welcome Screen looks after implementation .

STEPS

I will use the project which is already created using SAP CP SDK. Since BasicAuthViewController is loaded initially for authentication , I will use this to present the Welcome screen.

Note that FUIWelcomeScreen is not supported in iPhone landscape orientation. Thus the app needs to switch to portrait mode before presenting the Welcome screen. In AppDelegate.swift , insert the following lines of code.

public var inFUIWelcomeScreen: Bool = false
func application(_ application: UIApplication, supportedInterfaceOrientationsFor window: UIWindow?) -> UIInterfaceOrientationMask {
        if !inFUIWelcomeScreen {
            return .allButUpsideDown
        } else {
            return .portrait
        }
    }

Once the user clicks “Sign In” button in Welcome screen, we will not show the Welcome Screen again. If the demo page is viewed , then we are showing the Welcome Screen again. For this , I have used concept of UserDefaults.

First, make sure that BasicAuthViewController  implements the delegate FUIOnboardingDelegate.

class BasicAuthViewController: UIViewController,<other delegates>,FUIOnboardingDelegate{

Enter the below lines of code in declaration section.

let defaults = UserDefaults.standard
var isDemoPageViewed = false

Override the viewDidAppear method of BasicAuthViewController and enter the following lines of code.

First, we get a reference to AppDelegate and rotate the view to Portrait mode. This is followed by   instantiation of  FUIWelcomeScreen . We set the state to configured to show the Sign In Button . Then we set the Detail Label, Button text ,Instruction text and present this view controller . Make sure to set the delegate . This is what the last line of code does.

override func viewDidAppear(_ animated: Bool) {
        if !defaults.bool(forKey: "hasViewed") && !isDemoPageViewed {
            (UIApplication.shared.delegate as! AppDelegate).inFUIWelcomeScreen = true
            UIDevice.current.setValue(UIInterfaceOrientation.portrait.rawValue, forKey: "orientation")
            
            let vcFUIWelcomeScreen = FUIWelcomeScreen.createInstanceFromStoryboard()
            vcFUIWelcomeScreen.state = .isConfigured
            vcFUIWelcomeScreen.welcomeDetailLabel.text = "Welcome to Northwind App."
            vcFUIWelcomeScreen.signInButton.setTitle("Sign In", for: .normal)
            vcFUIWelcomeScreen.instructionTextView.text = "Take a demo or start using the App. "
            self.present(vcFUIWelcomeScreen, animated: true, completion: nil)
            vcFUIWelcomeScreen.delegate = self
        }
}

When “Sign In” button is clicked, a delagate method didSelectSignIn is called. In this method we dismiss the welcome screen view controller and show the sign in screen. We set the user default variable to true and inform the app delegate that the app should now support both orientations by setting the variable to false.

func didSelectSignIn(_ controller: FUIWelcomeScreen) {
        self.dismiss(animated: true, completion: nil)
        defaults.setValue(true, forKey: "hasViewed")
        (UIApplication.shared.delegate as! AppDelegate).inFUIWelcomeScreen = false
}

When The Demo link is clicked, a delegate method didSelectDemoMode is called. In this , we instantiate a new View Controller to show Demo Screens of the App. For this a new view controller has to be created and configured.

func didSelectDemoMode(_ controller: FUIWelcomeScreen) {
        self.dismiss(animated: true, completion: nil)
        defaults.setValue(false, forKey: "hasViewed")
        isDemoPageViewed = true
        if let pageViewController = storyboard?.instantiateViewController(withIdentifier: "demoView") as? DemoViewController {
            present(pageViewController, animated: true, completion: nil)
        }
        (UIApplication.shared.delegate as! AppDelegate).inFUIWelcomeScreen = false
}

RESULT

That’s it . If you build and run the app, you can see new Welcome Screen from Fiori framework . When you click “Demo Mode”, the demo of the App is shown.  When you click Sign In, the welcome screen is dismissed and Login Screen is shown.