Feedback Indicators

FUIToastMessage provides convenience class methods for showing an overlay toast-type message centered on screen. Only one message can be visible at the same time and the FUIToastMessage class makes sure that previous messages are properly dismissed before the next is shown.

You use the show() method to display messages. By default, the toast message is shown for one second but applications can change that duration.

Usage

Show Fullscreen

FUIToastMessage.show(message: "This is a message")

Show Fullscreen with Custom Duration

FUIToastMessage.show(message: "This is a message", withDuration: 3)

FUIBannerMessageView shows an overlay message centered in the screen underneath a navigation bar, or one of FUIObjectHeader, FUIProfileHeader, and FUIKPIHeader. FUINavigationBar contains a FUIBannerMessageView by default.

Call show function on a FUIBannerMessageView instance to show the message. By default, the message is shown centered on screen.

Usage

FUINavigationBar has a FUIBannerMessageView prepared for you. Usually you don’t need to create an instance of it. For FUIObjectHeader, FUIProfileHeader, and FUIKPIHeader, however, you need to allocate a FUIBannerMessageView or its subclasses to the bannerMessage property of the corresponding header view.

Setup

To display the banner message in a navigation bar, setup a FUINavigationBar in your navigation controller. You can set either in a nib file or programmatically.

Show message

guard let navBar = self.navigationController?.navigationBar as? FUINavigationBar else {
   return
}
navBar.bannerView?.show(message: "This is a test banner", withDuration: 1, animated: true)

/// An example of a UITableViewController with `FUIBannerMessageView` in an `FUIObjectHeader`
class BannerObjectHeaderBannerTVC: UITableViewController {

    let objectHeader = FUIObjectHeader()

    let bannerView = FUIBannerMessageView()

    override func viewDidLoad() {
        self.tableView.tableHeaderView = objectHeader
        super.viewDidLoad()

        bannerView.isFading = false
        objectHeader.bannerView = bannerView
    }

    override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)
        bannerView.show(message: "200k pending to upload example with text showing wrapping to two lines", withDuration: 5 ,animated: true)
    }

    // ...

}

Theming

Supported style classes

fdlFUIBannerMessageView
fdlFUIBannerMessageView_titleLabel
fdlFUIBannerMessageView_dividerTop
fdlFUIBannerMessageView_dividerBottom
fdlFUIBannerMessageView_blurView
fdlFUIBannerMessageView_contentView
fdlFUIBannerMessageView_closeImage

FUIOfflineBannerMessageView shows an overlay message centered in the screen underneath a navigation bar. FUIOfflineBannerMessageView must be attached to a FUINavigationBar to make it work properly. FUIOfflineBannerMessageView is a subclass of FUIBannerMessageView and FUINavigationBar can contain only one FUIBannerMessageView.

Call show() on a FUIOfflineBannerMessageView instance to show the message. By default, the message is shown centered on screen for four seconds.

Usage

Usually, the creation of FUIOfflineBannerMessageView and attachment to FUINavigationBar is in the viewDidAppear function of a UIViewController. As the code indicates below:

override public func viewDidAppear(_ animated: Bool) {
    super.viewDidAppear(animated)

    guard let navBar = self.navigationController?.navigationBar as? FUINavigationBar else {
        return
    }

    let offlineBannerView = FUIOfflineBannerMessageView()
    navBar.bannerView = offlineBannerView
    offlineBannerView.show(message: "200k pending to upload example with text showing wrapping to two lines")
    self.offlineBanner = offlineBannerView
}

Theming

fdlFUIOfflineBannerMessageView_titleLabel {
font-size: 13;
font-name: mediumSystem;
font-color: @primary7;
font-color-highlighted: @tintColorDark;
}

fdlFUIOfflineBannerMessageView_dividerBottom {
background-color: @line;
}

FUIProgressBannerMessageView shows an overlay message centered in the screen underneath a navigation bar with a progress bar on the top of the message view. FUIProgressBannerMessageView must be attached to a FUINavigationBar to make it work properly. FUIProgressBannerMessageView is a subclass of FUIBannerMessageView and FUINavigationBar can contain only one FUIBannerMessageView.

Call function show on a FUIProgressBannerMessageView instance to show the message. By default, the message is shown centered on screen. This message view will stayed on the screen until the progress reached 1.0 even if user navigate to other views. Developer may choose to dismiss the message veiw when user navigates to other views by calling the dismissBanner function of the FUIProgressBannerMessageView.

