KPI view

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

Image

Interface

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.

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"

  • 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.

    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

    See more

    Declaration

    Swift

    open class FUIKPIView: NibDesignable
  • The FUIKPIUnitItem is an UILabel subclass, which 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: UILabel, FUIKPIViewItem