Structures

WAMenu represents a single menu in the writing assistant feature.

WAError represents an error in the writing assistant feature, providing details about the error and potential actions which will be used in IllustratedMessage.

PhotosPicker menu item

FilesPicker menu item

Camera menu item

Camera menu item

Undocumented

Undocumented

View modifier to apply attachment operations to operation button, i.e. + button

View modifier to apply menu items to a anchor view

View modifier to apply menu items as an overlay to an anchor view

The configuration for creating an alert view.

Undocumented

Undocumented

‘TimelinePreviewItem’ is an item specialized for placement in TimelinePreview.

Column attribute.

Date item for DataTable

Duration item for DataTable

An image item for DataTable

List item for DataTable

A Data Table is a View that is used for displaying data in either list view or grid table view. It supports cell types of DataImageItem, DataTextItem, DataDateItem, DataTimeItem, DataDurationItem and DataListItem.

Code usage:

let model = TableModel(headerData: header, rowData: res, isFirstRowSticky: true, isFirstColumnSticky: true, showListView: false)
model.columnAttributes = ...
model.didSelectRowAt = { rowIndex in
   print("Tapped row \(rowIndex)")
}
model.selectedIndexes = [2, 3]

/// set a closure to check whether a dataItem located at (rowIndex, columnIndex) is valid; If it is valid, returns (true, nil); if it is not valid, returns false and an error message which is shown to users.
model.validateDataItem = { rowIndex, columnIndex, dataItem in
...
}

/// set a closure to provide a `DataListItem` type dataItem located at (rowIndex, columnIndex) for an array of Strings and a title for inline editing mode
model.listItemDataAndTitle = { rowIndex, columnIndex in
...
}

/// set a closure to observe a value change for inline editing mode
model.valueDidChange = { change in
    print("valueDidChange: \(change.description)")
}

DataTable(model: model)

Text item for DataTable

Time item for DataTable

DataTable change for inline editing

Data structure for each row in the DataTable

Button for accessory item.

The FioriSlider is a SwiftUI component that provides both a standard slider and a range slider. The standard slider allows users to select a single value, while the range slider allows users to select a range of values with two thumbs.

Usage

Standard Slider:

