Skip to content

Object Header

FUIObjectHeader

open class FUIObjectHeader: FUIBaseHeaderView<FUIObjectHeaderView>, FUIContentCopyable

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

Object Header

Object Header

Object Header

Object Header

Object Header

Compact (Portrait) Horizontal Size Class: Anatomy & Variations

Object Header

Object Header

Object Header

Views Available in FUIObjectHeader

  • detailImageView: a UIImageView view added to the view. The image size is set to 45px by 45px in compact mode and 70px by 70px in 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 a part of AdditionalInfoView added 16px below subheadlineLabel. The view displays no more than 3 tags on screen.

  • bodyLabel: an UILabel view is a part of AdditionalInfoView added 6px below tags to the view. Use bodyText to set label text

  • footnoteLabel: an UILabel view is a part of AdditionalInfoView added 3px below bodyLabel to the view. Use footnoteText to set label text

  • descriptionLabel: an UILabel view tended to display a long text in the view. It always gets displayed in compact view. If detailContentView and AdditionalInfoView are set, regular view does not show descriptionLabel. In compact view, if AdditionalInfoView is not set, the label is displayed below headlineLabel and subheadlineLabel on page 1 of the scroll view; otherwise, if DetailContentView is not set, the label is placed to page 2 of the scroll view. When both AdditionalInfoView and DetailContentView are set, the label would be placed to page 3 of the scroll view. Use descriptionText to set label text

  • 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 in compact mode and right to DetailContentView in regular mode. Use cstatusText 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.

  • detailContentView: an UIView added to the view in page 2 in compact view and right to headlineLabel in regular mode.

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.bodyLabel.text = "1000-Hamburg, MECHANIK."
objectHeader.footnoteLabel.text = "Due on 12/31/16."
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#>

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

1
 fdlFUIObjectHeader {}

Supported ObjectHeader attributes:

1
2
3
 tint-color (Color)
 background-color (Color)
 background-color-scheme (FUIBackgroundColorScheme)

Supported Text class paths:

1
2
3
4
5
6
7
8
9
 fdlFUIObjectHeader_headlineLabel {}
 fdlFUIObjectHeader_subheadlineLabel {}
 fdlFUIObjectHeader_bodyLabel {}
 fdlFUIObjectHeader_footnoteLabel {}
 fdlFUIObjectHeader_descriptionLabel {}
 fdlFUIObjectHeader_statusLabel {}
 fdlFUIObjectHeader_substatusLabel {}
 fdlFUIObjectHeader_statusView_statusLabel {}       // deprecated
 fdlFUIObjectHeader_statusView_substatusLabel {}    // deprecated

Supported Text attributes:

1
2
3
4
5
6
 font-color (Color)
 font-name (FontName)
 font-style (UIFontTextStyle)
 font-size (Number)
 text-align (TextAlign)
 text-line-clamp (Integer)

Supported ImageView class paths:

1
2
3
 fdlFUIObjectHeader_detailImageView {}
 fdlFUIObjectHeader_statusImageView {}
 fdlFUIObjectHeader_substatusImageView {}

Supported ImageView attributes:

1
2
 image-name (Image)
 tint-color (Color)
Last update: April 14, 2021