Developer should use the update function to update the progress of the progress bar. When the progress reaches 1.0, the default behavior is that there will be a check mark and optional message, the completionMessage property of the FUIProgressBannerMessageView, displayed for five seconds. Then the FUIProgressBannerMessageView will be dismissed. Developer can use the completion parameter in update function to override this default behavior.

Usage

Usually, the creation of FUIProgressBannerMessageView and attachment to FUINavigationBar is in the viewDidAppear function of a UIViewController. As the code indicates below:

var syncBanner: FUIProgressBannerMessageView?

override public func viewDidAppear(_ animated: Bool) {
    super.viewDidAppear(animated)

    guard let navBar = self.navigationController?.navigationBar as? FUINavigationBar else {
        return
    }

    let syncBannerView = FUIProgressBannerMessageView()
    navBar.bannerView = syncBannerView
    syncBannerView.isFadedInAndOut = false
    syncBannerView.show(message: "Cancel Sync")
    syncBannerView.didSelectHandler = {
        self.cancelSync()
    }
    syncBannerView.completionMessage = "Sync Complete"
    self.syncBanner = syncBannerView
}

override func viewWillDisappear(_ animated: Bool) {
    super.viewWillDisappear(animated)
    syncBanner?.dismissBanner(animated: true)
}

func cancelSync() {
    // make call to cancel the sync
    // ...

    syncBanner?.dismissBanner(animated: true)
}

func advanceProgress(progress: Float) {
    syncBanner?.update(progress: progress, animated: true, completion: nil)
}

Theming

fdlFUIProgressBannerMessageView_titleLabel {
font-size: 13;
font-name: mediumSystem;
font-color: @tintColorDark;
font-color-highlighted: @tintColorTapStateDark;
}

fdlFUIProgressBannerMessageView_dividerBottom {
background-color: @line;
}

fdlFUIProgressBannerMessageView_messageBannerDividerTop {
background-color: @chart1;
}

fdlFUIProgressBannerMessageView_progressBar {
progress-tint-color: @chart2;
track-tint-color: @line;
}

fdlFUIProgressBannerMessageView_contentViewTapped {
background-color: @primary5;
}

fdlFUIProgressBannerMessageView_completionLabel {
font-size: 13;
font-name: mediumSystem;
font-color: @primary7;
}

fdlFUIProgressBannerMessageView_syncIcon {
tint-color: @tintColorDark;
}

fdlFUIProgressBannerMessageView_completionCheckMark {
image: green-check-mark1;
tint-color: @primary7;
}

fdlFUIProgressBannerMessageView_closeIcon {
tint-color: @primary2_lightBackground;
}

FUILoadingIndicatorView is an IBdesignable UI component. A loading indicator shows that something is currently in progress. It shows a UIActivityIndicatorView to visualize progress and a UILabel indicating to the user what is in progress.

By default, this view is visible and the animation is stopped. To start the animation call `startAnimating()`.

## Initialization ### Programmatically:

 let loadingIndicatorView = FUILoadingIndicatorView(frame: CGRect())

### Inside a Storyboard or xib:

1. Drag and drop an UIView component to Interface Builder canvas.
2. Switch class name from UIView to FUILoadingIndicatorView, and set module to SAPFiori.
3. Create an outlet of the loading indicator to be able to access its properties.

## Usage

 loadingIndicatorView.show()
 // do something
 loadingIndicatorView.dismiss()

## Animation The animation of the activity indicator can be started or stopped without affecting the visibility of the view.

 loadingIndicatorView.startAnimating()
 // do something
 loadingIndicatorView.stopAnimating()

## Theming

The styleClass of the view is fdlFUILoadingIndicatorView.

In the .nss file you can use the following parameters:

• fdlFUILoadingIndicatorView_textLabel: changes the appearance of the textLabel

### Example:

fdlFUILoadingIndicatorView_textLabel {
     background-color: red;
     border-color: green;
     border-width: 2;
     corner-radius: 2;
     font-color: blue;
     font-color-highlighted: yellow;
     font-name: Avenir;
     font-size: 15;
     height: 50;
     shadow-color: black;
     shadow-offset: 1, 2;
     shadow-opacity: 0.5;
     shadow-radius: 2;
     text-align: center;
     text-alpha: 0.9;
     text-auto-fit: true;
     text-shadow-color: black;
     text-shadow-offset: 1, 2;
     text-transform: uppercase;
     text-line-clamp:6;
     width: 100;
 }

• fdlFUILoadingIndicatorView_activityIndicator: changes the appearance of activityIndicator

### Example:

 fdlFUILoadingIndicatorView_activityIndicator {
    color: blue;
 }

