Integrate SAP Fiori iOS Components with SwiftUI

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. ?)

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