The FUITimelineCell and FUITimelineMarkerCell are Interface-Builder-designable UITableViewCell controls, used to construct the [Timeline View]( The Timeline View presents information or events in chronological order.




  • 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 contains eventLabel and eventImageView; right to the vertical line is the main stack view that contains headlineLabel and subheadlineLabel.
  • Below the main view is an attribute stack view with attributeLabel and subAttributeLabel layed out horizontally.
  • To the right of the main view is a status view that contains statusLabel, statusImage, substatusLabel, and substatusImage layed out vertically.


  • FUITimelineMarkerCell is a non-selectable with selectionStyle 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 and eventImageView; right to the vertical line is titleLabel.
  • The vertical line contains leadingTimeline on the top, nodeImageView in the middle, and a trailingTimeline at the bottom.


A FUITimelineCell can be used freely within any UITableView:

Register the FUITimelineCell and FUITimelineMarkerCell controls in the viewDidLoad function:

    override func 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 =
    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