FUIModalLoadingIndicatorView shows a FUILoadingIndicatorView centered in a container area of the screen and disables interaction. The container can be either a view or a window.

By default, the loading indicator is shown centered on screen. The view is not visible and the animation is stopped until show() is called.

Initialization

let modalLoadingIndicatorView = FUIModalLoadingIndicatorView()

Usage

Show Fullscreen

modalLoadingIndicatorView.show()
// do something
modalLoadingIndicatorView.dismiss()

Show in View

let containerView = UIView()
modalLoadingIndicatorView.show(inView: containerView)
// do something
modalLoadingIndicatorView.dismiss()

FUIModalLoadingIndicator provides convenience class methods for showing an overlay modal loading indicator view centered on screen.

You use the show() method to display a FUIModalLoadingIndicatorView. The show() methods return the created FUIModalLoadingIndicatorView instance that can be used to dismiss() the view again.

## Usage

### Show Fullscreen

 //show the modal view:
 let modalLoadingView = FUIModalLoadingIndicator.show()
 ...

// dismiss the modal view:
modalLoadingView.dismiss()

FUIProcessingIndicatorView is an IBDesignable UI component. A processing indicator shows that a task is in progress. It shows a circular activity indicator to visualize indeterminate processing and has an optional UILabel below the activity indicator indicating to the user what is being processed.

By default, this view is not visible and the animation is stopped. The activity indicator has a predefined size and line width that depends on the horizontal size class.

Initialization

Programmatically:

let processingIndicatorView = FUIProcessingIndicatorView(frame: CGRect())

Inside a Storyboard or xib:

1. Drag and drop a UIView component to Interface Builder’s canvas.
2. Switch class name from UIView to FUIProcessingIndicatorView, and set module to SAPFiori.
3. Create an outlet of the processing indicator view to be able to access its properties.

Usage

processingIndicatorView.show()
// do something
processingIndicatorView.dismiss()

Animation

The animation of the processing indicator can be started or stopped without affecting the visibility of the view.

processingIndicatorView.startAnimating()
// do something
processingIndicatorView.stopAnimating()

Theming

The styleClass of the view is fdlFUIProcessingIndicatorView.

In the .nss file you can use the following parameters:

• fdlFUIProcessingIndicatorView_textLabel: changes the appearance of the textLabel

Example:

fdlFUIProcessingIndicatorView_textLabel {
   background-color: red;
   border-color: green;
   border-width: 2;
   corner-radius: 2;
   font-color: blue;
   font-color-highlighted: yellow;
   font-name: Avenir;
   font-size: 15;
   height: 50;
   shadow-color: black;
   shadow-offset: 1, 2;
   shadow-opacity: 0.5;
   shadow-radius: 2;
   text-align: center;
   text-alpha: 0.9;
   text-auto-fit: true;
   text-shadow-color: black;
   text-shadow-offset: 1, 2;
   text-transform: uppercase;
   text-line-clamp:6;
   width: 100;
}

FUIModalProcessingIndicator provides convenience class methods for showing an overlay modal processing indicator view centered on screen.

You use the show() method to display a FUIModalProcessingIndicatorView. The show() methods return the created FUIModalProcessingIndicatorView instance that can be used to dismiss() the view again.

Usage

Show Fullscreen

//show the modal view:
let modalProcessingView = FUIModalProcessingIndicator.show()
...

// dismiss the modal view:
modalProcessingView.dismiss()

FUIModalProcessingIndicatorView shows a FUIProcessingIndicatorView centered in a container area of the screen and disables interaction. The container can be either a view or a window. An overlay is shown behind the processing indicator, which covers the whole container. The overlay can be either set to translucent white or to be using a UIVisualEffectView to achieve a blurred background.

By default, the processing indicator is shown centered on screen and shows a translucent white overlay. The view is not visible and the animation is stopped until show() is called.

To change the background mode to blurred, simply assign BackgroundMode.blurred to the backgroundMode property.

Initialization

let modalProcessingIndicatorView = FUIModalProcessingIndicatorView()

Usage

Show Fullscreen

modalProcessingIndicatorView.show()
// do something
modalProcessingIndicatorView.dismiss()

Show in View

let containerView = UIView()
modalProcessingIndicatorView.show(inView: containerView)
// do something
modalProcessingIndicatorView.dismiss()

FUIProgressIndicatorControl is an IBDesignable UI component. It can be used to display a (download) progress gauge as used in Apple’s App Store and iTunes Store for downloading apps or music.

Different display states control the visual appearance of the control and the options the user has to interact with the control.

Initialization

Programmatically:

let progressIndicatorControl = FUIProgressIndicatorControl(frame: CGRect())

