The FUITimelineCell
and FUITimelineMarkerCell
are Interface-Builder-designable UITableViewCell
controls, used to construct the [Timeline View](https://experience.sap.com/fiori-design-ios/ui-components/timeline-view/. The Timeline View presents information or events in chronological order.
Interface
FUITimelineCell
FUITimelineCell
is a selectable cell intended for timelines that require open and complete status that displays timeline details. Selecting the cell changes the card background color to the framework-preferred color:FioriUIColorStyle.line
.- It uses a vertical line and
nodeImageView
as a separator. Left to the vertical line is the timeline event stack view that containseventLabel
andeventImageView
; right to the vertical line is the main stack view that containsheadlineLabel
andsubheadlineLabel
. - Below the main view is an attribute stack view with
attributeLabel
andsubAttributeLabel
layed out horizontally. - To the right of the main view is a status view that contains
statusLabel
,statusImage
,substatusLabel
, andsubstatusImage
layed out vertically.
FUITimelineMarkerCell
FUITimelineMarkerCell
is a non-selectable withselectionStyle
set to.none
that is intended for timelines with start, inactive, early end, and end status that display timeline information.- It uses a vertical line and a node image as a separator. Left to the vertical line is the timeline event section that contains
eventLabel
andeventImageView
; right to the vertical line istitleLabel
. - The vertical line contains
leadingTimeline
on the top,nodeImageView
in the middle, and atrailingTimeline
at the bottom.
Usage
A FUITimelineCell
can be used freely within any UITableView
:
Register the FUITimelineCell
and FUITimelineMarkerCell
controls in the viewDidLoad
function:
override func viewDidLoad() {
super.viewDidLoad()
tableView.register(FUITimelineCell.self, forCellReuseIdentifier: FUITimelineCell.reuseIdentifier)
tableView.register(FUITimelineMarkerCell.self, forCellReuseIdentifier: FUITimelineMarkerCell.reuseIdentifier)
// ...
}
Initialize and configure cells in tableView(_:cellForRowAt:)
:
Though both options are marked public, you should always use the
Text: String and Image: UIImage properties to set cell content, instead of directly setting values to the @IBOutlet. This allows the implementation to optimize the constraints for the given content. It is fine to set other properties of the @IBOutlet, such as font style or color, opacity, etc.
- For
FUITimelineCell
:
let cell = tableView.dequeueReusableCell(withIdentifier: FUITimelineCell.reuseIdentifier, for: indexPath) as! FUITimelineCell
cell.headlineText = "Planned Downtime Period Identified"
cell.subheadlineText = "Work Package"
cell.nodeImage = FUITimelineNode.open
cell.eventText = "9:45\nAM"
cell.eventImage = #imageLiteral(resourceName: "rain")
cell.statusImage = #imageLiteral(resourceName: "ErrorIcon")
cell.subStatusText = "Active"
return cell
- For
FUITimelineMarkerCell
:
let cell = tableView.dequeueReusableCell(withIdentifier: FUITimelineMarkerCell.reuseIdentifier, for: indexPath) as! FUITimelineMarkerCell
cell.titleText = "Project Start"
cell.nodeImage = FUITimelineNode.start
cell.eventText = "12/6/15"
cell.showLeadingTimeline = false
return cell