Skip to content

KPI Progress View

FUIKPIProgressView

open class FUIKPIProgressView: NibDesignableControl, FUIKPIContainer, FUIStateTintable, FUIStateTintableImplementation, FUIContentCopyableView

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:

1
2
fdlFUIKPIProgressView {}
fdlFUIKPIProgressView_captionLabel {}

Supported KPIProgressView attributes:

1
2
3
4
5
6
tint-color (Color)
tint-color-disabled (Color)
font-color (Color)
font-color-disabled (Color)
progress-tint-color (Color)
track-tint-color (Color)
Last update: April 14, 2021