Object views

FUIObjectTableViewCell is the FUIObjectBaseTableViewCell subclass for presenting business object data in the Fiori Design Language.

Views Available in FUIObjectTableViewCell:

• detailImageView: a FUIImageView view added to the cell unless cell.preserveDetailImageSpacing is set to false. The view is right to iconsStackView and left to headlineLabel. The image is scaled to fit with fixed aspect. The image size is set to 45px by 45px. Use cell.detailImage to set image

• headlineLabel: an UILabel view is always displayed and intended to display a headline text in the cell. Use cell.headlineText to set label text

• subheadlineLabel: an UILabel view is added 3px below headlineLabel to the cell. Use `cell.subheadlineText" to set label text

• footnoteLabel: an UILabel view is added 3px below subheadLabel to the cell. Use `cell.footnoteText" to set label text

• descriptionLabel: an UILabel view tended to display a long text in the cell. The view is just below mainView in compact view, but is right to headlineLabel and left to statusImageView(or statusLabel) in regular view. Use `cell.descriptionText" to set label text

• statusImageView -or- statusLabel: an UIImageView/UILabel added to the cell for status. statusImageView gets added with size 16px by 16px. The view is left to accessory view and right to descriptionLabel. Use cell.statusText to set label text or cell.statusImage to set image.

• substatusImageView -or- substatusLabel: an UIImageView/UILabel added to the cell under status. substatusImageView gets added with size 16px by 16px. Use cell.substatusText to set label text or cell.substatusImage to set image. An error will be logged when accessoryType is not .none nor .disclosureIndicator, then setting a substatus label text or substatus image as this setting breaks Fiori Design Language pattern.

Usage

Data Binding:

override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: FUIObjectTableViewCell.reuseIdentifier, for: indexPath as IndexPath) as! FUIObjectTableViewCell
    cell.detailImage = UIImage(named: "image.png")
    cell.headlineText = "Business Object Title"
    cell.subheadlineText = "Business Object Subtitle"
    cell.footnoteText = "Business Object Footnote"
    cell.statusImageView.image = FUIIconLibrary.indicator.veryHighPriority.withRenderingMode(.alwaysTemplate)
    cell.substatusText = "Status Description"
    cell.statusDisplayMode = .both
    cell.statusText = "Status"
    cell.showDescriptionInCompact = true
    cell.descriptionText = "Business Object Description (long)"
    cell.iconImages = ["1"]
    cell.tags = [FUITag(title: "Tag - 1"), FUITag(title: "Tag - 2")]
    cell.accessoryType = .disclosureIndicator
    cell.footnoteIcons = [UIImage(systemName: "person")!, "XY"]
    cell.footnoteIconsText.text = "Description text for footnote icons."
    cell.footnoteIconsText.numberOfLines = 0
    cell.footnoteIconsTextPosition = .leading
    cell.actionButton.isHidden = false
    cell.actionButton.setTitle("Button", for: .normal)
    return cell
}

Icons layout:

Icons may be supplied to the iconImages property which conform to the FUIGlyphImage protocol. These include: UIImage, FUIAttributedGlyphImage, and String. It is recommended when supplying image types, to ensure that the rendering mode is alwaysTemplate, so that the default tint color will be applied.

The default dimensions of the icon images are 12 x 12pts. It is possible to increase the width allocated to the icons by increasing the value of the iconsColumnWidth: CGFloat property, though this is generally discouraged, unless it is necessary to support multiple digits of a String type (for example: iconImages = ["24"] may require iconsColumnWidth = 20.0).

In SDK version 3.0, the Fiori Design Guidelines are updated, and now direct that when possible, the icons should be displayed within the leading margin. This will occur automatically, when the leading margin is >= 10 + iconsColumnWidth. As a result, most device/orientation layouts will apply this by default; to ensure that all view controllers enforce this minimum layout margin, a developer choose to set the layout margin directly on a parent UITableView, or, override the systemMinimumLayoutMargins: NSDirectionalEdgeInsets property.

override var systemMinimumLayoutMargins: NSDirectionalEdgeInsets {
    var system = super.systemMinimumLayoutMargins
    system.leading = 22
    system.trailing = 22
    return system
}

The preserveIconStackSpacing: Bool property may be used to ensure that the insertion point of the view to the right of the icons layout (detailImageView, or headlineLabel) has a consistent x-coordinate, regardless of whether a particular cell contains icons. This property is ignored, if the icons are displayed within the margins, as the insertion point of the subsequent view will always be directionalLayoutMargins.left.

AccessoryView and EditingAccessoryView

Standard UITableViewCell accessoryView, accessoryType, and editingAccessoryView are still supported.

The actionAccessoryView is a specialized view that takes the place of the usual accessoryView. This view is a FUISingleActionAccessoryView that shows an interactable button or progressView. Changing the actionAccessoryType changes the view that is shown. By default, the actionAccessoryType is set to .none.

The actionAccessoryView can be visible during editing mode when isActionAccessoryAlsoEditingActionAccessory is set to true. By default, isActionAccessoryAlsoEditingActionAccessory is true.

cell.isActionAccessoryAlsoEditingActionAccessory = false
cell.actionAccessoryType = .button
cell.actionAccessoryView?.button.style = .fuiRounded
cell.actionAccessoryView?.button.titleLabel?.preferredMaxLayoutWidth = 75
cell.actionAccessoryView?.button.setTitle("Follow", for: .normal)
cell.actionAccessoryView?.button.setTitle("Unfollow", for: .selected)
cell.actionAccessoryView?.button.isPersistentSelection = true
cell.actionAccessoryView?.button.isPreservingPreferredMaxLayoutWidth = true
cell.actionAccessoryView?.button.didSelectHandler = { button in <#selection handler#> }

Theming

Support TableViewCell class paths:

    fdlFUIObjectTableViewCell {}

Supported TableViewCell attributes:

    tint-color (Color)
    background-color (Color)
    background-color-selected (Color)

Supported Text class paths:

    fdlFUIObjectTableViewCell_headlineLabel {}
    fdlFUIObjectTableViewCell_subheadlineLabel {}
    fdlFUIObjectTableViewCell_footnoteLabel {}
    fdlFUIObjectTableViewCell_statusLabel {}
    fdlFUIObjectTableViewCell_substatusLabel {}
    fdlFUIObjectTableViewCell_descriptionLabel {}

Supported Text attributes:

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

Supported ImageView class paths:

    fdlObjectTableViewCell_detailImageView {}
    fdlObjectTableViewCell_statusImageView {}
    fdlObjectTableViewCell_substatusImageView {}

Supported ImageView attributes:

    image-name (Image)
    tint-color (Color)

Supported IMAGE class paths for groupedAvatarsViews and footnoteIconsViews:

    fdlFUIObjectTableViewCell_avatar_0 {}: IMAGE theme for first image in `groupedAvatarsViews`
    fdlFUIObjectTableViewCell_avatar_1 {}: IMAGE theme for second image in `groupedAvatarsViews`
    fdlFUIObjectTableViewCell_footnoteIcon_0 {}: IMAGE theme for first image in `footnoteIconsViews`
    fdlFUIObjectTableViewCell_footnoteIcon_1 {}: IMAGE theme for second image in `footnoteIconsViews`
    fdlFUIObjectTableViewCell_footnoteIcon_2 {}: IMAGE theme for third image in `footnoteIconsViews`
    fdlFUIObjectTableViewCell_footnoteIcon: IMAGE theme for the other images in `footnoteIconsViews`

Supported IMAGE properties for groupedAvatarsViews and footnoteIconsViews:

    image-name: String;
    tint-color: Color;
    font-color: Color;
    background-color: Color

Supported BUTTON class paths:

fdlFUIObjectTableViewCell_actionButton {}

Supported BUTTON properties:

image: Image;
tint-color: Color;

FUIObjectCollectionViewCell is the default UICollectionView subclass for presenting business object data in the Fiori Design Language.

Usage

Data Binding:

cell.detailImage = UIImage(named: "image.png")
cell.headlineText = "Business Object Title"
cell.subheadlineText = "Business Object Subtitle"
cell.footnoteText = "Business Object Footnote"
cell.statusImageView.image = FUIIconLibrary.indicator.veryHighPriority.withRenderingMode(.alwaysTemplate)
cell.substatusText = "Status Description"
cell.descriptionText = "Business Object Description (long)"
cell.iconImages = ["1"]
cell.tags = [FUITag(title: "Tag - 1"), FUITag(title: "Tag - 2")]
cell.accessoryType = .disclosureIndicator
cell.footnoteIcons = [UIImage(systemName: "person")!, "XY"]
cell.footnoteIconsText.text = "Description text for footnote icons."
cell.footnoteIconsText.numberOfLines = 0
cell.footnoteIconsTextPosition = .leading
cell.actionButton.isHidden = false
cell.actionButton.setTitle("Button", for: .normal)

Icons layout:

Icons may be supplied to the iconImages property which conform to the FUIGlyphImage protocol. These include: UIImage, FUIAttributedGlyphImage, and String. It is recommended when supplying image types, to ensure that the rendering mode is alwaysTemplate, so that the default tint color will be applied.

The default dimensions of the icon images are 12 x 12pts. It is possible to increase the width allocated to the icons by increasing the value of the iconsColumnWidth: CGFloat property, though this is generally discouraged, unless it is necessary to support multiple digits of a String type (for example: iconImages = ["24"] may require iconsColumnWidth = 20.0).

The preserveIconStackSpacing: Bool property may be used to ensure that the insertion point of the view to the right of the icons layout (detailImageView, or headlineLabel) has a consistent x-coordinate, regardless of whether a particular cell contains icons. This property is ignored, if the icons are displayed within the margins, as the insertion point of the subsequent view will always be directionalLayoutMargins.left.

AccessoryView and EditingAccessoryView

Standard UITableViewCell accessoryView, accessoryType are supported.

The actionAccessoryView is a specialized view that takes the place of the usual accessoryView. This view is a FUISingleActionAccessoryView that shows an interactable button or progressView. Changing the actionAccessoryType changes the view that is shown. By default, the actionAccessoryType is set to .none.

cell.actionAccessoryType = .button
cell.actionAccessoryView?.button.style = .fuiRounded
cell.actionAccessoryView?.button.titleLabel?.preferredMaxLayoutWidth = 75
cell.actionAccessoryView?.button.setTitle("Follow", for: .normal)
cell.actionAccessoryView?.button.setTitle("Unfollow", for: .selected)
cell.actionAccessoryView?.button.isPersistentSelection = true
cell.actionAccessoryView?.button.isPreservingPreferredMaxLayoutWidth = true
cell.actionAccessoryView?.button.didSelectHandler = { button in <#selection handler#> }

Theming

Supported CollectionViewCell class paths:

fdlFUIObjectCollectionViewCell {}

Supported CollectionViewCell attributes:

tint-color (Color)
background-color (Color)
background-color-selected (Color)

Supported Text class paths:

fdlFUIObjectCollectionViewCell_headlineLabel {}
fdlFUIObjectCollectionViewCell_subheadlineLabel {}
fdlFUIObjectCollectionViewCell_footnoteLabel {}
fdlFUIObjectCollectionViewCell_statusLabel {}
fdlFUIObjectCollectionViewCell_substatusLabel {}
fdlFUIObjectCollectionViewCell_descriptionLabel {}

Supported Text attributes:

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

Supported ImageView class paths:

fdlFUIObjectCollectionViewCell_detailImageView {}
fdlFUIObjectCollectionViewCell_statusImageView {}
fdlFUIObjectCollectionViewCell_substatusImageView {}

Supported ImageView attributes:

image-name (Image)
tint-color (Color)

Supported BUTTON class paths:

fdlFUIObjectCollectionViewCell_actionButton {}

Supported BUTTON properties:

image: Image;
tint-color: Color;

Base view of FUIObjectTableViewCell. Standard Fiori control for rendering business object data.

Example Initialization and Configuration

let view = FUIObjectView()
view.detailImage = UIImage(named: <#image#>)
view.headlineText = "Edgar Scissorhands"
// To enable a default gradient layer behind the placeholder text.
view.detailImageView.isGradientLayerEnabled = true
// Set placeholder text.
view.detailImageView.placeholder.text = "This is a placeholder"
view.subheadlineText = "Lorem ipsum datil es iosin Lotios nsiqok"
view.footnoteText = "Here is some footer text about Edward"
view.statusImageView.image = UIImage(named: <#image#>)
view.statusDisplayMode = .both
view.substatusDisplayMode = .both
view.statusText = "Status Text"
view.substatusText = "Active"
view.showDescriptionInCompact = true
view.descriptionText = "This text is only visible when the cell is in regular horizontal size class."
view.iconImages = ["1", FUIIconLibrary.indicator.veryHighPriority.withRenderingMode(.alwaysTemplate)]
view.horizontalIcons = [UIImage(named: <#image#>), UIImage(named: <#image#>)]
view.preserveIconStackSpacing = true
view.preserveDetailImageSpacing = true
view.detailImageViewSize = CGSize(width: 45, height: 45)
view.isLimitingHeightToMainContent = false
view.isApplyingSplitPercent = true
view.splitPercent = 0.4
view.tags = [FUITag(title: "Tag - 1"), FUITag(title: "Tag - 2"), FUITag(title: "Tag - 3")]
view.avatars = [UIImage(named: "imageName"), UIImage(named: "imageName")]
view.avatarSize = CGSize(width: 30, height: 30)
view.indicatorImageView.image = UIImage(name: "imageName")
view.indicatorImageViewSize = CGSize(width: 16, height: 16)
view.footnoteIcons = [FUIIconLibrary.indicator.veryHighPriority.withRenderingMode(.alwaysTemplate), "+2"]
view.actionButton.isHidden = false
view.actionButton.setTitle("Button", for: .normal)

Theming

Supported ObjectView class paths:

fdlFUIObjectView {}

Supported ObjectView attributes:

tint-color (Color)
background-color (Color)

Supported Text class paths:

fdlObjectCell_headlineLabel {}     // deprecated
fdlObjectCell_subheadLabel {}      // deprecated
fdlObjectCell_footnoteLabel {}     // deprecated
fdlObjectCell_statusLabel {}       // deprecated
fdlObjectCell_substatusLabel {}    // deprecated
fdlObjectCell_descriptionLabel {}  // deprecated
fdlFUIObjectView_headlineLabel {}
fdlFUIObjectView_subheadlineLabel {}
fdlFUIObjectView_footnoteLabel {}
fdlFUIObjectView_statusLabel {}
fdlFUIObjectView_substatusLabel {}
fdlFUIObjectView_descriptionLabel {}

Supported Text attributes:

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

Supported ImageView class paths:

fdlObjectView_detailImageView {}
fdlObjectView_statusImageView {}
fdlObjectView_substatusImageView {}

Supported ImageView attributes:

image-name (Image)
tint-color (Color)

Supported BUTTON class paths:

fdlFUIObjectView_actionButton {}

Supported BUTTON properties:

image: Image;
tint-color: Color;

Additional supported style classes

fdlFontStyle_headline {}           // deprecated
fdlFontStyle_subheadline {}        // deprecated
fdlFontStyle_body {}               // deprecated

View component used in FUIObjectTableViewCell. Typically not used directly by developer.

This view appears as the accessoryView to the FUIObjectTableViewCell.

Available:

• progressView: A FUISingleActionProgressIndicator used to display progress. Toggle between the states by changing the actionAccessoryType.
• button: A FUISingleActionButton displayed in the FUISingleActionAccessoryView. This button’s width will not exceed 45% of the width of the container. Button height will dynamically resize based on button text. Button text can wrap two lines. Use the button’s titleLabel preferredMaxLayoutWidth and the button’s isPreservingPreferredMaxLayoutWidth to set the button’s width. Note Developer should change preferredMaxLayoutWidth depending on the accessibility text size.
• actionAccessoryType: A FUITableViewCellActionAccessoryType type used to display the button or the different states of the progressView. Changing the actionAccessoryType drives which view is active.

Usage

    let singleActionView = FUISingleActionAccessoryView()
    singleActionView.actionAccessoryType = .button
    singleActionView.button.setTitle("Follow", for: .normal)
    singleActionView.button.setTitle("Unfollow", for: .selected)
    singleActionView.button.titleLabel?.preferredMaxLayoutWidth = 75
    singleActionView.button.isPersistentSelection = true
    singleActionView.button.isPreservingPreferredMaxLayoutWidth = true
    singleActionView.button.didSelectHandler = { btn in
       print("Button Selected")
    }

Button component used in FUISingleActionAccessoryView.

This view appears as the accessoryViewto the FUIObjectTableViewCell.

Usage

let singleActionButton = FUISingleActionButton()
singleActionButton.setTitle("Follow", for: .normal)
singleActionButton.setTitle("Unfollow", for: .selected)
singleActionButton.titleLabel?.preferredMaxLayoutWidth = 75
singleActionButton.isPersistentSelection = true
singleActionButton.isPreservingPreferredMaxLayoutWidth = true
singleActionButton.didSelectHandler = { btn in
   print("Button Selected")
}

The progress indicator of the FUIObjectTableViewCell within the FUISingleActionAccessoryView.

The indicator has an optional selection handler triggered by UIControlEvent.touchUpInside

Usage

let progressView = FUISingleActionProgressIndicator()
progressView.didSelectHandler = { progressView in
   print("Indicator Selected")
}

Enum determining the Action Accessory Type of the FUISingleActionAccessoryView in the FUIObjectTableViewCell.

Changing the FUITableViewCellActionAccessoryType changes the FUISingleActionAccessoryView to show the correct view.

There are six cases:

1. none: TableViewCell does not display an actionAccessoryView
2. button: TableViewCell displays the FUISingleActionButton in the actionAccessoryView
3. processing: TableViewCell displays the FUISingleActionProgressIndicator in a processing state
4. loadingPausable: TableViewCell displays the FUISingleActionProgressIndicator in a loading state that can be paused
5. loadingStoppable: TableViewCell displays the FUISingleActionProgressIndicator in a loading state that can be stopped
6. pausedResumable: TableViewCell displays the FUISingleActionProgressIndicator in a paused state that can be resumed

FUIObjectCell is an Interface-Builder-designable UI component that extends UIView for showing object information. It contains a set of default content views that are common to Fiori Design Language Object Cell types, with the associated constraint implementations and handling for size classes.

Views Available in FUIObjectCell:

• iconsStackView: a UIStackView view expected to contain a vertical stack of icons/images in its view content. The view is added to the cell unless cell.preserveIconStackSpacing is set to false. This is the first view in the cell and can be left to detailImageView. Use cell.iconImages to add image(s) to the stack view. Each icon/image size is set to be 16px by 16px.

• detailImageView: an FUIImageView view added to the cell unless cell.preserveDetailImageSpacing is set to false. The view is to the right of iconsStackView and left of headlineLabel. The image is scaled to fit with fixed aspect. The image size is set to 45px by 45px. Use cell.detailImage to set the image.

• headlineLabel: a UILabel view is always displayed and intended to display a headline text in the cell. Use cell.headlineText to set label text.

• subheadlineLabel: a UILabel view is added 3px below headlineLabel to the cell. Use `cell.subheadlineText" to set label text.

