FUIObjectHeader

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

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)