Skip to main content
This guide takes you from a blank iOS project to a working ObjectItem component in under five minutes.
1

Add the package

In Xcode, choose File > Add Package Dependencies and enter the repository URL:
https://github.com/SAP/cloud-sdk-ios-fiori
Select the FioriSwiftUI product to import all three modules at once, or choose individual products (FioriSwiftUICore, FioriCharts, or FioriThemeManager) if you want to limit your binary size.
2

Register Fiori fonts

The SAP 72 typeface must be registered at launch. Open your AppDelegate.swift and call Font.registerFioriFonts() inside application(_:didFinishLaunchingWithOptions:).
import UIKit
import FioriThemeManager

@main
class AppDelegate: UIResponder, UIApplicationDelegate {
    func application(
        _ application: UIApplication,
        didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
    ) -> Bool {
        Font.registerFioriFonts()
        return true
    }
}
Skipping this step means Fiori components will render with the system font instead of SAP 72. The fonts support Dynamic Type automatically — no extra configuration is required.
3

Display your first component

ObjectItem is one of the most commonly used Fiori components. It supports two initialization styles: a ViewBuilder initializer for full layout control, and a type-based initializer for straightforward data binding.
import SwiftUI
import FioriSwiftUICore

struct ContentView: View {
    var body: some View {
        ObjectItem(title: {
            Text("Rouja Pakiman")
        }, description: {
            Text("Rouja has worked for the company for ten years and has all of the skills that would be necessary for developing quality applications. She is proficient in Java as well as CSS, Bootstrap, and Swift.")
        }, status: {
            Text("Available")
        }, detailImage: {
            Image("person_square4")
                .resizable()
                .frame(width: 45, height: 45)
                .clipShape(Circle())
        })
    }
}
The ViewBuilder initializer gives you full flexibility — any field can be any View. The type-based initializer binds directly to AttributedString, Image, and TextOrIcon values and applies default Fiori styles automatically.
4

Apply Fiori colors

Use Color.preferredColor(_:) to apply semantic Fiori colors anywhere in your views. Colors are dynamic and switch automatically between light and dark appearance.
import SwiftUI
import FioriThemeManager

struct StatusBadge: View {
    var body: some View {
        Text("Active")
            .foregroundStyle(Color.preferredColor(.positiveLabel))
            .padding(.horizontal, 8)
            .padding(.vertical, 4)
            .background(
                RoundedRectangle(cornerRadius: 4)
                    .fill(Color.preferredColor(.positiveBackground))
            )
    }
}
To pin the palette to a specific version or override individual color styles, configure ThemeManager.shared in application(_:didFinishLaunchingWithOptions:) alongside Font.registerFioriFonts():
ThemeManager.shared.setPaletteVersion(.v8)
ThemeManager.shared.setColor(.darkGray, for: .secondaryLabel, variant: .light)

​
Next steps

  • Read the Installation page for details on selecting individual products and configuring Package.swift.
  • Explore the component overview to see what else is available in FioriSwiftUICore.
  • See the theme manager overview to learn about font APIs, color styles, and palette versioning.

Build docs developers (and LLMs) love

Get started for freeTalk to us