Skip to Content

Change the Generated UI to Make the App Your Own

Use Xcode to change the generated UI and add your own views to the app.
You will learn
KevinMuessigKevin MuessigJanuary 12, 2022
Created by
September 7, 2019


  • Development environment: Apple Mac running macOS Catalina or higher with Xcode 12 or higher
  • SAP BTP SDK for iOS: Version 6.0 or newer
  • How to change the Assistant generated UI with your own using Xcode and storyboards
  • Step 1

    The Human Interface Guidelines for SAP Fiori for iOS has certain screens defined that you can use as guidance on how you could structure a business app.

    Usually a business application has some sort of overview screen giving the user an entry point to key information he or she might need to do their daily work. From there, the user can navigate into more detailed information or more concrete workflows.

    If you’re interested in the HIG of SAP for SAP Fiori for iOS, visit: SAP Fiori for iOS Design Guidelines

    In the last tutorial, you’ve learned how to create an Xcode project using the SAP BTP SDK Assistant for iOS. The result of the generation process of the Assistant can be a split view screen if chosen. In this tutorial you will change the generated UI to make your own.

    1. First, open your Xcode project if not opened already and select the Main.storyboard, this will open the Main.storyboard in the Interface Builder of Xcode.

      The Interface Builder allows you to create complete app flows including the UI for each screen of those flows.

      Xcode Main Storyboard

      For now go ahead and select all displayed View Controllers in the Main.storyboard and simply delete them.

      Xcode Main Storyboard
    2. Next, click the Object Library and search for Table View Controller. Drag and drop the object on the canvas of the Interface Builder.

      Xcode Main Storyboard
    3. Thinking ahead, you know that you want to have navigation to various screens from the overview screen. Using a Navigation Controller and embedding the just-created View Controller in it allows us to use the power of the Navigation Controller for navigation. The Navigation Controller handles the navigation stack for you, which is exactly what you want.

      Select the added View Controller and click Editor > Embed In > Navigation Controller. This will embed your View Controller in a Navigation Controller. You should see the Navigation Bar appear in the View Controller.

      Xcode Main Storyboard
      Xcode Main Storyboard
    4. Almost every View Controller you’re adding to the storyboard needs a Cocoa Touch Class representing the logic implementation of that View Controller.

      Control + click your project source in the Project Navigator on the left-hand side and select New File.

      Xcode Overview Class
    5. Select the Cocoa Touch Class in the upcoming modal sheet, and click Next.

      Xcode Overview Class

      Make sure that your class is going to subclass of UITableViewController and change the name to OverviewTableViewController. Click Next and then Create.

      Xcode Overview Class

      Great! You’ve created your first Table View Controller Swift class, now you have to set this class as Custom Class in the Main.storyboard View Controller.

    6. Open the storyboard and select the created View Controller. On the right side, you can see the side bar. Click the Identity Inspector to set the custom class to OverviewTableViewController and hit return on your keyboard.

      Xcode Overview Class

      Notice the title of the Table View Controller on the left side changes accordingly to the entered custom class.

    7. Lastly you have to make the Navigation Controller an initial View Controller. Doing this will allow us to instantiate an initial View Controller from Storyboard and tells the system the main entry point for that specific Storyboard.

      Select the Navigation Controller and open the Attributes Inspector to check the box next to Is Initial View Controller.

      Xcode Overview Class
    Log in to complete tutorial
  • Step 2

    In order to display the newly added overview screen right after the onboarding process is finished, you have to make some manual changes in the ApplicationUIManager.swift class. This class is mainly responsible for coordinating the UI flow for user onboarding all the way to the first screen after the onboarding process.

    1. Open the ApplicationUIManager.swift class using the Project Navigator and look for the showApplicationScreen(completionHandler:) method.

      Hint: You can use the Open Quickly feature of Xcode to search for the ApplicationUIManager class with Command + Shift + O. Once you’ve opened the file, you can quickly jump to the showApplicationScreen(completionHandler:) function by using the jump bar at the top of the editor area pane.

      Application UI Manager

      In the method you see an if-else statement initializing a Split View Controller, which is non-existing anymore because you have your Overview Table View Controller.

      For all upcoming tutorials and code snippets, you will find inline comments used to help you understand what the code is actually doing. Read the inline comments carefully!

    2. Change the method code to the following:

      func showApplicationScreen(completionHandler: @escaping (Error?) -> Void) {
          // Check if an application screen has already been presented
          guard isSplashPresented else {
          // set rootViewController only once ie after onboarding when app screen is about to be shown
          // for restore, remove covering views previously added
          let appViewController: UIViewController
          if isOnboarding {
              let overviewTVC = UIStoryboard(name: "Main", bundle: Bundle.main).instantiateInitialViewController() as! UINavigationController
              appViewController = overviewTVC
              isOnboarding = false
              // maintain this boolean since no splash screen is present now
              isSplashPresented = false
              window.rootViewController = appViewController
          } else {

    Great you did all necessary steps to replace the generated UI with your own. Go ahead and run the app on iPhone 12 Pro or any other simulator to see the result.

    In case you haven’t onboarded yet, go through the onboarding process before seeing your Overview Screen appear.

    Overview Screen Basic

    In which class do you have to change code in order to make your new initial view controller visible when running your app?
    Please select the correct answer.

    Log in to complete tutorial
Back to top