SAP Fiori for iOS – How to implement the “Preview Table View” pattern

The SAP Fiori for iOS design guidelines has many patterns. One of them is called the “Preview Table View”. This pattern is just a sample table view enclose inside a header & footer section.

I build a sample app where I implemented this “Preview Table View” pattern.

The app list all iPhone models, the starting page show the new iPhone models of this year, this is our preview table view.

If you select All on the footer section then it navigate to another table view listing all of the iPhone models.

For this app, you only need to use the SAPFiori & SAPCommon frameworks, the data model is a property list and all the assets are already in the app bundle.

How to run the app on your simulator

Step 1: – Clone the App at my GitHub account

Step 2: – Download SAP Fiori for iOS SDK here

You could use any version >= 3.2.7

Step 3: – Extract frameworks from the iOS Assistant

open the SAP Cloud Platform SDK for iOS Assistant and choose Export Frameworks from the first menu

Step 4: – Add the SAPFiori framework to the project

We will need the to add the SAPFiori and SAPCommon frameworks to the project,

make sure you add the frameworks from the Release-fat directory.

Usually, I like to copy/paste the 2 frameworks inside the app directory in finder and then inside Xcode, you click the app target and under Frameworks, Librairies and Embedded Content you select the 2 files, you can also do it by drag & drop but make sure the files are copied inside.

link the frameworks inside Xcode

Step 5: – Build & Run

the first screen is our Preview Table View, right now you can’t click on the table view row since I did not create any detail view yet

if you click on the table view footer section, you will now see the list of all models

How it works:

To create the preview table view, you need any kind of table view cell for you cell content, in my app I used the FUIObjectTableViewCell. And you need the FUITableViewHeaderFooterView for the header and footer.

    // MARK: UITableViewDelegate
    override func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
        let view = tableView.dequeueReusableHeaderFooterView(withIdentifier: FUITableViewHeaderFooterView.reuseIdentifier) as! FUITableViewHeaderFooterView

        viewModel.configureView(view, forHeaderInSection: section)
        
        return view
    }
    
    override func tableView(_ tableView: UITableView, viewForFooterInSection section: Int) -> UIView? {
        let view = tableView.dequeueReusableHeaderFooterView(withIdentifier: FUITableViewHeaderFooterView.reuseIdentifier) as! FUITableViewHeaderFooterView

        viewModel.configureView(view, forFooterInSection: section)
        
        view.didSelectHandler = {
            self.performSegue(withIdentifier: "DisplayPhoneList", sender: self)
        }
        
        return view
    }

if you click on the footer section, we trigger a segue to display the full list.

Also super important, inside the storyboard, always make sure you set your table view row and sections to Automatic when using SAPFiori classes. You could always do that in code, inside ViewDidLoad but it’s cleaner to do it in the storyboard.

More to come, in some future blogs I will make this app evolves and show you how to:

add a search bar,

create a filter form we many filter criteria

create a detail page when you select a row

Alex