For this demo, we will require the following SAP frameworks.
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
- XCode 11 and above (For this demo I have used XCode 11.5)
- SAP iOS SDK Frameworks
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. ?)
- 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
- SAP Managed Tags:
5 Comments
