FUITimelineCell

@IBDesignable
open class FUITimelineCell : NibDesignableFUIBaseTableViewCell, FUIStyleSheetAttributesApplying

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

Timeline Cell

  • 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.
  • It uses a vertical line and nodeImageView as a separator. To the left of the vertical line is the timeline event stack view that contains eventLabel and eventImageView. To the right of 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 laid out horizontally.
  • To the right of the main view is a status view that contains statusLabel, statusImage, substatusLabel, and substatusImage laid 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.nodeType = .open
 cell.eventText = "9:45\nAM"
 cell.eventImage = #imageLiteral(resourceName: "rain")
 cell.statusImage = #imageLiteral(resourceName: "ErrorIcon")
 cell.subStatusText = "Active"
 return cell
 }

## Notes

### SingleLine Separator 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_timestampLabel
 fdlFUITimelineCell_secondaryTimestampLabel
 fdlFUITimelineCell_statusLabel
 fdlFUITimelineCell_substatusLabel
 fdlFUITimelineCell_attributeLabel
 fdlFUITimelineCell_subattributeLabel
 fdlFUITimelineCell_nodeImageView
 fdlFUITimelineCell_timelineBackground
 fdlFUITimelineCell_cardBackground
 fdlFUITimelineCell_cardBackground_past
 fdlFUITimelineCell_cardBackground_highlighted

  • The version to be displayed. The default is .v2.

    Declaration

    Swift

    public var version: FUITimeline.Version { get set }

  • 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! { get }

    • 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! { get }

    • 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! { get }

    • 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! { get }

    • 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! { get }

    • 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! { get }

    • A timestamp 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 timestampLabel: FUILabel! { get }

    • A secondary timestamp label in the cell’s left column.

    • Important

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

    Declaration

    Swift

    @IBOutlet
public private(set) weak var secondaryTimestampLabel: FUILabel! { get }

  • A separator line in the cell’s top. The default is separatorLineView.isHidden = false. Use separatorLineView.isHidden = true hide separator line.

    Declaration

    Swift

    @IBOutlet
public private(set) weak var separatorLineView: UIView! { get }

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

    • Important

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

    Declaration

    Swift

    @IBOutlet
public private(set) var secondaryTimestampImageView: FUIImageView! { get }

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

    Remark

    Use nodeType to set node.

    Declaration

    Swift

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

  • The color of the node when cell is enabled.

    Declaration

    Swift

    public var nodeColor: UIColor? { get set }

  • The color of the node when cell is disabled.

    Declaration

    Swift

    public var nodeColorDisabled: UIColor? { get set }

  • The type of sdk default node icon the timeline cell will use. The default value is .open.

    Declaration

    Swift

    public var nodeType: NodeType { get set }

  • If false, maintain same layout as open state. The default value is true.

    Declaration

    Swift

    public var useCompactLayoutInComplete: Bool

    • An 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! { get }

    • 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! { get }

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

    Declaration

    Swift

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

  • The background view of this FUITimelineCell.

    Declaration

    Swift

    public private(set) var cardBackground: UIView { get }

  • A Boolean value indicates whether to show a single action button instead of the status stack. The default value is false.

    Declaration

    Swift

    open var isSingleActionEnabled: Bool { get set }

  • The single action button is displayed in top right corner when isSingleActionEnabled is set to true.

    Declaration

    Swift

    public let singleActionButton: FUIButton

  • A Boolean value indicates whether the timestamp of the timeline cell is in the past. The default value is false.

    Declaration

    Swift

    public var isPast: Bool { get set }

  • A Boolean value indicates whether the timestamp of the timeline cell is in the present. The default value is false.

    Declaration

    Swift

    public var isPresent: Bool { get set }

@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 cannot be displayed simultaneously. When values exist for both statusText and statusImage, statusText will take precedence.

    Declaration

    Swift

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

  • 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 at the same position. When both statusText and statusImage are not set, the substatusLabel or substatusImage take 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 at the same position.

    Declaration

    Swift

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

  • Property defining the timestamp text. An empty value hides the timestamp label.

    Declaration

    Swift

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

  • Property defining the secondary timestamp text. An empty value hides the secondary timestamp label.

    Declaration

    Swift

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

  • Property defining the secondaryTimestampImageView‘s image. An empty value hides the secondaryTimestampImageView.

    Declaration

    Swift

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

  • The image used as node icon.

    If the value of this property is not nil, the timeline cell uses the given image as the node icon. It ignores the value of the nodeType property. nodeColor and nodeColorDisabled properties will also be ignored, so the developer is responsible for providing an image with the desired color.

    Declaration

    Swift

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

  • Property defining the timeline width, which is the width of the whole timestamp view to the left of the vertical line in the cell. The default width is 70.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 }

  • Node type for FUITimelineCell.

    See more

    Declaration

    Swift

    public enum NodeType : Int