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.

Image

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

  • 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.

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