Inside a Storyboard or xib:

1. Drag and drop an UIView component to Interface Builder canvas.
2. Switch class name from UIView to FUIProgressIndicatorControl, and set module to SAPFiori.
3. Control-drag from the progress indicator control in Interface Builder to your source file to create an outlet of the FUIProgressIndicatorControl and to be able to access its properties.
4. Control-drag from the progress indicator control in Interface Builder to your source file and create an action for the FUIProgressIndicatorControl. Make sure to select TouchUpInside as event type. Specify an action name and implement the generated callback method to react accordingly once the user tapped the control.

Usage

// If the action was not created in interface builder as described before, add it programmatically.
progressIndicatorControl.addTarget(self, action: #selector(myActionMethod), for: .touchUpInside)

// Initially, call the changeDisplayState(to:) method to change the views state. You can do that in viewDidLoad() or later.
// The state .inProgress indicates that progress has started. Usually you would show this state when you start connecting to
// a server for downloading data.
progressIndicatorControl.changeDisplayState(to: .inProgress)

// Once the connection has been established and the download has started, you can change the display state to .loadingPausable or 
// .loadingStoppable:
progressIndicatorControl.changeDisplayState(to: .loadingPausable)

// If the user tapped the control, while it was in .loadingPausable state, you can change it to .loadingPaused
// For example:
@IBAction func myActionMethod(_ sender: FUIProgressIndicatorControl) {
   switch sender.displayState {
   case .inProgress:
       // do nothing if user tapped on control while it was .inProgress.
       break
   case .loadingPausable:
       sender.changeDisplayState(to: .paused)
       return
   case .loadingStoppable:
       // user cancelled the e.g. download, so we hide the control
       sender.isHidden = true
   }
}

// To set the progress value proceed as follows:
progressIndicatorControl.update(progress: 0.5, animated: false)
progressIndicatorControl.update(progress: 1, animated: true) {
   // Once the download is completed, you might want to hide the progress indicator
   // and show a link to the downloaded resource, etc..
   self.progressIndicatorControl.isHidden = true
   self.openDownloadedFileButton.isHidden = false
}

Theming

Supported style classes

fdlFUIProgressIndicatorControl

FUICheckoutIndicatorView is an IBDesignable UI component. It uses two distinct states to display either a (download) progress or a completed status. You can change between the displayed states by modifying the displayState property.

Initialization

Programmatically:

let checkoutIndicatorView = FUICheckoutIndicatorView(frame: CGRect())

Inside a Storyboard or xib:

1. Drag and drop a UIView component to Interface Builder’s canvas.
2. Switch custom class name from UIView to FUICheckoutIndicatorView and set module to SAPFiori.
3. Create an outlet of the FUICheckoutIndicatorView to be able to access its properties.

Usage

// After the checkout indicator view is shown, you might want to start a lengthy (download or finalization) process e.g. synchronize data.
// Once this process is complete, change the displayState to .completed and hide the view when the completion handler is called:
checkoutIndicatorView.state = .completed {
   self.checkoutIndicatorView.isHidden = true
}

Theming

Supported style classes

fdlFUICheckoutIndicatorView

A view controller to be presented as a modal form sheet. The view controller shows a CheckoutIndicatorView, which is drawn based on the set displayState.

Initialization

Programmatically:

let viewController = FUIModalCheckoutViewController.instantiateViewController()
viewController.title = "My Modal Checkout Title"
viewController.text = "Processing"
self.present(viewController, animated: false)

Inside a Storyboard:

1. Drag and drop a Storyboard Reference component to Interface Builder’s canvas.
2. Enter FUIModalCheckout as Storyboard and com.sap.cp.sdk.ios.SAPFiori as Bundle.
3. Create a segue between your Button and the storyboard reference and select Present Modally as action.
4. Select the segue and in Interface Builder give it an identifier (e.g. showModalCheckout).
5. In your view controller override prepare(for segue: UIStoryboardSegue, sender: Any?)
6. From the segue get the destination and cast it to FUIModalCheckoutViewController.
7. You can then register a delegate or change the controller’s display state.

Usage

// override `prepareForSegue`-method and retrieve view controller from segue destination.
override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
   guard let showModalCheckoutSegue = segue.identifier, showModalCheckoutSegue == "showModalCheckout" else {
       return
   }

   // keep a (weak) reference to modalCheckoutViewController
   self.modalCheckoutViewController = segue.destination as? FUIModalCheckoutViewController
   self.modalCheckoutViewController?.delegate = self
}