• footnoteLabel: a UILabel view is added 3px below subheadLabel to the cell. Use cell.footnoteText to set label text.

• descriptionLabel: a UILabel view intended to display long text in the cell. It gets displayed only in regular view. The view is to the right of headlineLabel and left of statusImageView(or statusLabel). Use `cell.descriptionText" to set label text.

• statusImageView/statusLabel: a UIImageView/UILabel added to the cell for status. statusImageView gets added with size 16px by 16px. The view is to the left of accessory view and right of descriptionLabel. Use cell.statusText to set label text or cell.statusImage to set image.

• substatusImageView/substatusLabel: a UIImageView/UILabel added to the cell under status. substatusImageView gets added with size 16px by 16px. Use cell.substatusText to set label text or cell.substatusImage to set image. An error will be logged when accessoryType is not .none nor .disclosureIndicator, then setting a substatus label text or substatus image as this setting breaks the Fiori Design Language pattern.

• accessoryView: a UIView added to the view when cell.accessoryType is not .none. The view is a UIButton customized in FUIObjectCell and is aligned to the baseline of headlineLabel when the type is .disclosureIndicator. For any other types, it’s vertically center-aligned and created by Apple native SDK.

Example Initialization and Configuration

override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: ObjectTableViewCell.reuseIdentifier, for: indexPath as IndexPath) as! ObjectTableViewCell
    cell.detailImage = UIImage(named: "ProfilePic")
// To enable a default gradient layer behind the placeholder text.
    cell.detailImageView.isGradientLayerEnabled = true
// Set placeholder text.
    cell.detailImageView.placeholder.text = "This is a placeholder"
    cell.headlineText = "Edgar Scissorhands"
    cell.subheadlineText = "Lorem ipsum datil es iosin Lotios nsiqok"
    cell.footnoteText = "Here is some footer text about Edward"
    cell.statusImageView.image = UIImage(named: "ErrorIcon")
    cell.substatusText = "Active"
    cell.descriptionText = "This text is only visible when the cell is in regular horizontal size class."
    cell.iconImages = [#imageLiteral(resourceName: "clock"), #imageLiteral(resourceName: "check"), #imageLiteral(resourceName: "attention")]
    cell.accessoryType = .disclosureIndicator
    return cell
}

Theming

Supported style classes

fdlFUIObjectCell
fdlFUIObjectCell_headlineLabel
fdlFUIObjectCell_subheadLabel
fdlFUIObjectCell_footnoteLabel
fdlFUIObjectCell_statusLabel
fdlFUIObjectCell_substatusLabel
fdlFUIObjectCell_descriptionLabel

FUIObjectHeader extends UIView for showing information of an object header. It contains a set of default content views which are common to Fiori Design Language Object Cell types, with the associated constraint implementations and handling for size classes.

Regular (Landscape) Horizontal Size Class: Anatomy & Variations

Compact (Portrait) Horizontal Size Class: Anatomy & Variations

Views Available in FUIObjectHeader:

• detailImageView: a UIImageView view added to the view. The image size is set to 44px by 44px in both compact and regular mode. Use detailImage to set image

• headlineLabel: an UILabel view is always displayed and intended to display a headline text in the view. Use headlineText to set label text

• subheadlineLabel: an UILabel view is added 4px below headlineLabel to the view. Use subheadlineText to set label text

• tags: a list of tag labels is added 4px below subheadlineLabel. There can be up to 3 tags as a default. App teams can add more tags if needed.

• labelItems: an array of FUILabelItem added 16px below tags to the view. There can be up to 6 label items. In compact mode, 6 label items are recommended to be fit in 2 rows.

• descriptionLabel: an UILabel view tended to display a longer text in the view. Description is advised to be concise and not longer than 3 lines in compact mode.

• statusImageView/statusLabel: an UIImageView/UILabel added to the view for status. statusImageView gets added with size 16px by 16px. The view is right to headlineLabel. Use statusText to set label text or statusImage to set image.

• substatusImageView/substatusLabel: an UIImageView/UILabel added to the view under status. substatusImageView gets added with size 16px by 16px. Use substatusText to set label text or substatusImage to set image.

• kpiView: a FUIKPIView added to the right accessory. Only 1 right accessory can be used in an object header. When status and KPIs are both selected, KPI has its priority and the status will move to the status row.

• detailContentView: a FUIObjectHeaderChartView in page 2.

Example Initialization and Configuration:

 //Programmatically add an Object header to tableview
 let objectHeader = FUIObjectHeader()
 self.tableView.tableHeaderView = objectHeader

 objectHeader.detailImageView.image = #imageLiteral(resourceName: "ProfilePic")

 objectHeader.headlineLabel.text = "Inspect Electric Pump Motor Long Job Title Example Will Wrap Max# of Lines in the HeadlineLabel"
 objectHeader.subheadlineLabel.text = "Job 819701."
 objectHeader.tags = [FUITag(title: "Started"), FUITag(title: "PM01"), FUITag(title: "103-Repair")]
 objectHeader.labelItems = [
     FUILabelItem(text: "Los Altos, CA", image: <#my image#>),
     FUILabelItem(text: "12/31/2022", image: <#my image#>),
     FUILabelItem(text: "Natasha Giotra", image: <#my image#>, alignment: .leading)]
 objectHeader.descriptionLabel.text = "Temperature sensor predicts overheating failure in 4 days Urgent and needs attentions.  Temperature sensor predicts overheating failure in 4 days Urgent and needs attentions."

 objectHeader.statusLabel.text = "High"
 objectHeader.substatusImageView.image = <#my image#>

 objectHeader.kpiView = {
     let kpiView = FUIKPIView()

     let unit = FUIKPIUnitItem(string: "$")
     let metric = FUIKPIMetricItem(string: "294")
     let unit2 = FUIKPIUnitItem(string: "M")

     kpiView.items = [unit, metric, unit2]
     kpiView.captionlabel.text = "Sales"

     return kpiView
 }()

 // create a custom `UIView`-subclassing instance, to set to `detailContentView` property.
 let myAnalytics = AnalyticHeaderDetailView()
 myAnalytics.chartImageView.image = #imageLiteral(resourceName: "hogwarts")
 objectHeader.detailContentView = myAnalytics

Background Color Scheme:

The color scheme ofFUIObjectHeader can be configured by changing its inner view’s backgroundColorScheme property. Once changed, the text color, background color and page indicator color will be updated based on the new setting. Developer should configure backgroundColorScheme before overriding these color settings.

 let objectHeader = FUIObjectHeader()
 objectHeader.backgroundColorScheme = .darkConstant
 objectHeader._innerView.pageControl.currentPageIndicatorTintColor = .white
 objectHeader._innerView.pageControl.pageIndicatorTintColor = .lightGray

Note:

FUIObjectHeader added to UITableView as tableHeaderView is compatible with UIRefreshControl added to the same table view. Note that if an UIRefreshControl object is set after adding an FUIObjectHeader object as tableHeaderView, the UIRefreshControl object must be moved to the front in the table view; otherwise, the UIRefreshControl object wouldn’t be visible.

When FUIObjectHeader is added to a table view in a storyboard and UIRefreshControl is added later in a table view controller class’ viewDidLoad function, the Developer should bring the refreshControl to the front:

 self.refreshControl = UIRefreshControl()
 self.refreshControl?.addTarget(self, action: #selector(refreshTriggered), for: .valueChanged)
 self.refreshControl?.tintColor = UIColor.white
 //bring refresh control to the front to make it visible
 self.tableView.bringSubview(toFront: self.refreshControl!)

## Theming

Supported ObjectHeader class paths:

 fdlFUIObjectHeader {}

Supported ObjectHeader attributes:

 tint-color (Color)
 background-color (Color)
 background-color-scheme (FUIBackgroundColorScheme)

Supported Text class paths:

 fdlFUIObjectHeader_headlineLabel {}
 fdlFUIObjectHeader_subheadlineLabel {}
 fdlFUIObjectHeader_bodyLabel {}
 fdlFUIObjectHeader_footnoteLabel {}
 fdlFUIObjectHeader_descriptionLabel {}
 fdlFUIObjectHeader_statusLabel {}
 fdlFUIObjectHeader_substatusLabel {}
 fdlFUIObjectHeader_labelItem_label {}
 fdlFUIObjectHeader_statusView_statusLabel {}       // deprecated
 fdlFUIObjectHeader_statusView_substatusLabel {}    // deprecated

Supported Text attributes:

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

Supported ImageView class paths:

 fdlFUIObjectHeader_detailImageView {}
 fdlFUIObjectHeader_statusImageView {}
 fdlFUIObjectHeader_substatusImageView {}
 fdlFUIObjectHeader_labelItem_imageView {}

Supported ImageView attributes:

 image-name (Image)
 tint-color (Color)

Theming

Supported ObjectHeaderView class paths:

View {}
fdlFUIObjectHeaderView {}

Supported ObjectHeaderView attributes:

tint-color (Color)
background-color (Color)

Supported Text class paths:

fdlFUIObjectHeaderView_headlineLabel {}
fdlFUIObjectHeaderView_subheadlineLabel {}
fdlFUIObjectHeaderView_bodyLabel {}
fdlFUIObjectHeaderView_footnoteLabel {}
fdlFUIObjectHeaderView_descriptionLabel {}
fdlFUIObjectHeaderView_statusLabel {}
fdlFUIObjectHeaderView_substatusLabel {}
fdlFUIObjectHeaderView_labelItem_label {}

Supported Text attributes:

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

Supported ImageView class paths:

fdlFUIObjectHeaderView_detailImageView {}
fdlFUIObjectHeaderView_statusImageView {}
fdlFUIObjectHeaderView_substatusImageView {}
fdlFUIObjectHeaderView_labelItem_imageView {}

Supported ImageView attributes:

image-name (Image)
tint-color (Color)

Chart & KPI content View for presentation in FUIObjectHeader. Set an instance of this view to the FUIObjectHeader.detailContentView property, for correct layout.

Usage

let view = FUIObjectHeaderChartView()
view.title.text = "Voltage Readings"
view.subtitle.text = "Volatility"
view.trend.text = "0.24%""
view.trendImage = FUIIconLibrary.analytics.trendUp.withRenderingMode(.alwaysTemplate)
view.trendSemanticColor = UIColor.preferredFioriColor(forStyle: .positive)
view.chartView.dataSource = self
view.isEnabled = true

objectHeader.detailContentView = view