The FUITimelineCell
and FUITimelineMarkerCell
are Interface-Builder-designable UITableViewCell
controls, used to construct the Timeline View, which presents information or events in chronological order.
The FUITimelinePreviewTableViewCell
is an Interface-Builder-designable UI component that extends NibDesignableTableViewCell
which contains a FUITimelinePreviewView
. It resizes itself to fit content using the auto-layout size of FUITimelinePreviewView
.
The FUITimelinePreviewView
shows an excerpt of your project’s milestones in a convenient linear visual presentation. By default, each task node is ordered by date and can be classified as open, complete, or end. Timeline Preview augments task management by prioritizing overdue tasks as well as tasks closest to their due date but not yet marked as complete. This implementation aims to present the most pressing issues to the top of your task queue. Timeline Preview is supported across all currently supported Apple iOS devices.
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 of the vertical line is the timeline event stack view that containseventLabel
andeventImageView
; right of the vertical line is the main stack view that containsheadlineLabel
andsubheadlineLabel
. - Below the main view is an attribute stack view with
attributeLabel
andsubAttributeLabel
laid out horizontally. - To the right of the main view is a status view that contains
statusLabel
,statusImage
,substatusLabel
, andsubstatusImage
laid out vertically.
FUITimelineMarkerCell
FUITimelineMarkerCell
is a non-selectable cell withselectionStyle
set to.none
that is intended for timelines with start, inactive, early end, and end status that displays timeline information.- It uses a vertical line and a node image as a separator. Left of the vertical line is the timeline event section that contains
eventLabel
andeventImageView
; right of the vertical line istitleLabel
. - The vertical line contains
leadingTimeline
on the top,nodeImageView
in the middle, and atrailingTimeline
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
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
//Your data model
var data: [FUITimelineItem] {
let item0 = FUITimelineItem()
item0.title = "Planned Downtime Period Identified for Tasks"
item0.due = Date(timeIntervalSinceNow: -86400 * 2) // 86400 sec equal to 1 day
item0.status = .complete
let item1 = FUITimelineItem()
item1.title = "UX Design Review"
item1.due = Date(timeIntervalSinceNow: -86400)
item1.status = .open
let item2 = FUITimelineItem()
item2.title = "Planned Downtime Period Identified for Tasks"
item2.due = Date()
item2.status = .open
let item3 = FUITimelineItem()
item3.title = "UX Design Review"
item3.due = Date(timeIntervalSinceNow: 86400)
item3.status = .open
let item4 = FUITimelineItem()
item4.title = "Project End"
item4.due = Date(timeIntervalSinceNow: 86400 * 2.0)
item4.status = .end
return [item0, item1, item2, item3, item4]
}
//override dataSource method
override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: FUITimelinePreviewTableViewCell.reuseIdentifier, for: indexPath) as! FUITimelinePreviewTableViewCell
cell.timelinePreviewView.header.titleLabel.text = "Timeline"
cell.timelinePreviewView.header.attributeLabel.text = "attribute"
cell.timelinePreviewView.header.isDisclosureAccessoryHidden = false
cell.timelinePreviewView.header.didSelectHandler = {
print("header is selected")
}
cell.timelinePreviewView.addItems(data)
cell.timelinePreviewView.numberOfColumns = 4 //set numberOfColumns if you want to change number of columns showing
return cell
}