FUITimelineCell

@IBDesignable
open class FUITimelineCell : NibDesignableFUIBaseTableViewCell

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: .cellBackgroundTapState.
  • 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:45\nAM"
        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
        //...
    }

#### Customize the background color Developers may use the backgroundColor property of timelineBackground and cardBackground to set the background color, and use the setTintColor(_:_:) UITableViewCell API to customize the card background in highlighted and completed states.

    timelineCell.timelineBackground.backgroundColor = UIColor.orange
    timelineCell.cardBackground.backgroundColor = UIColor.yellow // For normal background
    timelineCell.setTintColor(UIColor.red, for: .highlighted) // For highlighted state background
    timelineCell.setTintColor(UIColor.green, for: .application) // For completed state background

## Theming Supported style classes

 fdlFUITimelineCell
 fdlFUITimelineCell_headlineLabel
 fdlFUITimelineCell_subheadlineLabel
 fdlFUITimelineCell_eventLabel
 fdlFUITimelineCell_statusLabel
 fdlFUITimelineCell_substatusLabel
 fdlFUITimelineCell_attributeLabel
 fdlFUITimelineCell_subattributeLabel
 fdlFUITimelineCell_timelineBackground
 fdlFUITimelineCell_cardBackground
 fdlFUITimelineCell_cardBackground_complete
 fdlFUITimelineCell_cardBackground_highlighted

  • Reuse identifier @return String a reuse identifier that describes FUITimelineCell

    Declaration

    Swift

    open class var reuseIdentifier: String { get }

- UI Components

  • A headline label in the main view.

    Important

    Use the @IBInspectable headlineText property to set the label’s text value

    Declaration

    Swift

    @IBOutlet
public private(set) var headlineLabel: FUILabel!

  • A subheadline label in the main view.

  • Important

    Use the @IBInspectable subheadlineText property to set the label’s text value

    • Declaration

    Swift

    @IBOutlet
public private(set) var subheadlineLabel: FUILabel!

  • A status label in the status stack view.

  • Important

    Use the @IBInspectable statusText property to set the label’s text value

    • Declaration

    Swift

    @IBOutlet
public private(set) var statusLabel: FUILabel!

  • A substatus label in the status stack view.

  • Important

    Use the @IBInspectable substatusText property to set the label’s text value

    • Declaration

    Swift

    @IBOutlet
public private(set) var subStatusLabel: FUILabel!

  • A status image view in the status stack view.

  • Important

    Use the @IBInspectable statusImage property to set the image view’s image value

    • Declaration

    Swift

    @IBOutlet
public private(set) var statusImageView: FUIImageView!

  • A substatus image view in the status stack view.

  • Important

    Use the @IBInspectable substatusImage property to set the image view’s image value

    • Declaration

    Swift

    @IBOutlet
public private(set) var subStatusImageView: FUIImageView!

  • A event label in the cell’s left column.

    Important

    Use the @IBInspectable eventText property to set the label’s text value

    Declaration

    Swift

    @IBOutlet
public private(set) var eventLabel: FUILabel!

  • A event image view in the cell’s left column.

  • Important

    Use the @IBInspectable eventImage property to set the image view’s image value

    • Declaration

    Swift

    @IBOutlet
public private(set) var eventImageView: FUIImageView!

  • A node image view, centered on the cell’s vertical timeline line.

    Remark

    Use FUITimelineNode static properties, to return standard Fiori Design Language node images

    Declaration

    Swift

    @IBOutlet
public private(set) var nodeImageView: FUIImageView!

  • A attribute label in the footer horizontal stack view.

  • Important

    Use the @IBInspectable attributeText property to set the label’s text value

    • Declaration

    Swift

    @IBOutlet
public private(set) var attributeLabel: FUILabel!

  • A subAttribute label in the footer horizontal stack view.

  • Important

    Use the @IBInspectable subAttributeText property to set the label’s text value

    • Declaration

    Swift

    @IBOutlet
public private(set) var subAttributeLabel: FUILabel!

  • The background view of of the area on the left of timeline.

    Declaration

    Swift

    @IBOutlet
public private(set) weak var timelineBackground: UIView!

  • The background view of this FUITimelineCell.

    Declaration

    Swift

    @IBOutlet
public private(set) weak var cardBackground: UIView!

- @IBInspectable Properties

  • Property defining the headline text. An empty string value hides the headlineLabel

    Declaration

    Swift

    @IBInspectable
public var headlineText: String? { get set }

  • Property defining the subheadline text. An empty string value hides the subheadlineLabel

    Declaration

    Swift

    @IBInspectable
public var subheadlineText: String? { get set }

  • Property defining the statusLabel.text value. An empty string value hides the statusLabel.

  • Important

    The statusLabel and statusImageView may not be displayed simultaneously. When values exist for both statusText and statusImage, the last value set will be used.

    • Declaration

    Swift

    @IBInspectable
public var statusText: String? { get set }

  • Property defining the substatusLabel text. An empty string value hides the subStatusLabel. It’s expected to either set subStatusLabel or substatusImage to display either one as the same position.

    Declaration

    Swift

    @IBInspectable
public var subStatusText: String? { get set }

  • Property defining the statusImageView image. An empty value hides the statusImageView. It’s expected to either set statusText or statusImage to display either one as the same position. When both statusText and statusImage is not set, the substatusLabel or substatusImage takes statusLable/statusImage’s position.

    Declaration

    Swift

    @IBInspectable
public var statusImage: UIImage? { get set }

  • Property defining the substatusImageView image. An empty value hides the substatusImageView. It’s expected to either set substatusText or substatusImage to display either one as the same position.

    Declaration

    Swift

    @IBInspectable
public var subStatusImage: UIImage? { get set }

  • Property defining the eventLabel text. An empty value hides the eventLabel

    Declaration

    Swift

    @IBInspectable
public var eventText: String? { get set }

  • Property defining the eventImageView image. An empty value hides the eventImageView

    Declaration

    Swift

    @IBInspectable
public var eventImage: UIImage? { get set }

  • Property defining the node image. Check with FUITimelineNode for a list of possible node images for different timeline status

    Declaration

    Swift

    @IBInspectable
public var nodeImage: UIImage? { get set }

  • Property defining the timeline width, which is the width of the whole event view left to the veritical line in the cell. The default width is 83.0 px

    Declaration

    Swift

    @IBInspectable
public var timelineWidth: CGFloat { get set }

  • Property defining the attributeLabel text. An empty value hides attributeLabel and subAttributeLabel text gets displayed at the original attributeLabel position.

    Declaration

    Swift

    @IBInspectable
public var attributeText: String? { get set }

  • Property defining the subAttributeLabel text. An empty value hides subAttributeLabel.

    Declaration

    Swift

    @IBInspectable
public var subAttributeText: String? { get set }