Timeline views

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

  • FUITimelineCell is a UITableViewCell subclass, designed to present a business object related to an event, in a Timeline view.

    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: FUIColorStyle.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.

    Usage

    
        override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
            let cell = tableView.dequeueReusableCell(withIdentifier: FUITimelineCell, for: indexPath) as! FUITimelineCell
            cell.headlineText = Planned Downtime Period Identified
            cell.subheadlineText = Work Package
            cell.nodeImage = FUITimelineNode.open
            cell.eventText = 9:45se>\ns>AM
            cell.eventImage = #imageLiteral(resourceName: rain)
            cell.statusImage = #imageLiteral(resourceName: ErrorIcon)
            cell.subStatusText = Active
            return cell
        }

    Notes

    SingleLine Sepatator Between Timeline Items in the Table

    Tableview’s default separatorStyle is .singleLine. Because of this default setting, there can be a 1.0 px divider line or a separator in-between each item on the timeline in the table. This is not an issue in timeline. To get rid of the separator, set separatorStyle to none in the TabelViewController class

    
        override func viewDidLoad() {
            super.viewDidLoad()
            //...
            self.tableView.separatorStyle = .none
            //...
        }
    
    
    See more

    Declaration

    Swift

    open class FUITimelineCell: NibDesignableTableViewCell
  • FUITimelineMarkerCell is a UITableViewCell subclass, designed to present a business object related to an event, in a Timeline view.

    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 “`swift

    override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "FUITimelineMarkerCell", for: indexPath) as! FUITimelineMarkerCell
        cell.titleText = "Project Start"
        cell.nodeImage = FUITimelineNode.start
        cell.eventText = "12/6/15"
        cell.showLeadingTimeline = false
        return cell
    }
    
    
     ## Notes
     #### SingleLine Sepatator Between Timeline Items in the Table
     Tableview's default `separatorStyle` is `.singleLine`.  Because of this default setting, there can be a 1.0 px divider line or a separator in-between each item on the timeline in the table.  This is not an issue in timeline.  To get rid of the separator, set `separatorStyle` to `none` in the TabelViewController class
    
     ```swift
    
         override func viewDidLoad() {
         super.viewDidLoad()
         // ...
         self.tableView.separatorStyle = .none
         // ...
     }
    
    
    See more

    Declaration

    Swift

    open class FUITimelineMarkerCell: NibDesignableTableViewCell
  • FUITimelineNode defines framework-supplied images for various timeline node status values.

    Usage

    
        let nodeImage = FUITimelineNode.start

    See more

    Declaration

    Swift

    public struct FUITimelineNode