FUIObjectHeader

FUIObjectHeader extends UIView for showing information about an object header. 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. It is typically added to UITableView as its tableHeaderView.

Image

Interface

  • 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: a UILabel view is always displayed and intended to display a headline text in the view. Use headlineText to set label text.

  • subheadlineLabel: a 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: a UILabel view is a part of AdditionalInfoView added 6px below tags to the view. Use bodyText to set label text.

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

  • descriptionLabel: a UILabel view intended 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 page1 of the scroll view; otherwise, if DetailContentView is not set, the label is placed on page2 of the scroll view. When both AdditionalInfoView and DetailContentView are set, the label is placed on page3 of the scroll view. Use descriptionText to set label text.

  • statusImageView/statusLabel: a UIImageView/UILabel added to the view for status. statusImageView gets added with size 16px by 16px. The view is to the right of headlineLabel in compact mode and to the right of 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: a UIView added to the view on page2 in compact view and to the right of headlineLabel in regular mode.

Usage

In table view controller’s viewDidLoad function:


 //Programmatically add an FUIObjectHeader to tableview
 //let objectHeader = FUIObjectHeader() //View height is content driven by default.
 //     //Or if developer wants to explictely set the height, set `isAutoResizingHeight` to false
 //     //let objectHeader = FUIObjectHeader(frame: CGRect(x: 0, y: 0, width: self.tableView.frame.size.width, height: 200))
 //     //objectHeader.isAutoResizingHeight = false
 //Assign objectHeader to tableView's tableHeaderView
 //self.tableView.tableHeaderView = objectHeader

 //If FUIObjectHeader is added to the tableview in the storyboard
 let objectHeader = self.tableView.tableHeaderView as! FUIObjectHeader
 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.subheadlineTLabel.text = "Job 819701."

 objectHeader.tags = ["Started", "PM01", "103-Repair", "The Fourth one"]
 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 attention.  Temperature sensor predicts overheating failure in 4 days Urgent and needs attention."

 objectHeader.statusLabel.text = "High"
 objectHeader.substatusImageView.image = #imageLiteral(resourceName: "ErrorIcon")

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

Note:

FUIObjectHeader added to UITableView as tableHeaderView is compatible with UIRefreshControl added to the same table view. Note that if a 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 would not be visible.

  • When FUIObjectHeader is added to a table view in a storyboard and UIRefreshControl is added later on in a table view controller class’ viewDidLoad function, 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!)
  • When both FUIObjectHeader and UIRefreshControl are added programmatically in a table view controller class, table view needs to bring the refreshControl to the front only if FUIObjectHeader is added first:

//set objectHeader to tableHeaderView first
self.tableView.tableHeaderView = objectHeader
//set a refresh control next
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!)
  • When both FUIObjectHeader and UIRefreshControl are added programmatically in the table view controller class, table view does not need to explicitly bring the refreshControl to the front if refreshControl is added first:

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

//set objectHeader to tableHeaderView next
self.tableView.tableHeaderView = objectHeader

FUIProfileHeader

FUIProfileHeader extends UIView for showing information about an profile header. It contains a set of default content views and uses the associated constraint implementations and handling for size classes. It is typically added to UITableView by calling addSubview(_:).

Interface

  • imageView: a UIImageView. The image size is set to 80px by 80px. Use image to set image.

  • headlineLabel: an UILabel intended to display a heandline text. Use headlineText to set label text.

  • subheadlineLabel: an UILabel intended to display a subheandline text. Use subheadlineText to set label text.

  • descriptionLabel: an UILabel intended to display a short text. Use descriptionText to set label text.

  • detailContentView: an UIView added to the last position in the stack.

Usage

In table view controller’s viewDidLoad method:


let profileHeader = FUIProfileHeader()
profileHeader.imageView.image = #imageLiteral(resourceName: "rw")
profileHeader.headlineText = "Harry Potter"
profileHeader.subheadlineText = "The boy wizard, the boy wizard"
profileHeader.descriptionLabel.text = "This is a description"

//create an activityControl and set to detail content view.
let activityControl = FUIActivityControl()
activityControl.maxVisibleItems = 5
activityControl.itemSize = CGSize(width: 24, height: 24)
activityControl.spacing = CGFloat(36.0)

let phoneActivity = FUIActivityItem.phone
let msgActivity = FUIActivityItem.message
let emailActivity = FUIActivityItem.email
activityControl.addActivities([phoneActivity, msgActivity, emailActivity])
activityControl.activityItems[phoneActivity]?.setTintColor(UIColor.white, for: .normal)
activityControl.activityItems[msgActivity]?.setTintColor(UIColor.white, for: .normal)
activityControl.activityItems[emailActivity]?.setTintColor(UIColor.white, for: .normal)
profileHeader.detailContentView = activityControl

self.tableView.addSubview(profileHeader)