KPI Header¶
FUIKPIHeader
¶
@IBDesignable open class FUIKPIHeader: FUIDrawingView
FUIKPIHeader
extends UIView
for a table view header displaying KPI items, of type FUIKPIView
and FUIKPIProgressView
. A maximum of four KPI values can be displayed in the header, hence if more than four items are provided in the items array as input to the header, only the first four are displayed and the rest of the items are ignored. When both FUIKPIView
and FUIKPIProgressView
items are provided, the items are sorted such that the FUIKPIProgressViews
are displayed first, followed by the FUIKPIViews
. Only FUIKPIProgessViews
with chartSize
of 'large'can be displayed in the header , if an FUIProgressView
of charSize
'small'is supplied, it is ignored. Based on the number of KPI items that can be shown based on the screen size, a page control is used to display multiple pages in the header, as required. The KPI items in the header can be enabled or disabled. The default KPI header background is of color scheme .dark
, hence to display the KPI items with the appropriate tintColor
as per the Fiori design guidelines for iOS, it is required that the KPI items supplied to the header have a color scheme of .dark
as well. The developer can choose to supply a custom tint color for the KPIs. It is important to set the colorScheme
of the KPI before the call to override the tintColor
, as shown below.( since setting the colorScheme
resets the tintColor
to the defaults, if the calls are not in order, then the custom tintColors
are not displayed.)
kpiView.colorScheme = .dark
kpiView.setTintColor(.yellow, for: .normal)
Regular (Landscape) Horizontal Size Class: Variations¶
Compact (Portrait) Horizontal Size Class: Variations¶
Example Initialization and Configuration¶
In table view controller's viewDidLoad
function:
//Programmatically add a KPIHeader to tableview
let kpiView1 = FUIKPIView()
let kpiView1Icon = FUIKPIIconItem(icon: #imageLiteral(resourceName: "asset").withRenderingMode(.alwaysTemplate))
let kpiView1Metric = FUIKPIMetricItem(string: "5")
let kpiView1Unit1 = FUIKPIUnitItem(string: "k")
kpiView1.items = [kpiView1Icon, kpiView1Metric,kpiView1Unit1]
kpiView1.captionlabel.text = "Orders processed"
kpiView1.isEnabled = false
kpiView1.colorScheme = .dark
var kpiChartLarge: FUIKPIProgressView!
kpiChartLarge = FUIKPIProgressView()
kpiChartLarge.chartSize = FUIKPIProgressViewSize.large
let fractionLarge = FUIKPIFractionItem(string: "12")
let unitLarge = FUIKPIFractionItem(string: "/")
let fractionLarge2 = FUIKPIFractionItem(string: "25")
kpiChartLarge.items = [fractionLarge, unitLarge, fractionLarge2]
kpiChartLarge.progress = Float(0.64)
kpiChartLarge.captionLabelText = "Completed"
kpiChartLarge.colorScheme = .dark
let kpiArray = [kpiView1, kpiChartLarge]
let KPIHeader = FUIKPIHeader()
KPIHeader.items = kpiArray
self.tableView.tableHeaderView = KPIHeader
Note¶
FUIKPIHeader
added to UITableView
as tableHeaderView
is compatible with UIRefreshControl
added to the same table view. Please note that if an UIRefreshControl
object is set after adding an FUIKPIHeader
object as tableHeaderView
, the UIRefreshControl
subview must be moved to the front in the tableView
; otherwise, the UIRefreshControl
object will be hidden.
//set kpiHeader to tableHeaderView first
self.tableView.tableHeaderView = kpiHeader
//set a refresh control next
self.refreshControl = UIRefreshControl()
self.refreshControl?.addTarget(self, action: #selector(refreshTriggered), for: .valueChanged)
self.refreshControl?.tintColor = UIColor.white
//bring refresh control to the front to make it visible
self.tableView.bringSubview(toFront: self.refreshControl!)
Theming¶
fdlFUIKPIHeader_background {
background-color: @backgroundGradientTop;
}
fdlFUIKPIHeader_kpiView {
tint-color: @primary6;
}