open class FUICheckoutIndicatorView: NibDesignable

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.



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.


// 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

  • The current DisplayState of this checkout indicator. The initial value is DisplayState.processing. Changing the displayState property will trigger a redraw of the view.



    public private(set) var displayState: DisplayState = .inProgress
  • Changes the display state of this view. This changes the visual appearance of the view.

    • Parameters:
      • newState: the new display state to switch to.
      • completion: completion handler that will be called, once the display state change is done.



    public func changeDisplayState(to newState: DisplayState, completion: (() -> Void)? = nil)



    the new display state to switch to.


    completion handler that will be called, once the display state change is done.