Skip to content

KPI Header


@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

KPI Header

Compact (Portrait) Horizontal Size Class: Variations

KPI Header

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


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!)


fdlFUIKPIHeader_background {
background-color: @backgroundGradientTop;

fdlFUIKPIHeader_kpiView {
tint-color: @primary6;

Last update: April 14, 2021