FUITimelineCell

open class FUITimelineCell: NibDesignableTableViewCell

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
        //...
    }

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

    Declaration

    Swift

    open static var reuseIdentifier: String
  • A headline label in the main view.

    Important

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

    Declaration

    Swift

    @IBOutlet open var headlineLabel: UILabel!
  • A subheadline label in the main view.

  • Important

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

  • Declaration

    Swift

    @IBOutlet open var subheadlineLabel: UILabel!
  • A status label in the status stack view.

  • Important

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

  • Declaration

    Swift

    @IBOutlet open var statusLabel: UILabel!
  • A substatus label in the status stack view.

  • Important

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

  • Declaration

    Swift

    @IBOutlet open var subStatusLabel: UILabel!
  • 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 open var statusImageView: UIImageView!
  • 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 open var subStatusImageView: UIImageView!
  • 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 open var eventLabel: UILabel!
  • 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 open var eventImageView: UIImageView!
  • 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 open var nodeImageView: UIImageView!
  • 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 open var attributeLabel: UILabel!
  • 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 open var subAttributeLabel: UILabel!
  • Property defining the headline text. An empty string value hides the headlineLabel

    Declaration

    Swift

    open var headlineText : String?
  • Property defining the subheadline text. An empty string value hides the subheadlineLabel

    Declaration

    Swift

    open var subheadlineText : String?
  • 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

    open var statusText : String?
  • 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

    open var subStatusText : String?
  • 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

    open var statusImage: UIImage?
  • 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

    open var subStatusImage : UIImage?
  • Property defining the eventLabel text. An empty value hides the eventLabel

    Declaration

    Swift

    open var eventText: String?
  • Property defining the eventImageView image. An empty value hides the eventImageView

    Declaration

    Swift

    open var eventImage : UIImage?
  • Property defining the node image. Check with FUITimelineNode for a list of possible node images for different timeline status

    Declaration

    Swift

    open var nodeImage : UIImage?
  • 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

    open var timelineWidth : CGFloat = defaultTimelineWidth
  • Property defining the attributeLabel text. An empty value hides attributeLabel and subAttributeLabel text gets displayed at the original attributeLabel position.

    Declaration

    Swift

    open var attributeText : String?
  • Property defining the subAttributeLabel text. An empty value hides subAttributeLabel.

    Declaration

    Swift

    open var subAttributeText : String?