KPI items

  • The FUIKPIView is an UIView subclass, which enables a developer to present “KPI” information in a formatted manner consistent with the Fiori Design Language.

    The FUIKPIView takes 3 types of component items, and a caption string:

    • metric: the value which is being displayed. For example, in: $256k, the metric is “256”.
    • unit: the unit information for the metric displayed. For example, in $256k, the units are “$” and “k”. Multiple unit components are permitted per metric. However, a maximum of two units should be used on each side of the metric.
    • icon: a 32px x 32px icon may be displayed. Icons should only be displayed to the left of a metric. Units may still be displayed to the right of the metric, when an icon is displayed.

    • captionLabel: optional label, displayed beneath the KPI components.

    The KPI components are implemented as FUIKPIMetricItem, FUIKPIUnitItem, and FUIKPIIconItem. All implement FUIKPIViewItem protocol. The developer should create instances of each of these components, and pass them to the items: [FUIKPIViewItem] property of the FUIKPIView.

    Note

    This API of component items is conceptually similar to that of UIToolbar‘s items: [UIBarButtonItem]? property.

    Color configuration:

    • Call setTintColor(_:for:) to configure tint color for disabled, normal, highlighted UIControlState. Setting tintColor is equivalent to call setTintColor(color, for: UIControlState.normal). If tintColor is not set by developer, colorScheme will be applied.
    • Disabled: Color to be used when control is disabled.
    • Normal: Color to be used when control is enabled.
    • Highlighted: Color to be used when control is tapped on.

    Initialization

    Programmatically:

    let kpiView = FUIKPIView(frame: CGRect())
    

    Inside a Storyboard or xib:

    1. Drag and drop a UIView component to Interface Builder’s canvas.
    2. Switch custom class name from UIView to FUIKPIView and set module to SAPFiori.
    3. Create an outlet of the FUIKPIView to be able to access its properties.

    Usage

    
    // Do any additional setup after loading the view.
    
    let unit = FUIKPIUnitItem(string: "$")
    let metric = FUIKPIMetricItem(string: "294")
    let unit2 = FUIKPIUnitItem(string: "USD")
    
    self.kpiView.items = [unit, metric, unit2]
    self.kpiView.captionlabel.text = "Label example can wrap to two lines"
    
    
    let icon = FUIKPIIconItem(icon: #imageLiteral(resourceName: "ProfilePic"))
    let metric2 = FUIKPIMetricItem(string: "2")
    
    self.kpiIconView.items = [icon, metric2, unit2]
    self.kpiIconView.captionlabel.text = "Documents Example of Two Line Wrap"
    
    

    Theming

    Supported KPIView class paths:

    fdlFUIKPIView {}
    fdlFUIKPIView_textView {}
    fdlFUIKPIView_captionLabel {}
    

    Supported KPIView attributes:

    tint-color (Color)
    tint-color-disabled (Color)
    tint-color-highlighted (Color)
    
    See more

    Declaration

    Swift

    open class FUIKPIView : NibDesignableControl, FUIStateTintable, FUIStateTintableImplementation, FUIKPIContainer, FUIContentCopyableView
    extension FUIKPIView: FUIStateSelectable
  • A protocol defines style representing an item in FUIKPIView.

    See more

    Declaration

    Swift

    public protocol FUIKPIViewItem
  • An enum representing the different view styles that a FUIKPIView can have.

    See more

    Declaration

    Swift

    public enum FUIKPIViewItemStyle
  • The FUIKPIMetricItem conforms to FUIKPIViewItem protocol for representing the value being displayed in FUIKPIView. For example, in: “$256k”, the metric is “256”.

    See more

    Declaration

    Swift

    open class FUIKPIMetricItem : FUIKPIViewItem
  • The FUIKPIUnitItem conforms to FUIKPIViewItem protocol for representing the metric’s unit information being displayed in FUIKPIView. For example, in “$256k”, the units are “$” and “k”.

    See more

    Declaration

    Swift

    open class FUIKPIUnitItem : FUIKPIViewItem
  • The FUIKPIIconItem is an UIImageView subclass, which conforms to FUIKPIViewItem protocol for representing a 32px x 32px icon being displayed in the FUIKPIView.

    See more

    Declaration

    Swift

    open class FUIKPIIconItem : FUIKPIViewItem
  • The FUIKPIFractionItem is an UILabel subclass, which conforms to FUIKPIViewItem protocol for representing the value being displayed in FUIKPIView. For example, in: “56/100”, the fraction is “56” or “100”.

    See more

    Declaration

    Swift

    open class FUIKPIFractionItem : FUIKPIViewItem
  • The FUIKPIProgressView is an UIView subclass, which enables a developer to present “KPI” information in a formatted manner consistent with the Fiori Design Language.

    The FUIKPIProgressView takes 4 types of component items, and a caption string:

    • chartSize: KPICharts can be small (104 px circle) or large (130 px circle). Large is default
    • metric: The value which is being displayed. For example, in: “42%” and “42/100”, the metric is “42”.
    • fraction: The value which is being displayed when in a fraction form. For example, in: 42/100, the fraction elements are “42” and “100” with “/” being a “unit” item.
    • unit: the unit information for the metric displayed. For example, in “42%”, the unit is “%”. Multiple unit components are permitted per metric. However, a maximum of two units should be used on each side of the metric.

    • progress: The percentage of the KPI chart/circle that should be filled in. For example, to have half of the circle chart filled in, the progress is “0.50”. Progress bar animates on load.

    • captionLabel: An optional label displayed directly beneath the KPI components. The label will shift to underneath the circle if sizing requires. For small charts, the caption can be up to 86 px in length. Greater than that, it moves outside of the circle and can wrap to up to 2 lines of 122 px per line. For large charts, the caption inside the circle can be up to 94 px. Beyond that, it moves outside the circle and wraps to up to 2 lines of 216 px per line.

    The KPI components are implemented as FUIKPIMetricItem, FUIKPIFractionItem, or FUIKPIUnitItem. All implement FUIKPIViewItem protocol. The developer should create instances of each of these components, and pass them to the items: [FUIKPIViewItem] property of the FUIKPIProgressView.

    Note

    This API of component items is conceptually similar to that of UIToolbar‘s items: [UIBarButtonItem]? property.

    Color configuration:

    • Call setTintColor(_:for:) to configure tint color for disabled, normal, highlighted UIControlState. Setting tintColor is equivalent to call setTintColor(color, for: UIControlState.normal). If tintColor is not set by developer, colorScheme will be applied.
    • Call setTextColor(_:for:) to configure tint color for disabled, normal, highlighted UIControlState of the KPIView and caption text.
    • Disabled: Color to be used when control is disabled.
    • Normal: Color to be used when control is enabled.
    • Highlighted: Color to be used when control is tapped on.

    Initialization

    Programmatically:

    let kpiChartView = FUIKPIProgressView(frame: CGRect())
    

    Inside a Storyboard or xib:

    1. Drag and drop a UIView component to Interface Builder’s canvas.
    2. Switch custom class name from UIView to FUIKPIProgressView and set module to SAPFiori.
    3. Create an outlet of the FUIKPIProgressView to be able to access its properties.

    Usage

    
    self.kpiChartView.chartSize = FUIKPIProgressViewSize.small
    let metric = FUIKPIMetricItem(string: "33")
    let unit = FUIKPIUnitItem(string: "%")
    self.kpiChartView.items = [metric, unit]
    self.kpiChartView.progress = Float(0.33)
    self.kpiChartView.captionLabelText = "Complete"
    
    

    Theming

    Supported KPIProgressView class paths:

    fdlFUIKPIProgressView {}
    fdlFUIKPIProgressView_captionLabel {}
    

    Supported KPIProgressView attributes:

    tint-color (Color)
    tint-color-disabled (Color)
    font-color (Color)
    font-color-disabled (Color)
    progress-tint-color (Color)
    track-tint-color (Color)
    
    See more

    Declaration

    Swift

    open class FUIKPIProgressView : NibDesignableControl, FUIKPIContainer, FUIStateTintable, FUIStateTintableImplementation, FUIContentCopyableView
    extension FUIKPIProgressView: FUIStateSelectable
  • Enum to determine whether to display the large or small progress circle around the KPIView. Default: FUIKPIProgressViewSize.large

    See more

    Declaration

    Swift

    public enum FUIKPIProgressViewSize
  • 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
    
    

    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;
    }
    
    See more

    Declaration

    Swift

    @IBDesignable
    open class FUIKPIHeader : FUIDrawingView
  • Protocol indicating a component expects an optional instance of a FUIKPIAttributesProvider

    See more

    Declaration

    Swift

    public protocol FUIKPIAttributesConsumer : AnyObject
  • Provider for FUIKPIAttributedStringBuilder attributes. Decoupling the style definitions from the string constructor means that the same logic for building string can be shared by all controls taking array of FUIKPIViewItem, while each special control using the items (FUIKPIView, FUIKPIProgressView (small & large), AnalyticViews, etc.,) can have unique styles by supplying a custom implementation of this protocol.

    See more

    Declaration

    Swift

    public protocol FUIKPIAttributesProvider : AnyObject