Styling Fiori iOS Components Using NUI and SwiftUI

[ganesh_dhumale]

Table of Contents

Introduction
Prerequisites
Let's Start
Integrate FUIFilterFormCell with SwiftUI
Integrate NUI
Result

Introduction

SAP has provided multiple components called SAP Fiori for iOS. We can easily customize these compnents using the API's provided by the SAPFiori SDK.

But in a few scenarios, there are no default API's available to customize these controls.

In this blog post, I will explain how to use FUIFilterFormCell with SwiftUI and customize it using a CSS-like stylesheet with .nss.

Prerequisites

• XCode 11 and above (For this demo I have used XCode 11.5)


• SAP iOS SDK Frameworks

Let's Start

 

Integrate FUIFilterFormCell with SwiftUI

 

Create a new SwiftUI project called NSSStyleDemo. (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 FilterTableView.swift.

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

import SwiftUI

import SAPFiori



struct FilterTableView {

    

    // MARK: - Properties

    

    typealias UIViewType = UITableView

    let tableView = UITableView(frame: .zero, style: .plain)

    

}



// MARK: - UIViewRepresentable



extension FilterTableView: UIViewRepresentable {

    

    func makeUIView(context: Context) -> UITableView {

        setupDatasourceDelegate(context)

        setupTable()

        

        return tableView

    }

    

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

    

    func makeCoordinator() -> FilterTableViewCoordinator {

        FilterTableViewCoordinator(self)

    }

    

}



// MARK: - Private



private extension FilterTableView {

    

    func setupTable() {

        tableView.estimatedRowHeight = 80

        tableView.rowHeight = UITableView.automaticDimension

        tableView.register(FUIFilterFormCell.self, forCellReuseIdentifier: FUIFilterFormCell.reuseIdentifier)

        tableView.separatorStyle = .none

    }

    

    func setupDatasourceDelegate(_ context: Context) {

        tableView.dataSource = context.coordinator

        tableView.delegate = context.coordinator

    }

    

}



// MARK: - Coordinator



class FilterTableViewCoordinator: NSObject {

    

    // MARK: - Properties

    

    var parent: FilterTableView

    var selectedValues = [1]

    

    // MARK: - Initialization

    

    init(_ parent: FilterTableView) {

        self.parent = parent

    }

    

}



// MARK: - UITableViewDataSource, UITableViewDelegate



extension FilterTableViewCoordinator: UITableViewDataSource, UITableViewDelegate {

    

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

        return 1 // return number of rows of data source

    }

    

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

        let filterFormCell = tableView.dequeueReusableCell(withIdentifier: FUIFilterFormCell.reuseIdentifier, for: indexPath) as! FUIFilterFormCell

        filterFormCell.valueOptions = ["Option 1", "Option 2", "Option 3", "Option 4"]

        filterFormCell.keyName = "Filter Options"

        filterFormCell.allowsMultipleSelection = true

        filterFormCell.value = selectedValues

        filterFormCell.allowsEmptySelection = true

    

        filterFormCell.onChangeHandler = { newValue in

            self.selectedValues = newValue

            filterFormCell.setSelected(true, animated: true)

        }

        return filterFormCell

    }

    

}

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 the component 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 {

            FilterTableView()

                .navigationBarTitle("NSS Stylesheet Demo", displayMode: .inline)

        }

        .navigationViewStyle(StackNavigationViewStyle())

    }

    

}



struct ContentView_Previews: PreviewProvider {

    static var previews: some View {

        ContentView()

    }

}

 

Now if you run the app it will use the default blue theme and it will look like below.

Integrate NUI

 

We can change the FUIFilterFormCell tint color by using SAPFiori SDK API as below.

filterFormCell.setTintColor(UIColor.orange, for: .normal)

But this API is no longer supported and XCode will prompt the below warning.

'setTintColor(_:for:)' is deprecated: No longer supported. 

SAPFiori provides an embedded NUI library for the styling of UI controls, using a CSS-like stylesheet with .nss file and using Theming Supported style classes. 

Let's add the new empty file with a .nss extension. E.g. Theme.nss

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

fdlFUIFilterFormCell_item_titleLabel {

    font-color: #BB0000;

}



fdlFUIFilterFormCell_item_titleLabel_selected {

    font-color: #2B7D2B;

}

 

Copy-paste the below code in didFinishLaunchingWithOptions in AppDelegate.swift file.

func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {

    NUISettings.initWithStylesheet(name: "Theme")

    return true

}

We are done.

Result

With this blog post, you have learned,

• Integration of FUIFilterFormCell with SwiftUI


• Customize the component with .nss stylesheet.

 

Hope this helps!

Your thoughts matter! ?

GD