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: 
ganesh_dhumale
Explorer
1,474

Table of Contents


Introduction
SwiftUI
Benefits
Drawbacks
Prerequisites
Let's Start
Steps
Note
Result

Introduction


SAP has provided a very useful and powerful component called SAP Fiori for iOS to integrate with iOS.

At the moment there are not many resources available to showcase how we can use iOS Fiori components with SwiftUI.

So, in this blog post, I will explain the steps to integrate iOS Fiori components with SwiftUI.

SwiftUI


SwiftUI is a completely new approach to building user interfaces for multiple Apple platforms. It was introduced in June 2019 and the current version is SwiftUI 2.0, in which Apple has included a few new features. In SwiftUI, with less code, we can build very beautiful apps in less time. SwiftUI is used in a declarative fashion.

A great resource to learn and use as a starting point is Apple’s official tutorials for SwiftUI. They’ll guide you through the basic concepts, as well as help you write SwiftUI views.

Benefits



  • It's easy to read, learn, and the code is simple and clean.

  • We can mix UIKit with SwiftUI.

  • Theme managing (dark mode, light mode) is very easy.

  • It gives a Live Preview feature which makes the development much faster and smoother.

  • It no longer needs Interface Builder -- it uses the Canvas (interactive interface editor) concept.

  • No more AutoLayout problems. Instead, it provides HStack, VStack, ZStack, Groups, Lists, and more.


Drawbacks



  • It supports only iOS 13 above.

  • It’s a new language, so it's still undergoing enhancements.


Prerequisites



Let's Start!


This demo showcased will show the usage of the below Fiori components:

  • FUIObjectTableViewCell

  • FUIProfileHeader


Let's jump into the integration part. 🙂

Steps


Create a new SwiftUI project called FioriDemo. (You can give any project name as you wish. ?)

For this demo, we will require the following SAP frameworks.




  • SAPFoundation.xcframework

  • SAPFiori.xcframework

  • SAPCommon.xcframework


Create a new SwiftUI file ObjectTableView.swift.


Once the file has been created, copy-paste the below code.
import SwiftUI
import SAPFiori

struct ObjectTableView {

// MARK: - Properties

typealias UIViewType = UITableView
let tableView = UITableView(frame: .zero, style: .grouped)
let objectCellId = "TableCellIdentifier"

}

// MARK: - UIViewRepresentable

extension ObjectTableView: UIViewRepresentable {

func makeUIView(context: Context) -> UITableView {
setupDatasourceDelegate(context)
setupTable()

return tableView
}

func updateUIView(_ uiView: UITableView, context: Context) { }

func makeCoordinator() -> ObjectTableViewCoordinator {
ObjectTableViewCoordinator(self)
}

}

// MARK: - Private

private extension ObjectTableView {

func setupTable() {
tableView.estimatedRowHeight = 80
tableView.rowHeight = UITableView.automaticDimension
tableView.register(FUIObjectTableViewCell.self, forCellReuseIdentifier: objectCellId)

tableView.tableHeaderView = profileHeader
}

func setupDatasourceDelegate(_ context: Context) {
tableView.dataSource = context.coordinator
tableView.delegate = context.coordinator
}

var profileHeader: FUIProfileHeader {
let profileHeader = FUIProfileHeader()

profileHeader.imageView.image = UIImage(named: "User") // Replace image
profileHeader.headlineText = "Headline"
profileHeader.subheadlineText = "Subheadline"
profileHeader.descriptionText = "SAP Fiori iOS component integration with SwiftUI."

let activityControl = FUIActivityControl()
activityControl.addActivities([.phone, .message, .email])
activityControl.activityItems[.phone]?.tintColor = UIColor.preferredFioriColor(forStyle: .primary6)
activityControl.activityItems[.message]?.tintColor = UIColor.preferredFioriColor(forStyle: .primary6)
activityControl.activityItems[.email]?.tintColor = UIColor.preferredFioriColor(forStyle: .primary6)
profileHeader.detailContentView = activityControl

return profileHeader
}

}

// MARK: - Coordinator

class ObjectTableViewCoordinator: NSObject {

// MARK: - Properties

var parent: ObjectTableView

// MARK: - Initialization

init(_ parent: ObjectTableView) {
self.parent = parent
}

}

// MARK: - UITableViewDataSource, UITableViewDelegate

extension ObjectTableViewCoordinator: UITableViewDataSource, UITableViewDelegate {

func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return 5
}

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let objectCell = tableView.dequeueReusableCell(withIdentifier: parent.objectCellId,
for: indexPath as IndexPath) as! FUIObjectTableViewCell
objectCell.headlineText = "Headline Text"
objectCell.subheadlineText = "Subheadline Text"
objectCell.footnoteText = "Footer Note Text"
objectCell.descriptionText = "SAP Fiori iOS component integration with SwiftUI."
objectCell.detailImage = UIImage(named: "SwiftUI") // Replace it with your image
objectCell.substatusText = "In Stock"
objectCell.substatusLabel.textColor = .preferredFioriColor(forStyle: .positive)
objectCell.accessoryType = .disclosureIndicator
objectCell.splitPercent = CGFloat(0.3)

return objectCell
}

}

In the above, we have used UIViewRepresentable which is a wrapper for a UIKit view -- allowing you to integrate that UIView into your SwiftUI view hierarchy. Also, we have used Coordinator to coordinate with the view.

Now it’s time to render these components to the UI. Just copy-paste the below code and you are done!
import SwiftUI

struct ContentView: View {

// MARK: - Body

var body: some View {
NavigationView {
ObjectTableView()
.navigationBarTitle("Swift UI Fiori Demo", displayMode: .inline)
}
.navigationViewStyle(StackNavigationViewStyle())
}

}

struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}

Note


Before running the app please make sure you change the Embed property under General -> Frameworks, Libraries, and Embedded Content to Embed & Sign as shown below.


Result




iPad


With this blog post, you have learned,

  • Integration of SAP Fiori iOS component with SwiftUI

  • SwiftUI usage


Hope this helps!

 

Your thoughts matter! ?

GD
5 Comments