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.

    Note

    A toast message is meant to be used for short messages and is limited to one line of text by default. This can be changed by applications by setting the maxNumberOfLines parameter to another value.

    Usage

    Show Fullscreen

    FUIToastMessage.show(message: This is a message)
    

    Show Fullscreen with Custom Duration

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

    See more

    Declaration

    Swift

    public class FUIToastMessage
  • FUIBannerMessageView shows an overlay message centered in the screen underneath a navigation bar. FUIBannerMessageView must be attached to a UINavigationBar to make it work properly. FUINavigationBar contains a FUIBannerMessageView by default.

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

    Usage

    FUINavigationBar has a FUIBannerMessageView prepared for you. Usually you don’t need to create an instance of it.

    Setup

    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)
    

    See more

    Declaration

    Swift

    open class FUIBannerMessageView: NibDesignable
  • 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;
     }
    
    See more

    Declaration

    Swift

    open class FUILoadingIndicatorView: NibDesignable
  • 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()
    

    See more

    Declaration

    Swift

    open class FUIModalLoadingIndicatorView: NibDesignable
  • 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()
    
    See more

    Declaration

    Swift

    public class FUIModalLoadingIndicator
  • 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;
    }
    

    See more

    Declaration

    Swift

    open class FUIProcessingIndicatorView: NibDesignable
  • 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()

    See more

    Declaration

    Swift

    public class FUIModalProcessingIndicator
  • 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()
    

    See more

    Declaration

    Swift

    open class FUIModalProcessingIndicatorView: NibDesignable
  • 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 }

    See more

    Declaration

    Swift

    open class FUIProgressIndicatorControl: NibDesignableControl
  • 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
    }
    

    See more

    Declaration

    Swift

    open class FUICheckoutIndicatorView: NibDesignable
  • 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

    See more

    Declaration

    Swift

    open class FUIModalCheckoutViewController: UIViewController
  • Delegate protocol for classes that need to be informed of user interaction with FUIModalCheckoutViewController.

    See more

    Declaration

    Swift

    public protocol FUIModalCheckoutViewControllerDelegate : class
  • FUIFeedbackScreen is an UIViewController used to display a feedback screen for the application. The screen mainly displays feedback messages and a feedback action button.

    FUIFeedbackScreen

    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
     //This is a must.  Without calling view.layoutSubviews(), the subviews are not initialized. A subview like vc.messageNameLabel is still nil
     vc.view.layoutSubviews()
     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.titleLabel?.text = "Continue"
    
     //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.titleLabel?.text = "Reset Passcode"
     }
    
    
    • 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.titleLabel?.text = "Continue"
    
     //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.titleLabel?.text = "Reset Passcode"
    
    
    See more

    Declaration

    Swift

    open class FUIFeedbackScreen: UIViewController