A standard slider consists of a title, a bound value, and a “thumb” (an image that users can drag along a linear “track”. The track represents a continuum between two extremes: a minimum and a maximum value. By default, the formatted minimum value is displayed at the leading end of the slider, and the formatted maximum value is displayed at the trailing end of the slider.

The title is displayed at the top left of the component, while the bound value is displayed at the top right. As users move the thumb, the slider continuously updates its bound value to reflect the thumb’s position.

The following example illustrates a standard slider bound to the value speed. The slider uses the default range of 0 to 100, with a default step of 1. The minimum value of the range is displayed as the leading accessory view label, while the maximum value is shown as the trailing accessory view label. As the slider updates the speed value, the updated value is displayed in a label at the top right of the slider.

 @State private var speed: Double = 20

 FioriSlider(
     title: "Speed Limit",
     value: $speed,
     description: "Simple standard slider"
 )

You can also use the range parameter to specify the value range of the slider. The step parameter allows you to define incremental steps along the slider’s path. The decimalPlaces parameter can be used to manage the decimal places of the slider’s value. To format the bound value for display, use the valueFormat parameter. The leadingValueFormat parameter customizes the leading value label, which displays the minimum value of the range. Similarly, the trailingValueFormat parameter customizes the trailing value label, which displays the maximum value of the range. Additionally, you can use the showsValueLabel, showsLeadingAccessory, and showsTrailingAccessory parameters to control the display of the related labels. The onValueChange closure passed to the slider provides callbacks when the user drags the slider.

 @State private var speed: Double = 20

 FioriSlider(
     title: "Speed Limit",
     value: $speed,
     range: 10...200,
     step: 2.5,
     decimalPlaces: 1,
     description: "Simple standard slider",
     valueLabelFormat: "%.1f KM",
     leadingLabelFormat: "%.1f KM",
     trailingLabelFormat: "%.1f KM",
     onValueChange: { isEditing, newSpeed in
        if !isEditing {
            print("The speed was changed to: " + String(format: "%.1f", value))
        }
     }
 )

The example above illustrates a standard slider with a range of 10 to 200 and a step increment of 2.5. Therefore, the slider’s increments would be 10, 12.5, 15, and so on. At the same time, the minimum value of the range is formatted and displayed as 10.0 KM. Similarly, the maximum value of the range is formatted and displayed as 200.0 KM. The updated value can be received within the onValueChange closure callback when the user drags the slider.

The slider also uses the step to increase or decrease the value when a VoiceOver user adjusts the slider with voice commands.

The FioriSlider supports a modifier called accessibilityAdjustments, which allows you to adjust the accessibility settings for a standard slider according to the Fiori Slider guidelines.

Range Slider:

A range slider consists of a title, a bound lower value, a bound upper value, and two “thumbs” (images that users can drag along a linear “track”). The track represents a continuum between two extremes: a minimum and a maximum value. By default, the formatted lower value is displayed in a text field at the leading end of the slider, and the formatted upper value is displayed in a text field at the trailing end of the slider. The title is displayed at the top left of the component. As users edit the lower or upper value in the text fields or move the thumbs, the slider continuously updates the bound values to reflect the thumbs’ positions.

A single editable range slider is also supported. In this case, only the formatted upper value is displayed in a text field at the trailing end of the slider.

The following example illustrates an editable range slider bound to the lower value lowerValue and the upper value upperValue. The range slider uses the default range of 0 to 100, with a default step of 1. By default, the lower value is displayed in a text field as the leading accessory view, while the upper value is shown in a text field as the trailing accessory view. Both the lower thumb and upper thumb are clearly displayed on the slider track. You can edit these values in the text fields to change the lower and upper values. Alternatively, you can drag the lower thumb to adjust the lower value and drag the upper thumb to change the upper value. The range slider does not display the value label at the top right of the slider by default.

 @State private var lowerValue: Double = 20
 @State private var upperValue: Double = 40

 FioriSlider(
     title: "Editable Range Slider",
     lowerValue: $lowerValue,
     upperValue: $upperValue,
     description: "Simple editable range slider"
 )

The following example illustrates a single editable range slider bound to the upper value upperValue. The range slider uses the default range of 0 to 100, with a default step of 1. By default, only the upper value is shown in a text field as the trailing accessory view and one thumb displayed on the slider track. You can edit value in the text fields to change the upper values or drag the thumb to adjust the upper value. The single range slider does not display the value label at the top right of the slider by default.

 @State private var upperValue: Double = 40

 FioriSlider(
     title: "Single Editable Range Slider",
     upperValue: $upperValue,
     description: "Simple Single Editable range slider"
 )

Similar with standard slider, the range slider also allow you use the range parameter to specify the value range of the slider. The step parameter allows you to define incremental steps along the slider’s path. The decimalPlaces parameter can be used to manage the decimal places of the slider’s value. By default, the range slider does not display the value label. However, you can specify what you want to display in the valueLabel parameter to show the value label at the top right of the slider. The showsLeadingAccessory and showsTrailingAccessory parameters control the display of the leading accessory view and trailing accessory view, respectively. By default, the editable range slider uses a text field as the leading or trailing accessory view. However, you can specify your own view in the leadingAccessory or trailingAccessory parameters to override the default text field. The showsLeadingAccessory and showsTrailingAccessory parameters can be used to control the display of the respective accessory views. The onRangeValueChange closure passed to the slider provides callbacks when the user drags the slider. The onValueChange closure passed to the single editable slider provides callbacks when the user drags the slider.

 @State private var lowerValue: Double = 20
 @State private var upperValue: Double = 40

 FioriSlider(
     title: "Editable Range Slider",
     lowerValue: $lowerValue,
     upperValue: $upperValue,
     range: 10...200,
     step: 2.5,
     decimalPlaces: 1,
     description: "Simple editable range slider",
     onRangeValueChange: { isEditing, lowerValue, upperValue in
        if !isEditing {
            print("Range Slider value was: " + String(format: "%.1f", lowerValue) + " - " + String(format: "%.1f", upperValue))
        }
     }
 )

The slider also uses the step to increase or decrease the value when a VoiceOver user adjusts the slider with voice commands.

The FioriSliderTextFieldStyle structure is used to customize the appearance of the text field in a Fiori Slider. It allows for the configuration of various properties such as border colors, widths, corner radius, font, and foreground colors. Consumers can create their own instances of FioriSliderTextFieldStyle to apply custom styles to the slider text field.

RatingControl uses images to represent a rating.

The number of “On” images denotes the rating. The default “On” image is a filled star while the default “Off” inmage is an unfilled star.

FilterFeedbackBar ResetButton Configuration

FilterFeedbackBar slider item value change handler

A struct for stylings in the DimensionSelector

A DimensionSelector object is a horizontal control made of multiple segments, each segment functioning as a discrete button. Selection is mutually exclusive.

## Code usage:

 let titles = ["intraday: 1min", "one day: 1min", "1year:1day", "3years:1week"]
 var dimensionSelector: DimensionSelector!
 var cancellableSet: Set<AnyCancellable> = []

 dimensionSelector = DimensionSelector(segmentTitles: segmentTitltes, selectedIndex: stockModel.indexOfStockSeries)
 dimensionSelector.selectionDidChangePublisher
     .store(in: &cancellableSet)

Undocumented

Undocumented

Undocumented

Undocumented

A control which is able to display different views depending on current tap state and responds to action.

Create a Fiori button by providing an action and different labels depending on states.

FioriButton(action: { state in
    print("Button tapped with state: \(state)")
},
label: { state in
    switch state {
    case .normal:
        Text("Normal")
    case .highlighted:
        HStack {
            Image(systemName: "checkmark")
            Text("Highlighted")
        }
    case .selected:
        HStack {
            Image(systemName: "checkmark")
            Text("Selected")
        }
    default:
        Text("Disabled")
    }
})

Create a Fiori button with title text.

FioriButton { _ in "Start" }

Style customization

Create a style that conforms to FioriButtonStyle. There are three predefined Fiori button styles: FioriPrimaryButtonStyle, FioriSecondaryButtonStyle, and FioriTertiaryButtonStyle. To set the style to a FioriButton or to a container within which all Fiori buttons should share the same style, use the fioriButtonStyle(_:) modifier.

struct CustomFioriButtonStyle: FioriButtonStyle {
    func makeBody(configuration: FioriButtonStyle.Configuration) -> some View {
        let color: Color
        switch configuration.state {
        case .normal:
            color = Color.preferredColor(.tintColor)
        case .highlighted, .selected:
            color = .red
        default:
            color = Color.preferredColor(.primary3)
        }

        return configuration.label
            .foregroundColor(.white)
            .padding(50)
            .background(Circle().fill(color))
    }
}

To apply these styles to a Button, use PrimaryButtonStyle, SecondaryButtonStyle, and TertiaryButtonStyle instead.

The properties of a Fiori button.

A Fiori button style for the plain button.

A Fiori button style for the primary button.

A Fiori button style for the secondary button.

A Fiori button style for the tertiary button.

A Fiori button style for the navigation bar action.

A type-erased Fiori button style.

An object that provides Fiori style color and interaction for Button.

An object that provides Fiori primary button style for Button.

An object that provides the Fiori secondary button style for Button.

An object that provides the Fiori tertiary button style for Button.

Undocumented

Undocumented

Undocumented

Undocumented

Undocumented

Undocumented

Undocumented

Undocumented

Undocumented

Undocumented

Undocumented

Undocumented

Undocumented

Undocumented

Undocumented

Undocumented

Undocumented

This _ScribbleView is to capture user drawings.

Undocumented

Undocumented

Undocumented

Undocumented

Undocumented

Undocumented

Data types for ControlState. Equivalent to UIControl.State.

The key for storing max number of items value in the environment.

The key for storing whether the component is in a Menu in the environment. Default value is false.

Flow Layout

SingleView

Conditional single view

Pair view

Masonry Layout

Undocumented

A container view that applies a skeleton loading style to its content when isLoading is true. It can also apply a tint color to the skeleton effect if ///

Inline view modifier

Represents errors that can occur during scanner operations.

Configuration structure for displaying a “card” or message on an IPCMobile scanner’s screen.

A SwiftUI UIViewControllerRepresentable that wraps a VisionKitScanner to display a VisionKit barcode scanner.

VisionKitScannerRepresentable integrates with BarcodeScannerManager to present a DataScannerViewController for barcode scanning on iOS devices (excluding Mac Catalyst). It handles the scanner’s lifecycle, including permission checks, torch state synchronization, and control button visibility (cancel and flash buttons). If the scanner is unavailable (e.g., on Mac Catalyst or due to permission issues), it displays a placeholder view with a “Scanner Unavailable” message.

Usage

Initialize with a BarcodeScannerManager instance, a binding for torch state, and a cancel callback:

@State private var isTorchOn = false
@StateObject private var scannerManager = BarcodeScannerManager(
    recognizedDataTypes: [.barcode(symbologies: [.qr, .ean13])],
    recognizesMultipleItems: false
)

var body: some View {
    VisionKitScannerRepresentable(
        scannerManager: scannerManager,
        isTorchOn: $isTorchOn,
        onCancelTapped: {
            scannerManager.stopMonitoring()
        },
        showCancelButton: true,
        showFlashButton: true
    )
    .ignoresSafeArea()
}

• Ensure scannerManager is configured with BarcodeDataType for barcode types.
• The isTorchOn binding syncs with the scanner’s torch state.
• The onCancelTapped closure is called when the cancel button (if shown) is tapped.

Requirements

• iOS 15.0+.
• Vision framework for VNBarcodeSymbology if specifying barcode symbologies.
• BarcodeScannerManager and VisionKitScanner.
• Camera permissions must be granted for scanning to work.

Carousel is a container view that arranges its child views horizontally, one after the other, with a portion of the next child view visible in the container. It allows users to swipe or scroll through the child views to see different piece of content.

Carousel with numberOfColumns:

Carousel(numberOfColumns: 2, spacing: 8, alignment: .top, isSnapping: true) {
    ForEach(0..<16, id: \.self) { i in
        Text("Long long long Text \(i)")
            .font(.title)
            .padding()
            .background(Color.gray)
    }
}
.padding(8)
.border(Color.gray)

Carousel with fixed item width:

Carousel(itemWidth: 320, spacing: 8, alignment: .top, isSnapping: true) {
    ForEach(0..<16, id: \.self) { i in
       Text("Long long long long Text \(i)")
            .font(.title)
            .padding()
            .background(Color.gray)
    }
}
.padding(8)
.border(Color.gray)

To display a specific view as the initial visible item in the Carousel, use ScrollViewReader to programmatically scroll to the view identified by a unique id.

ScrollViewReader { proxy in
    Carousel(numberOfColumns: 2, spacing: 8, alignment: .top, isSnapping: true) {
        ForEach(0..<16, id: \.self) { i in
            Text("Long long long Text \(i)")
                .font(.title)
                .padding()
                .frame(height: 100)
                .background(Color.gray)
                .id(i) // set id for each view
        }
    }
    .onAppear {
        DispatchQueue.main.async {
            proxy.scrollTo(0, anchor: layoutDirection == .rightToLeft ? .trailing : .leading) // scroll to the view with your desisred id
        }
    }
}
.padding(8)
.border(Color.gray)

Undocumented

Undocumented

Undocumented

A SwiftUI view that presents the VisionKit document scanner Note that VisionKit doesn’t currently provide a public API to customize the scan view’s appearance or behavior.

Single

Undocumented

Undocumented

Undocumented

KPIItem enables a developer to present “KPI” information in a formatted manner consistent with the Fiori Design Language.

Usage

struct KPISubItemModelImplementation: KPISubItemModel {
    let id: UUID
    let kPISubItemValue: TextOrIcon
    let kPISubItemType: KPISubitemType

    init(id: UUID = UUID(), kPISubItemValue: TextOrIcon, kPISubItemType: KPISubitemType) {
        self.id = id
        self.kPISubItemValue = kPISubItemValue
        self.kPISubItemType = kPISubItemType
    }
}

private var item: [KPISubItemModelImplementation] = [
    KPISubItemModelImplementation(kPISubItemValue: .icon(Image(systemName: "triangleshape.fill")), kPISubItemType: KPISubitemType.icon),
    KPISubItemModelImplementation(kPISubItemValue: .text("123"), kPISubItemType: KPISubitemType.metric),
    KPISubItemModelImplementation(kPISubItemValue: .text("USD"), kPISubItemType: KPISubitemType.unit)
]

KPIItem(kpiCaption: "abc", items: item, proposedViewSize: .small, alignment: .leading)

KPIProgressItem enables a developer to present “KPI” information in a formatted manner consistent with the Fiori Design Language

Usage

let percentData = KPIItemData.percent(0.65)
let fractionData = KPIItemData.fraction(76, 90, numberFormatterProvider.numberFormatter)

KPIProgressItem(kpiCaption: "Completed", data: .constant(percentData))
KPIProgressItem(kpiCaption: "In progress", data: .constant(fractionData), chartSize: .small)

Undocumented

A view that arranges its children in a multiple horizontal lines.

The following example shows a simple horizontal stack of five text views:

MHStack(spacing: 10, lineSpacing: 8) {
    Tag("Started")

    Tag("PM01")

    Tag("103-Repair")
}

Undocumented

A page dot indicator

Undocumented

Undocumented

Undocumented

Configuration for filter feedback bar styling

Default style for sort and filer menu item

The view contains filter feedback bar items.

Filter feedback bar item for displaying full configuration list

Undocumented

Filter feedback bar item for displaying full configuration list

Undocumented

An option set for step state that used for default StepProgressIndicator

Steps configuration used for StepStyle.

Not used by developers.

Not for developers

Undocumented

Undocumented

Not used by developers.

Not for developers.

SingleTag

Undocumented

Undocumented

Undocumented

TextOrIconView to display TextOrIcon

‘TImelineNodeView’ displays an image representing a timeline node.

Undocumented

Not used by developers.

Undocumented

Not used by developers.

Undocumented

Undocumented

Undocumented

Undocumented

Undocumented

Undocumented

Undocumented

Undocumented

Undocumented

Undocumented

Option list picker configuration for styling

Default option list picker style

Undocumented

Undocumented

Undocumented

Undocumented

The properties of a KPI progress item.

Undocumented

Undocumented

Undocumented

Undocumented

The configuration for constructing the list picker.

Undocumented

Undocumented

Undocumented

Undocumented

Undocumented

Defines an expandable list which supports multi-level hierarchy with the ability to select a single item.

Undocumented

Undocumented

Undocumented

Undocumented

Experimental Fiori switch/toggle style

Undocumented

Undocumented

Undocumented

Undocumented

This file provides default fiori style for the component.

1. Uncomment fhe following code.
2. Implement layout and style in corresponding places.
3. Delete .generated from file name.
4. Move this file to _FioriStyles folder under FioriSwiftUICore.

Undocumented

This file provides default fiori style for the component.

1. Uncomment fhe following code.
2. Implement layout and style in corresponding places.
3. Delete .generated from file name.
4. Move this file to _FioriStyles folder under FioriSwiftUICore.

Undocumented

Undocumented

This file provides default fiori style for the component.

1. Uncomment the following code.
2. Implement layout and style in corresponding places.
3. Delete .generated from file name.
4. Move this file to _FioriStyles folder under FioriSwiftUICore.

Undocumented

Undocumented

Undocumented

Undocumented

Undocumented

Undocumented

Undocumented

Undocumented

Undocumented

Undocumented

Undocumented

Undocumented

Undocumented

Undocumented

Undocumented

Undocumented

Undocumented

Undocumented

Undocumented

Undocumented

Undocumented

Undocumented

Undocumented

Undocumented

Undocumented

Undocumented

Undocumented

Custom style implementation for basic authentication screen Provides a simplified version of the authentication screen with username and password fields

Style for authentication Text fields Provides a standard layout for username and password Text fields

Undocumented

This file provides default fiori style for the component.

1. Uncomment fhe following code.
2. Implement layout and style in corresponding places.
3. Delete .generated from file name.
4. Move this file to _FioriStyles folder under FioriSwiftUICore.

Undocumented

Undocumented

Undocumented

Undocumented

Undocumented