Technology Blogs by SAP
Learn how to extend and personalize SAP applications. Follow the SAP technology blog for insights into SAP BTP, ABAP, SAP Analytics Cloud, SAP HANA, and more.
cancel
Showing results for 
Search instead for 
Did you mean: 
former_member304527
Discoverer
1,452
In the SDK release of 2.1 there are new controls introduced for visualizing business data in the form of charts. Visualizing business data is a powerful way to gain insights into the underlying data. Line charts over a period of time is also an effective way to easily see trends in business data.

Currently, SAP Fiori for iOS supports four chart types: horizontal bar, column, line and combination (column + line) charts.



Depending on the business scenario, a particular chart type may be selected when building an application. The classes in the SDK used for working with charts and analytics data are categorized under Chart Floorplan and Analytics Cards. The classes start with FUIChart and FUIKPI prefixes.

In this blog, we will describe how to use the FUIChartFloorplanViewController for adding a Bar Chart.  The following process will be used for adding the Bar Chart:

  1. We will generate an Master Detail application from Assistant connecting an API endpoint on Business Hub.

  2. We will create a FUIChartFloorplanViewController for a Bar Chart that has sample data to chart.

  3. We will add a cell to the collection that will invoke the Bar Chart ViewController when selected

  4. We will change the Collections Table View to invoke the Bar Chart ViewController when the cell is selected.


Step 1:

  1. Generate the Master Detail application using the SDK Assistant for S/4 HANA Cloud Platform with Product Allocation Object endpoint

  2. Use the SDK Assistant to create an application using an endpoint on the SAP API Business Hub (as shown in screenshot below)






  1. Select the S/4 HANA Cloud API product and select the API for Product Allocation Object (as shown in the screenshot below)

  2. Complete the Assistant flow with the defaults in the succeeding pages and build the XCode project. The application should run with the following initial view.




Step 2:

  1. In this step we will add a cell below in the above view to display a Bar Chart with sample data.

  2. First, create the Swift files for FUIChartFloorplanViewController to display Bar Chart as well as sample data classes to chart.


The snippet of code of demonstrating how a Bar Chart is created with sample data is given below.
//

// Copyright © 2018 SAP SE. All rights reserved.

//

// The following snippet shows the sample data being setup for the Bar chart

// The ViewController is now defined being derived from FUIChartSummaryDataSource

extension SalespersonAnalyticsViewController: FUIChartSummaryDataSource {

func chartView(_ chartView: FUIChartView, summaryItemForCategory categoryIndex: Int) -> FUIChartSummaryItem? {

let item = FUIChartSummaryItem()

item.categoryIndex = categoryIndex

item.isEnabled = true

item.isPreservingTrendHeight = false



let values: [Double] = {

var values: [Double] = []

for series in chartView.series {

values.append(series.valueForCategory(categoryIndex, dimension: 0)!)

}

return values

}()

item.valuesText = values.map { formattedTitleForDouble($0)! }

item.title.text = chartCategoryTitles()[categoryIndex]

return item

}

}

extension SalespersonAnalyticsViewController: FUIChartViewDataSource {

func formattedTitleForDouble(_ value: Double) -> String? {

let numberFormatter = NumberFormatter()

numberFormatter.numberStyle = .none

numberFormatter.maximumFractionDigits = 0

let formattedNumber = numberFormatter.string(from: value as NSNumber)!

return "$\(formattedNumber)k"

}



func chartSeriesTitles() -> [String] {

return ["Actual", "Target"]

}

func chartCategoryTitles() -> [String] {

return ["Adam Humprey", "Jimmy Patrick", "Franck Syren", "Alex Kilgo", "Kim Kilgo", "Sean Long", "Flash Ek-Ularnpun", "Lili Lin", "Luka Ning", "Rodhan Hickey", "Natasha Girotra", "Megan Zurcher", "Joan Wood", "Stanley Thomas Stadelman Jr."]

}

func chartData() -> [[Double]] {

return [[2.5, 2.2, 1.6, 2.8, 1.7, 0.9, 0.8, 1.95, 1.75, 1.33, 2.44, 1.4, 1.25, 1.8]]

}

func numberOfSeries(in: FUIChartView) -> Int {

return chartData().count

}

func chartView(_ chartView: FUIChartView, numberOfValuesInSeries seriesIndex: Int) -> Int {

return chartData()[seriesIndex].count

}

func chartView(_ chartView: FUIChartView, valueForSeries series: Int, category categoryIndex: Int, dimension dimensionIndex: Int) -> Double? {

return chartData()[series][categoryIndex] * 100.0

}

func chartView(_ chartView: FUIChartView, formattedStringForValue value: Double, axis: FUIChartAxisId) -> String? {

return formattedTitleForDouble(value)

}

func chartView(_ chartView: FUIChartView, titleForCategory categoryIndex: Int, inSeries seriesIndex: Int) -> String? {

return chartCategoryTitles()[categoryIndex]

}

}

