KPI View¶
FUIKPIView
¶
open class FUIKPIView: NibDesignableControl, FUIStateTintable, FUIStateTintableImplementation, FUIKPIContainer, FUIContentCopyableView
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
: a32px 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
'sitems: [UIBarButtonItem]?
property.
Color Configuration¶
- Call
setTintColor(_:for:)
to configure tint color for disabled, normal, highlightedUIControlState
. SettingtintColor
is equivalent to callsetTintColor(color, for: UIControlState.normal)
. IftintColor
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
¶
- Drag and drop a
UIView
component to Interface Builder's canvas. - Switch custom class name from
UIView
toFUIKPIView
and set module toSAPFiori
. - 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:
1 2 3 |
|
Supported KPIView
attributes:
1 2 3 |
|