// implementation of FUIModalCheckoutViewControllerDelegate callback.
public func dismissController(_ controller: FUIModalCheckoutViewController) {
   //stop any loading or checkout! User cancelled it...
   //... or set state to completed.
   self.modalCheckoutViewController?.changeDisplayState(to: .completed) {
       self.modalCheckoutViewController?.dismiss(animated: true)
   }
}

// While the FUIModalCheckoutViewController is shown, you might want to change the display state according to 
// your loading / checkout progress. E.g. when you are done, you can change the state to `.completed`.
self.modalCheckoutViewController?.displayState = .completed
self.modalCheckoutViewController?.text = "Completed"

Theming

Supported style classes

fdlFUIModalCheckoutViewController
fdlFUIModalCheckoutViewController_textLabel
fdlFUIModalCheckoutViewController_navigationBar

Attention

The delegate object with type FUIModalCheckoutViewControllerDelegate is declared as a weak reference. So 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.

Delegate protocol for classes that need to be informed of user interaction with FUIModalCheckoutViewController.

FUIFeedbackScreen is an UIViewController used to display a feedback screen for the application. The screen mainly displays feedback messages and a feedback action button.

There are 4 FUILabels created for feedback messages. They are messageNameLabel, messageDetailLabel, messageEmphasisLabel, and messageFootnoteLabel. Since the screen is implemented based on the FUIFeebackScreen design spec with an action button and either a combination of messageNameLabel and messageDetailLabel and all 4 labels., it is expected that application sets label text to either messageNameLabel and messageDetailLabel only or all the 4 labels.

The action button, messageActionButton, has Touch Up Inside event hooked up with the didTapActionButton closure. Application can implement didTapActionButton closure to perform desired tasks after the button is tapped.

FUIFeedbackScreen is implemented in FUIFeedbackScreen.storyboard. There are two ways to launch the screen:

• Use another story board and using a Present Modally segue to FUIFeedbackScreen storyboard in SAPFiori framework bundle. App programmer needs to provide the properties needed in UIController‘s prepare for segue function:

 override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
 let vc = segue.destination as! FUIFeedbackScreen
     vc.didTapActionButton = {
     self.showAppMainView(vc)
 }
 vc.navigationItem.title = "Error"
 //layout 1 that sets the 2 labels' text and the button
 //vc.messageNameLabel.text = "Task does not exist"
 //vc.messageDetailLabel.text = "Unable to save changes as the task does not exists."
 //vc.messageActionButton.setTitle("Continue", for: .normal)

 //layout 2 that sets all 4 labels' text and the button
 vc.messageNameLabel.text = "Sign In Failed"
 vc.messageDetailLabel.text = "You can try entering your passcode again in"
 vc.messageEmphasisLabel.text = "5 minutes"
 vc.messageFootnoteLabel.text = "Or reset your passcode by entering your credentials."
 vc.messageActionButton.setTitle("Reset Passcode", for: .normal)
 }

• Programmatically loads it:

 let vc = FUIFeedbackScreen()
 vc.didTapActionButton = {
 self.showAppMainView(vc)
 }
 vc.navigationItem.title = "Error"
 //layout 1 that sets the 2 labels' text and the button
 //vc.messageNameLabel.text = "Task does not exist"
 //vc.messageDetailLabel.text = "Unable to save changes as the task does not exists."
 //vc.messageActionButton.setTitle("Continue", for: .normal)

 //layout 2 that sets all 4 labels' text and the button
 vc.messageNameLabel.text = "Sign In Failed"
 vc.messageDetailLabel.text = "You can try entering your passcode again in"
 vc.messageEmphasisLabel.text = "5 minutes"
 vc.messageFootnoteLabel.text = "Or reset your passcode by entering your credentials."
 vc.messageActionButton.setTitle("Reset Passcode", for: .normal)

## Theming Example nss definitions

 fdlFUIFeedbackScreen_messageNameLabel {
     font-style: body;
     font-color: @primary1;
 }

 fdlFUIFeedbackScreen_messageDetailLabel {
     font-style: subheadline;
     font-color: @primary1;
 }


 fdlFUIFeedbackScreen_messageEmphasisLabel {
     font-size: 17;
     font-name: boldSystem;
     font-color: @primary1;
 }

 fdlFUIFeedbackScreen_messageFootnoteLabel {
     font-style: subheadline;
     font-color: @primary1;
 }

 fdlFUIFeedbackScreen_messageActionButton {
     font-style: callout;
     font-color: @primary6;
     corner-radius: 8;
     background-color-normal: @tintColorDark;
     background-color-highlighted: @backgroundGradientTop;
 }