extension NumberFormatter {

func string(fromOptional from: NSNumber?) -> String {

guard let value = from,

let string = self.string(from: value as NSNumber) else {

return ""

}

return string

}

}

import UIKit

import SAPFiori

class SalespersonAnalyticsViewController: FUIChartFloorplanViewController {

override func viewDidLoad() {

super.viewDidLoad()

self.title = "Sales Chart"

self.chartView.chartType = .bar

self.chartView.numberOfGridlines = 4

self.chartView.dataSource = self

self.headerView.dataSource = self

self.titleText.text = "Total APE ($) by Salesperson"

self.status.text = "Updated 20m ago"

self.categoryAxisTitle.text = "Salesperson"

self.valuesAxisTitle.text = "Total APE ($)"

let item = FUIChartSummaryItem()

item.categoryIndex = -1

item.isEnabled = false

item.isPreservingTrendHeight = false

let values: [Double] = {

var values: [Double] = []

for series in chartView.series {

let categoriesUpperBound = series.numberOfValues - 1

if let valuesInSeries = series.valuesInCategoryRange((0...categoriesUpperBound), dimension: 0) {

values.append(valuesInSeries.flatMap({ $0 }).reduce(0.0, +))

}

}

return values

}()



let numberFormatter = NumberFormatter()

numberFormatter.numberStyle = .currency

numberFormatter.maximumFractionDigits = 0

item.valuesText = values.map { "\(numberFormatter.string(from: $0 as NSNumber)!)k" }

item.title.text = "Team ($) APE"

self.headerView.addItem(item)

}

}

 

Step3:

Add a TableView cell to the collection that will invoke the Bar Chart ViewController when selected.

Also change the Collections Table View to invoke the Bar Chart ViewController when the cell is selected.

The relevant snippets of code are given below:

In the CollectionsViewController.swift file replace the tableView function for rendering the cells with the following. This new function adds an additional cell to invoke the Row Chart.

 
override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {



let cell = tableView.dequeueReusableCell(withIdentifier: FUIObjectTableViewCell.reuseIdentifier, for: indexPath) as! FUIObjectTableViewCell



switch (indexPath.section, indexPath.row) {

case (0, _) :



cell.headlineLabel.text = self.collections[indexPath.row].rawValue

cell.accessoryType = !self.isPresentedInSplitView ? .disclosureIndicator : .none

cell.isMomentarySelection = false

return cell

default:

cell.textLabel?.text = "Row Chart Floorplan"

return cell

}

}


 
To display two sections change the TableView function to the following functions:

// Return two sections now

override func numberOfSections(in _: UITableView) -> Int {

        return 2

override func tableView(_: UITableView, numberOfRowsInSection section: Int) -> Int {

switch section {

case 0:

return self.collections.count

case 1:

return 1

default:

return 2

}

}


After this, modify the TableView cell to display the Bar Chart when the ‘Row Chart Floorplan’ cell is selected:

 

 
override func tableView(_: UITableView, didSelectRowAt indexPath: IndexPath) {



let sectionIndex = indexPath.section

if (sectionIndex == 1) {

let vc = SalespersonAnalyticsViewController()

self.navigationController?.pushViewController(vc, animated: true)

}

else {

self.selectedIndex = indexPath

self.collectionSelected(at: indexPath)

}

}

Now build the project and run. It should display TableView as shown below:



Select the Row Chart Floorplan cell and now the resulting Bar chart will be displayed as given below:



 

In a similar way other Chart controls introduced in this release can be used to display business data in an app.

Check below resources for more information:

Help Documentation

What’s new in SAP Cloud Platform SDK for iOS 2.0 SP01

Latest changes in SAP Cloud Platform SDK for iOS Assistant and its generated apps

SAP Translation Integration – SAP Cloud Platform SDK for iOS 2.0

SAP API Business Hub Integration – SAP Cloud Platform SDK for iOS 2.0

From API to App: Assistant tool generates mobile app scaffolding from a Backend API

 

Krishna Sunkammurali,

Product Management, SAP Cloud Platform User Experience

SAP Labs, Palo Alto
6 Comments