FioriSwiftUICore provides a complete set of onboarding views that mirror the SAPFiori onboarding flow. You compose these screens into your own navigation stack and control transitions.
Onboarding flow sequence
WelcomeScreen
The entry point. Displays your app name, icon, and a call-to-action to begin activation. Optionally shows a demo-mode link and a legal agreement checkbox.
ActivationScreen
Prompts the user to enter the server URL or scan a QR code to configure the app endpoint.
EULAView
Presents the end-user licence agreement. The user must agree before proceeding.
UserConsentForm
Collects privacy-policy consent for individual data-usage categories.
InfoView
Displays informational content (for example, a feature tour) between onboarding steps.
Main app
After all consents are obtained the app transitions to its main interface.
WelcomeScreen
WelcomeScreen is the launch screen for onboarding. It shows the app name, a description, an icon, and a primary action button to start activation.
Key parameters
title
any View / AttributedString
required
The application name or welcome heading.
description
any View / AttributedString?
Brief instructions shown below the title.
Company logo displayed at the top centre of the screen.
Primary button (typically “Start”).
Secondary button (optional).
Binding for any text input field shown on the welcome screen.
state
WelcomeScreenState
default:".notConfigured"
.notConfigured shows configuration options; .isConfigured shows the Start button.
options
Set<WelcomeScreenOption>
default:"[]"
Configuration options available when state is .notConfigured (for example, manual URL entry or QR-code scanning).
When true, shows the “Want to explore?” / “Try the Demo” link.
When true, displays a legal-agreement checkbox. The primary action button is disabled until the user ticks it.
legalText
any View / AttributedString?
Text shown next to the legal-agreement checkbox.
Footer text (for example, terms-of-service link).
ViewBuilder usage
@State private var email = ""
WelcomeScreen(
title: {
Text("Field Service")
},
description: {
Text("Connect to your SAP system to get started.")
},
icon: {
Image("AppIcon")
},
headlineImage: {
Image("SAPLogo")
},
action: {
FioriButton { _ in
startActivation()
} label: { _ in
Text("Start")
}
},
inputText: $email,
state: .notConfigured,
isDemoAvailable: true
)
Type-based usage
@State private var serverURL = ""
WelcomeScreen(
title: "Field Service",
description: "Connect to your SAP system to get started.",
icon: Image("AppIcon"),
action: FioriButton(title: "Start") { _ in startActivation() },
inputText: $serverURL,
isLegalAgreementRequired: true,
legalText: "I agree to the Terms of Service.",
isDemoAvailable: false,
state: .notConfigured
)
UserConsentForm
UserConsentForm presents a list of consent pages, each describing a data-usage category. The user accepts or declines each category independently.
UserConsentForm(
isPresented: $showConsent,
userConsentPages: [
UserConsentPage(
title: "Location data",
bodyText: "We use your location to show you nearby service orders.",
isRequired: true
),
UserConsentPage(
title: "Crash reports",
bodyText: "Send anonymised crash reports to help us improve the app.",
isRequired: false
)
],
didAllow: { allowedPages in
saveConsentChoices(allowedPages)
navigateToNextStep()
},
didDeny: { deniedPages, isAllRequired in
if isAllRequired {
// Required consent denied — cannot proceed
showRequiredConsentAlert = true
}
}
)
EULAView
EULAView displays the end-user licence agreement text with Agree and Disagree buttons.
EULAView(
title: "End User Licence Agreement",
bodyAttributedText: eulaAttributedString,
didAgree: {
eulaAccepted = true
navigateToConsent()
},
didDisagree: {
// User declined — handle appropriately
exitOnboarding()
}
)
InfoView
InfoView presents an illustrated informational page between onboarding steps. Use it to highlight a feature or explain what the next step involves.
InfoView(
title: "Stay connected in the field",
descriptionText: "Your work orders sync automatically whenever a network connection is available.",
actionText: "Continue",
action: {
navigateToNextStep()
}
)
OnboardingScanView
OnboardingScanView provides a camera-based QR-code or barcode scanner used during activation to read server configuration.
OnboardingScanView(
title: "Scan QR code",
instructionText: "Point your camera at the QR code provided by your administrator.",
didScan: { result in
serverURL = result
navigateToActivation()
}
)
Keep the onboarding flow linear. Use NavigationStack with programmatic navigation so the user cannot go back past the EULA acceptance step once they have agreed.