Welcome Screen¶
FUIWelcomeScreen
¶
open class FUIWelcomeScreen: FUIWelcomeController, UITextFieldDelegate, FUIBlurNavigationBarViewController
This UIViewController
is used to display a welcome/launch screen to the application for onboarding. The screen mainly displays the application name, instructions on how to start the activation process and an option to trigger the demo mode of the application.
Application can implement the FUIWelcomeControllerDelegate
protocol, to present the demo mode of the application by adopting with the didSelectDemoMode(_:)
function, to proceed sign in by implementing the shouldContinueUserOnboarding(_:)
function, to proceed configuration based on the configuration options by implementing the welcomeController(_:willNavigateToActivationScreen:)
, welcomeController(_:shouldTryUserEmail:)
, or welcomeController(_:willNavigateToScannerScreen:)
functions.
FUIWelcomeScreen
is implemented in FUIWelcomeScreen.storyboard
. There are two ways to launch the screen:
- Use another story board and use a
Present Modally
segue toFUIWelcomeScreen
storyboard inSAPFiori
framework withcom.sap.cp.sdk.ios.SAPFiori
as Bundle. App programmer needs to provide the properties needed inUIController
's prepare for segue function:
override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
let vc = segue.destination as! FUIWelcomeScreen
vc.state = .isConfigured
vc.detailLabel.text = "Thank you for downloading SAP Project Companion for Managers."
vc.delegate = self
}
- Programmatically loads it:
let vc = FUIWelcomeScreen.createInstanceFromStoryboard()
vc.state = .isConfigured
vc.detailLabel.text = "Thank you for downloading SAP Project Companion for Managers."
self.navigationController?.pushViewController(vc, animated: true)
Settings for possible welcome screens being launched:
-
Launch with Standard: Application contains the necessary configurations to connect to mobile services, and should prompt user to Start.
--state
property:.isConfigured
--configurationOptions
property: not required. Value would be ignored. --delegate
function(s) to be implemented:shouldContinueUserOnboarding(_:)
,didSelectDemoMode(_:)
ifisDemoAvailable
istrue
. -
Welcome Screen Launched with Link: Application has not been configured, and does not use
FUIWelcomeScreen
flow to obtain configuration. --state
property:.notConfigured
--configurationOptions
property: empty value --delegate
function(s) to be implemented:didSelectDemoMode(_:)
ifisDemoAvailable
istrue
-
Welcome Screen Launched with Discovery Service: Application has not been configured, and should prompt the end user for their email address. --
state
property:.notConfigured
--configurationOptions
property:.discoveryService
--delegate
function(s) to be implemented:welcomeController(_:shouldTryUserEmail:)
,didSelectDemoMode(_:)
ifisDemoAvailable
istrue
-
Welcome Screen Launched with Scanner: Application has not been configured, and should prompt the end user to launch the Barcode Scanner to obtain connection settings. --
state
property:.notConfigured
--configurationOptions
property:.barcodeScanner
--delegate
function(s) to be implemented:welcomeController(_:willNavigateToScannerScreen:)
,didSelectDemoMode(_:)
ifisDemoAvailable
istrue
-
Welcome Screen Launched with Activation: Application has not been configured, and should prompt the end user to pick between email address entry, or the Barcode Scanner, to obtain connection settings. --
state
property:.notConfigured
--configurationOptions
property: [.discoveryService, .barcodeScanner
] --delegate
function(s) to be implemented:welcomeController(_:willNavigateToActivationScreen:)
,didSelectDemoMode(_:)
ifisDemoAvailable
istrue
Note that the FUIWelcomeScreen
is supported for iPad portrait and landscape orientation and iPhone portrait orientation only.
Since the screen is not supported in iPhone landscape orientation, the app needs to switch to portrait mode before presenting the screen.
And AppDelegate
needs to lock the screen orientation when these screens are shown, similar to the following code snippet.
In app's AppDelegate
:
public var inFUIWelcomeScreen: Bool = false
// implement this function to support only portrait orientation when FUIWelcomeScreen is displayed in iPhone.
func application(_ application: UIApplication, supportedInterfaceOrientationsFor window: UIWindow?) -> UIInterfaceOrientationMask {
if !inFUIWelcomeScreen {
return .allButUpsideDown
} else {
return .portrait
}
}
Before presenting the FUIWelcomeScreen
:
// Let `AppDelegate` know that we are entering the screen
(UIApplication.shared.delegate as! AppDelegate).inFUIWelcomeScreen = true
// Make sure we rotate to portrait mode
let value = UIInterfaceOrientation.portrait.rawValue
UIDevice.current.setValue(value, forKey: "orientation")
// Present the screen
let vc = FUIWelcomeScreen.createInstanceFromStoryboard()
vc.detailLabel.text = "Thank you for downloading SAP Project Companion for Managers."
self.navigationController?.pushViewController(vc, animated: true)
After dismissing the Passcode or Touch ID screen:
onboardingScreen.dismiss(animated: true, completion: nil)
// Let AppDelegate know that we are exiting the view
(UIApplication.shared.delegate as! AppDelegate).inFUIWelcomeScreen = false
Theming¶
Supported style classes
fdlFUIWelcomeScreen
fdlFUIWelcomeScreen_headlineLabel
fdlFUIWelcomeScreen_detailLabel
fdlFUIWelcomeScreen_emailTextField
fdlFUIWelcomeScreen_primaryActionButton
fdlFUIWelcomeScreen_footnoteLabel
fdlFUIWelcomeScreen_footnoteActionButton
fdlFUIWelcomeScreen_logoImageView
fdlFUIWelcomeScreen_navigationBar
fdlFUIWelcomeScreen_cancelButton
fdlFUIWelcomeScreen_loadingIndicatorView
fdlFUIWelcomeScreen_loadingIndicatorView_activityIndicator
fdlFUIWelcomeScreen_loadingIndicatorView_textLabel
Attention¶
-
The delegate object with type
FUIWelcomeControllerDelegate
is declared as a weak reference. On deallocation it will be automatically set to nil. To keep it alive as expected, developer should retain the delegate object during its whole execution scope. -
Developer can replace the logo image in the
FUIWelcomeScreen
using theming nss file. For example:
fdlFUIWelcomeScreen_logoImageView {
image-name: MyCompanyLogo.png;
}
Or, developer could use the logoImageView
property to set the logo image directly.