Supporting Types

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

See more

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

@MainActor
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

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

@IBDesignable
@MainActor
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

@MainActor
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
fdlFUITextField_secureShowButton
fdlFUITextField_secureHideButton

See more

@MainActor
open class FUITextField : UITextField, FUIObservableValue

Subclass of FUITextField, which supports auto-resizing the text field width based on the text entered.

See more

@MainActor
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.

@available(*, deprecated, message: "No longer supported. Please use UINavigationController.")
@MainActor
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

@IBDesignable
@MainActor
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 .tertiary).

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

 // init with expected style.

 let normalButton = FUIButton() // equivalent to FUIButton(style: .tertiary)
 let roundedOutlineButton = FUIButton(style: .secondary)       // equivalent to `FUIRoundedButton()`
 let roundedFilledButton = FUIButton(style: .primary)  // equivalent to `FUIRoundedFillButton()`

## Setting button style and semantic attribute There are three button styles supported: primary, secondary, and tertiary. You can also configure the semantic attribute (normal, tint, negative) for the button.

 button.style = .primary
 button.semantic = .negative

## 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 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)

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

 button.setTitleColor(UIColor.preferredFioriColor(forStyle: .header), for: .normal)

You can set whether the border color is applied based onUIControlState

 button.setIsApplyingBorderColor(true, for: .normal)

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.

 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

## custom configuration configurationUpdateHandler can be used to do custom configuration:

 button.configurationUpdateHandler = { [unowned self] button in
     var configuration = UIButton.Configuration.plain()
     if let currentConfig = button.configuration {
         configuration = currentConfig
     }
     var container = AttributeContainer()
     container.font = UIFont.preferredFioriFont(forTextStyle: .headline, weight: .semibold)
 //  named color(like .red, .blue, etc) not working for foregroundColor, backgroundColor on AttributeContainer, you can use fioriColor, hexStringColor, RGB Color, or System Color instead.
     container.foregroundColor = .preferredFioriColor(forStyle: .tintColor)
     configuration.attributedTitle = AttributedString("FUIButton", attributes: container)
     configuration.imagePadding = 10
     configuration.showsActivityIndicator = true
     configuration.activityIndicatorColorTransformer = UIConfigurationColorTransformer({ _ in
         return .red
     })
     configuration.image = FUIIconLibrary.actions.actionSettingsFill
     configuration.imageColorTransformer = UIConfigurationColorTransformer({ [unowned self] color in
         return button.titleColor(for: button.state) ?? .white
     })
     configuration.imagePlacement = .trailing
     // set customized contentInsets here
     configuration.contentInsets = NSDirectionalEdgeInsets(top: 20, leading: 40, bottom: 20, trailing: 40)

//   configuration must be reset to be effective.
     button.configuration = configuration
 }

When configuration is assigned for the first time or assigned to nil, the following settings will be reset to SDK’s default values: titleLabel?.font = UIFont.preferredFioriFont(forTextStyle: .body, weight: .semibold) titleLabel?.lineBreakMode = .byWordWrapping titleLabel?.textAlignment = .center titleLabel?.numberOfLines = 0 imageView?.contentMode = .scaleAspectFit

When configuration is assigned to nil, application should call setNeedsUpdateConfiguration. Otherwise, the button layout will not be refreshed.

When using UIButtonConfiguration, the properties (include contentEdgeInsets, titleEdgeInsets, imageEdgeInsets, adjustsImageWhenHighlighted and adjustsImageWhenDisabled) are ignored, please use configuration.contentInsets to do contentInsets customization.

## 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 } { -primary| -secondary| -tertiary } (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)

See more

@MainActor
open class FUIButton : UIButton, FUIButtonClosureHandling, FUIStateSelectable, FUIBackgroundSchemeSupporting, PrepareForReuse

Convenience subclass of FUIButton implementing FUIButtonStyle.secondary ( previousFUIButtonStyle.fuiRounded in 7.0 release ), for use in Interface Builder.

@MainActor
open class FUIRoundedButton : FUIButton

Convenience subclass of FUIButton implementing FUIButtonStyle.primary ( previous FUIButtonStyle.fuiRoundedFilled in 7.0 release), for use in Interface Builder.

@MainActor
open class FUIRoundedFillButton : FUIButton

Subclass of FUIButton, which fixes the issue in setting button width and height in supporting label text wrapping

See more

@MainActor
public class FUIOnboardingButton : FUIButton

FUITag displayed as a tag within FUIObjectHeaderView, FUIMapDetailTagObjectTableViewCell and FUITagView.

Usage

• Initializing programmatically:

let tag = FUITag(title: "Tag1")

See more

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

public class FUITagText : FUIText

A protocol defines the properties that a view supporting validation should have.

See more

public protocol FUIInlineValidation

Simple enumeration for horizontal alignment styles

• left: left-aligned
• center: center-aligned
• right: right-aligned

See more

public enum FUIHorizontalAlignment

A protocol for use in FUIImageView and FUIAttributedGlyphImage

See more

public protocol FUIGlyphImage

A class that implements FUIAttributedGlyphImage protocol

See more

public class FUIAttributedImage : FUIAttributedGlyphImage

A protocol that adds further requirements to FUIGlyphImage

See more

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;

@available(*, deprecated, message: "This has been integrated with FUIImageView, please use that instead")
@MainActor
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

@MainActor
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

@MainActor
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

@MainActor
public class FUIEmailInputView : NibDesignable, UITextFieldDelegate

This structure describes one input field for user input in the FUIDynamicAuthenticationScreen.

See more

public struct FUIAuthenticationInformationField