Supporting Types

  • A wrapper on String, supporting UILabel-like properties for text, font and textColor.

    See more

    Declaration

    Swift

    public class FUIText : FUITextProtocol, ExpressibleByStringLiteral
    extension FUIText: Initializable
  • Subclass of UILabel, implementing onChangeHandler that is invoked on changes to the value property.

    Theming

    Base class paths:

    fdlFUILabel {}
    

    Supported Text attributes:

    font-color (Color)
    font-name (FontName)
    font-style (UIFontTextStyle)
    font-size (Number)
    text-align (TextAlign)
    text-line-clamp (Integer)
    
    See more

    Declaration

    Swift

    open class FUILabel : UILabel, FUIContentCopyable
  • FUIImageView is an enhanced Fiori style UIImageView that provides the option of applying a circular mask to the view’s image property. The view also exposes properties for specifying the width and color of an optional border around the image.

    The contentMode of the FUIImageView is set the scaleAspectFit by default

    Remark

    Implements @IBDesignable

    Usage

    • Initializing programmatically:
    let imageView = FUIImageView(image: UIImage(named: "myProfilePic"))
    //set image view to be circular
    imageView.isCircular = true
    
    // To enable a default gradient layer behind the placehoder text
    imageView.isGradientLayerEnabled = true
    
    // Set placeholder text
    imageView.placeholder.text = "This is a placehoder"
    
    // Set placeholder background color
    imageView.placeholderBackgroundColor = UIColor.white
    
    • Placing inside a Storyboard or xib:
    1. Drag and drop an UIImageView component to Interface Builder canvas.
    2. Switch class name from UIImageView to FUIImageView', and set module toSAPFiori`.
    3. To apply, set @IBInspectable property isCircular, to true
    See more

    Declaration

    Swift

    @IBDesignable
    open class FUIImageView : UIImageView, FUIObservableValue, InnerViewContainer
    extension FUIImageView: FUIGlyphImage
    extension FUIImageView: FUIAttributedGlyphImage
  • The FUITextView class extends UITextView, to support displaying a styled placeholder text string when the text property is empty.

    See more

    Declaration

    Swift

    open class FUITextView : UITextView
    extension FUITextView: Initializable
  • Subclass of UITextField, which implements the FUIObservableValue protocol, to observe changes to the text property. The onChangeHandler: ((String?) -> Void)? closure will be invoked on changes to the text property.

    Theming

    Supported style classes

    fdlFUITextField
    fdlFUITextField_clearButton
    
    See more

    Declaration

    Swift

    open class FUITextField : UITextField, FUIObservableValue
  • Subclass of FUITextField, which supports auto-resizing the text field width based on the text entered.

    See more

    Declaration

    Swift

    public class FUIAutoResizingTextField : FUITextField
  • This FUINavigationController is needed for iOS 13.4 and above devices to control the status bar style used by SAPFiori UI components.

    Note that before iOS 13.4, it is recommended to use an extension of UINavigationController in the application to override the preferredStatusBarStyle, as documented in FUIStatusBarStyleHelper‘s header doc. However, it does not work for iOS 13.4 and later iOS versions. Developers need to use this FUINavigationController which overrides the preferredStatusBarStyle property of standard UINavigationController in order for the preferredStatusBarStyle to be invoked for iOS 13.4 and above.

    The application should use FUINavigationController instead of standard UINavigationController when displaying SAPFiori UI components in order for the correct status bar style to be displayed. This functionality is achieved in cooperation with FUIStatusBarStyleHelper.

    Application developers can also use FUINavigationController in the launch storyboard so that it can use FUIStatusBarStyleHelper to set the application’s status bar style as needed in other application views as well.

    Declaration

    Swift

    @available(*, deprecated, message: "No longer supported. Please use UINavigationController.")
    open class FUINavigationController : UINavigationController
  • FUINavigationBar is a subclass of ‘UINavigationBar’ which applies the Fiori Design Language styling by default.

    It exposes a bannerView: FUIBannerMessageView view property, which may be presented, using the FUIBannerMessageView show() method. By default, the message is shown centered on screen under the navigation bar.

    Usage

    Configuration

    Setup a FUINavigationBar in your navigation controller. You can set either in storyboard or programmatically.

    Presenting FUIBannerMessageView

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

    Theming

    bar-tint-color is intended to be used for backward compatibility on iOS 12. In order to customize navigation bar color on iOS 13 or above, developer should either set background-color to apply one color to all bar appearences, or configure standard-background-color, scrolledge-background-color and scrolledge--background-color as a whole for different color settings.

    NavigationBar {
       background-color: @primary1_darkBackground;
       background-tint-color: @tintColorDark;
    }
    
    
    See more

    Declaration

    Swift

    @IBDesignable
    open class FUINavigationBar : UINavigationBar
  • Subclass of UIButton, which provides for rounded edge and rounded fill styles. It also provides for per-state tint colors, persistent selection, and a closure-styled tap handler.

    The FUIButton implements the Fiori Design Language in default configuration.

    Usage

    Initialization

    Init button with expected style (for default, use .none).

    To use FUIButton style variants in Interface Builder, the convenience subclasses FUIRoundedButton (.fuiRounded) and FUIRoundedFillButton (.fuiRoundedFilled) are also available.

    // init with expected style.
    
    let normalButton = FUIButton() // equivalent to FUIButton(style: .none)
    let roundedOutlineButton = FUIButton(style: .fuiRounded)       // equivalent to `FUIRoundedButton()`
    let roundedFilledButton = FUIButton(style: .fuiRoundedFilled)  // equivalent to `FUIRoundedFillButton()`
    

    Setting title(s)

    UIButton provides two techniques for setting its title:

    1. setTitle(_:, for:)
    2. titleLabel.text

    The behavior of the (2) is inconsistent, and discouraged by Apple. As a result, titleLabel.text should be avoided in favor of technique setTitle(_:_:). The FUIButton will correct the behavior of titleLabel.text, if setTitle(_:_:) is not used. However, if the developer at any point invokes setTitle(_:, for:) directly, FUIButton will cease to correct for titleLabel.text, and will defer to the developer to use the API correctly.

    button.setTitle("Follow", for: .normal)
    button.setTitle("Unfollow", for: .selected)
    

    Specify Selection Behavior

    The default behavior of UIButton is to toggle between .normal and .highlighted UIControlState, on user touches started and touches ended. The .selected state is never used.

    FUIButton supports toggling between .normal and .selected UIControlState, by setting the isPersistentSelection flag to true. This is particularly useful, if using the button to toggle a property. The developer may use the isSelected: Bool API to toggle cause this transition.

    button.isPersistentSelection = true    // causes button to toggle between `.normal` and `.selected` states on user touch
    

    When isPersistentSelection == true, the button may transition briefly through the .highlighted state, between .selected and .normal on user touches. Configure settings for [.selected, .highlighted], if implementing custom behavior here.

    Color Configuration

    Call setTintColor(_:_:) to configure tint color for states. Setting tintColor is equivalent to call setTintColor(color, for: UIControlState.normal). Default tintColor is UIColor.preferedFioriColor(for: .tintColor, background: self.backgroundColorScheme).

    // set the `.normal` and `.disabled` tint colors
    button.setTintColor(.preferredFioriColor(forStyle: .tintColor), for: .normal)
    button.setTintColor.setTintColor(.preferredFioriColor(forStyle: .primary4), for: .disabled)
    
    // set *either* the `.highlighted` or `.selected` tint colors
    button.setTintColor(UIColor.preferredFioriColor(forStyle: .tintColorTapState), for: .highlighted)
    // --or--
    button.setTintColor.setTintColor(UIColor.preferredFioriColor(forStyle: .tintColorTapState), for: .highlighted)
    

    These tint colors will be applied differently, depending upon the .style of the button. In the .fuiRounded style, the tint is applied to the layer edge and titleLabel.textColor; in the .fuiRoundedFill style, the tint is applied to the background color.

    In any style, you may choose to override the background color for state, which is useful for applying an inverted style.

    button.setBackgroundColor(UIColor.preferredFioriColor(forStyle: .tintColorLight), for: .highlighted)
    

    The FUIButton also implements the FUIBackgroundSchemeSupporting protocol, which enables developers to inform the control whether it is being presented against a ‘light’ background, or ‘dark’ background. The default style of the button will adapt to the background color scheme; defaults to .light.

    Size Calculation

    The FUIButton calculates an intrinsicContentSize from its imageView and titleLabel, its various insets, and its directionalLayoutMargins.

    To manage the width of the text in the titleLabel, use the regular UILabel API to configure the wrapping behavior.

    button.titleLabel?.preferredMaxLayoutWidth = 200
    button.titleLabel?.lineBreakMode = .byWordWrapping
    

    As an additional configuration option, the FUIButton provides a flag isPreservingPreferredMaxLayoutWidth, which uses the preferredMaxLayoutWidth as a minimum width for the titleLabel when calculating intrinsicContentSize. This is useful, when implementing a fixed-width button with variable texts, or toggling variable-width texts on state.

    Note

    This will not affect the titleLabel text wrapping behavior.

    button.isPreservingPreferredMaxLayoutWidth = true
    

    Selection handler:

    Optional closure-based substitute for addTarget(_:_:_:) method for handling user taps. Passes self as input parameter. Is compatible with addTarget(_:_:_:) selector registration.

    If used in combination with the target-action selector registration, handlers will be invoked in the following order:

    1. didSelectHandler
    2. target-action selector

    Theming

    Support Button class paths:

    Button {}
    fdlFUIButton {}
    

    Supported Button attributes:

    tint-color { -selected | -highlighted | -selected-highlighted | -selected-disabled | -disabled } (Color)
    background-color { -normal | -selected | -highlighted | -selected-highlighted | -selected-disabled | -disabled } (Color)
    background-image { -selected | -highlighted | -selected-highlighted | -selected-disabled | -disabled } (Image)
    content-insets (Box)
    image-insets (Box)
    title-insets (Box)
    shadow-color (Color)
    shadow-offset (Offset)
    shadow-opacity (Number)
    shadow-radius (Number)
    

    Supported Text attributes:

    font-color { -selected | -highlighted | -selected-highlighted | -selected-disabled | -disabled } (Color)
    font-name (FontName)
    font-style (UIFontTextStyle)
    font-size (Number)
    text-align (TextAlign)
    text-alpha (Number)
    text-auto-fit (Boolean)
    text-line-clamp (Integer)
    text-shadow-color { -selected | -highlighted | -selected-highlighted | -selected-disabled | -disabled } (Color)
    text-shadow-offset (Offset)
    

    Supported ImageView attributes:

    image { -highlighted | -selected | -selected-highlightecd | -selected-disabled | -disabled } (Image)
    

    Remark

    The tint-color { -* } attribute will override the font-color { -* } attribute on a state-by-state basis. E.g. tint-color-highlighted will override font-color-highlighted, but will not affect font-color.
    See more

    Declaration

    Swift

    open class FUIButton : UIButton, FUIButtonClosureHandling, FUIStateSelectable, FUIBackgroundSchemeSupporting, PrepareForReuse
  • Convenience subclass of FUIButton implementing FUIButtonStyle.fuiRounded, for use in Interface Builder.

    Declaration

    Swift

    open class FUIRoundedButton : FUIButton
  • Convenience subclass of FUIButton implementing FUIButtonStyle.fuiRoundedFilled, for use in Interface Builder.

    Declaration

    Swift

    open class FUIRoundedFillButton : FUIButton
  • Subclass of FUIButton, which fixes the issue in setting button width and height in supporting label text wrapping

    See more

    Declaration

    Swift

    public class FUIOnboardingButton : FUIButton
  • FUITag is an enhanced FUILabel that applies Fiori Design tag color schemes to the label by default.

    Usage

    • Initializing programmatically:
    
    let tag = FUITag(title: "Tag1")
    
    
    • Placing inside a Storyboard or xib:
    1. Drag and drop an UILabel component to Interface Builder canvas.
    2. Switch class name from UILabel to FUITag, and set module to SAPFiori.
    See more

    Declaration

    Swift

    public class FUITag : FUITagText
  • FUIText displayed as a tag within FUIObjectHeaderView and FUIMapDetailTagObjectTableViewCell.

    Available:

    • contentInsets: The contentInsets between the tag border and tag content
    • cornerRadius: The corner radius around the tag
    • fillColor: UIColor inside the tag
    • borderColor: UIColor around the perimeter of the tag

    Initialization and Configuration

    let tag = FUITagText("Tag")
    tag.borderColor = borderColor
    tag.fillColor = fillColor
    tag.textColor = textColor
    tag.font = font
    
    See more

    Declaration

    Swift

    public class FUITagText : FUIText
  • A protocol defines properties that a view supporting validation should have.

    See more

    Declaration

    Swift

    public protocol FUIInlineValidation
  • Simple enumeration for horizontal alignment styles

    • left: left-aligned
    • center: center-aligned
    • right: right-aligned
    See more

    Declaration

    Swift

    public enum FUIHorizontalAlignment
  • A protocol for use in FUIImageView and FUIAttributedGlyphImage

    See more

    Declaration

    Swift

    public protocol FUIGlyphImage
  • A class that implements FUIAttributedGlyphImage protocol

    See more

    Declaration

    Swift

    public class FUIAttributedImage : FUIAttributedGlyphImage
  • A protocol that adds further requirements to FUIGlyphImage

    See more

    Declaration

    Swift

    public protocol FUIAttributedGlyphImage : FUIGlyphImage
  • FUIPlaceholderImageView is a variant of FUIImageView. Placeholder text can be shown if there is no image set.

    Typically not used directly by developer.

    Theming

    Supported class paths:

    fdlFUIPlaceholderImageView_placeholder {}

    Supported properties:

    font-color: Color; font-style: UIFontTextStyle; text-line-clamp: Integer; text-align: NSTextAlignment;

    Declaration

    Swift

    @available(*, deprecated, message: "This has been integrated with FUIImageView, please use that instead")
    open class FUIPlaceholderImageView : FUIImageView
  • Placeholder view component of FUIPlaceholderImageView.

    Typically not used directly by developer.

    Theming

    Supported class paths:

    fdlFUIPlaceholderView_placeholder {}

    Supported properties:

    font-color: Color; font-style: UIFontTextStyle; text-line-clamp: Integer; text-align: NSTextAlignment;

    See more

    Declaration

    Swift

    public class FUIPlaceholderView : FUIDrawingView, FUIPlaceholderComponent
  • Special case of FUILabel, used for maintaining backwards compatiblity in controls which were originally developed by laying-out several FUILabel instances, but which have been now been transitioned to an NSAttributedStringDrawing layout technique, in which the contents of several string properties are concatenated into NSAttributedStrings and laid-out using NSParagraphStyle configurations (e.g. FUIObjectTableViewCell).

    The FUILabelProxy may be used by the developer for supplying configurations and text, but will not be laid-out in the parent view. Its configurations and content will be read by a NSAttributedString concatenation engine.

    See API and Theming header-doc for FUILabel

    Remark

    Should not be used directly by app developer. Use FUILabel, instead.

    Declaration

    Swift

    final public class FUILabelProxy : FUILabel
  • A simple UIView subclass to take email address as input.

    Theming

    Supported style classes

    fdlFUIEmailInputView
    fdlFUIEmailInputView_emailTextField
    fdlFUIEmailInputView_bottomBorderView
    
    See more

    Declaration

    Swift

    public class FUIEmailInputView : NibDesignable, UITextFieldDelegate
  • This structure describes one input field for user input in the FUIDynamicAuthenticationScreen.

    See more

    Declaration

    Swift

    public struct FUIAuthenticationInformationField