View

This modifier will support writing assistant in your TextEditor.

Usage:

struct ContentView: View {
    //A helper action need if you want to do some customization, like retry an operation, update the text directly, or navigate to a custom view.
    @State var helperAction = WAHelperAction.none
    // A binding text is also needed for W.A. that will help to update the text if needed.
    @State private var noteText = "Write your note here..."

    var body: some View {
        NoteFormView()
            .waTextInput(self.$text, menus: WAMenu.availableMenus, menuHandler: { menu, value in
                await self.fetchData(for: menu, value: value)
            }, feedbackOptions: feedbackOptions, feedbackHandler: { state, values in
                await self.submitFeedback(state: state, values: values)
            })
            .waHelperAction(self.$helperAction)
        }
    }
}

Error Handling:

A WAError is accepted by the menuHandler and feedbackHandler. If an error occurs, it will be used to display an IllustratedMessage view.

private func submitFeedback(state: AIUserFeedbackVoteState, values: [String]) async -> WAFeedbackResult {
   try? await Task.sleep(nanoseconds: 1500000000)
   if self.errorOccurred {
       return .failure(WAError(detailImage: FioriIcon.illustrations.simpleConnectionSpot, title: "Error Title", description: "Error Description", action: self.illustratedMessageAction, detailImageSize: .small))
   } else {
       return .success
   }
}

var illustratedMessageAction: FioriButton {
    FioriButton { _ in
        self.helperAction = .retry
    } label: { _ in
        Text("Retry")
    }
}

Helper to trigger extra writing assistant actions.

Call back for writing assistant sheet height updated.

Apply default operations, PhotosPicker, FilesPicker, and Camera operations to a view.

Applies operation dialog to an anchor view.

Applies menu items to an anchor view.

Applies items overlay to an anchor view.

Clear the focus state of the text field in FioirSlider

Customize the appearance of the leading text field

Customize the appearance of the trailing text field

Sets the style for Fiori buttons within this view. HStack { FioriButton { _ in “A” } FioriButton { _ in “B” } } .fioriButtonStyle(CustomFioriButtonStyle())

Undocumented

Configures a TextField as a currency input field with formatting options.

Example Usage:

TextFieldFormView(
    title: "Price(USD)",
    text: self.$usdAmount,
    placeholder: "Enter amount",
)
// NumberFormatter
.currencyField()
.currencyField(.numberFormat(NumberFormatter(...)))
.currencyField(formatter: .numberFormat(NumberFormatter(localeIdentifier: "de_DE", maxFractionDigits: 2))) // Customize NumberFormatter
// FormatStyle
.currencyField(formatter: .formatStyle(Decimal.FormatStyle.Currency(
code: "ILS"
)
.precision(.fractionLength(2))
.decimalSeparator(strategy: .automatic)
.grouping(.automatic)
.presentation(.standard)))

Sets the separator for header components

Example usage:

ProfileHeader(...)
    .headerSeparator(true) // Show separator with default style
    .headerSeparator(true, color: .red) // Show red separator
    .headerSeparator(true, color: .blue, lineWidth: 1.0) // Show thick blue separator
    .headerSeparator(false) // Hide separator

Apply a shadow with the specified fiori style.

Set the shadow visibility and style for the view using environment values.

Applies a shimmer loading effect to the view.

• isLoading: A Boolean value indicating whether the view is in a loading state. Defaults to true.
• isTintColor: A Boolean value indicating whether to use the tint color for the shimmer effect. Defaults to false.

Applies a skeleton loading style to an image.

• isLoading: A Boolean value indicating whether the image is in a loading state.
• skeletonImage: The image to display when loading. It is optional and defaults to a system photo icon.
• frame: An optional size for the image frame. If not provided, the image will use its intrinsic size.

the percentage of left and right content columns in remaining width, used in _ObjectItem and ContactIteml etc, range from 0 to 1

Returns a type-erased version of the view.

Set max number of items that can be displayed in a component.

Supported components:

• MenuSelection

Apply InlineModifier.

Set the avatars border. Default value is clear.

 _ObjectItem(title: "Object Item",
            avatars: {
                Image(systemName: "circle.fill")
            })
            .avatarsBorder(Color.red, width: 2)

Dimensions of avatars. Default value is 45x45.

 _ObjectItem(title: "Object Item",
            avatars: {
                Image(systemName: "circle.fill")
            })
            .avatarSize(CGSize(30, 30))

Specifies whether the avatars are drawn as circular. Default value is true.

 _ObjectItem(title: "Object Item",
            avatars: {
                Image(systemName: "circle.fill")
            })
            .isAvatarCircular(true)

Text position for avatar stack. Default value is .trailing.

Layout for avatars in the stack. Default value is .grouped.

Max count for avatars in the stack.

Spacing for avatars in horizontal stack.

Set attributes for filter form option in different state, include foregroundColor, backgroundColor, font, strokeColor and strokeWidth.

FilterFormView(title: "Sort Filter, MultiSelection, EmptySelection, fixed", mandatoryFieldIndicator: self.mandatoryField(), isRequired: false, options: self.sortValueOptions, errorMessage: nil, isEnabled: self.isEnabled, allowsMultipleSelection: true, allowsEmptySelection: true, value: self.$sortFilterFixedSelectionValue, buttonSize: .fixed)
.filterFormOptionAttributes([
   .enabledUnselected: [
       .strokeWidth: 1.0,
       .strokeColor: Color.preferredColor(.separator),
       .foregroundColor: Color.preferredColor(.tertiaryLabel),
       .backgroundColor: Color.preferredColor(.tertiaryFill),
       .font: Font.system(.body)
   ]
])

Set minimum height for filter form option. Default is 44.

FilterFormView(title: "Sort Filter, MultiSelection, EmptySelection, fixed", mandatoryFieldIndicator: self.mandatoryField(), isRequired: false, options: self.sortValueOptions, errorMessage: nil, isEnabled: self.isEnabled, allowsMultipleSelection: true, allowsEmptySelection: true, value: self.$sortFilterFixedSelectionValue, buttonSize: .fixed)
.filterFormOptionMinHeight(50)

Set minimum touch height for filter form option. Default is 44.

FilterFormView(title: "Sort Filter, MultiSelection, EmptySelection, fixed", mandatoryFieldIndicator: self.mandatoryField(), isRequired: false, options: self.sortValueOptions, errorMessage: nil, isEnabled: self.isEnabled, allowsMultipleSelection: true, allowsEmptySelection: true, value: self.$sortFilterFixedSelectionValue, buttonSize: .fixed)
.filterFormOptionMinTouchHeight(50)

Set corner radius for filter form option. Default is 16.

FilterFormView(title: "Sort Filter, MultiSelection, EmptySelection, fixed", mandatoryFieldIndicator: self.mandatoryField(), isRequired: false, options: self.sortValueOptions, errorMessage: nil, isEnabled: self.isEnabled, allowsMultipleSelection: true, allowsEmptySelection: true, value: self.$sortFilterFixedSelectionValue, buttonSize: .fixed)
.filterFormOptionCornerRadius(16)

Set padding for filter form option. Default is EdgeInsets(top: 4, leading: 4, bottom: 4, trailing: 4).

FilterFormView(title: "Sort Filter, MultiSelection, EmptySelection, fixed", mandatoryFieldIndicator: self.mandatoryField(), isRequired: false, options: self.sortValueOptions, errorMessage: nil, isEnabled: self.isEnabled, allowsMultipleSelection: true, allowsEmptySelection: true, value: self.$sortFilterFixedSelectionValue, buttonSize: .fixed)
.filterFormOptionPadding(EdgeInsets(top: 4, leading: 9, bottom: 4, trailing: 9))

Set spacing between title and the checkmark for filter form option. Default is 0.

FilterFormView(title: "Sort Filter, MultiSelection, EmptySelection, fixed", mandatoryFieldIndicator: self.mandatoryField(), isRequired: false, options: self.sortValueOptions, errorMessage: nil, isEnabled: self.isEnabled, allowsMultipleSelection: true, allowsEmptySelection: true, value: self.$sortFilterFixedSelectionValue, buttonSize: .fixed)
.filterFormOptionTitleSpacing(4)

Set item spacing for filter form options. Default is 6.

FilterFormView(title: "Sort Filter, MultiSelection, EmptySelection, fixed", mandatoryFieldIndicator: self.mandatoryField(), isRequired: false, options: self.sortValueOptions, errorMessage: nil, isEnabled: self.isEnabled, allowsMultipleSelection: true, allowsEmptySelection: true, value: self.$sortFilterFixedSelectionValue, buttonSize: .fixed)
.filterFormOptionsItemSpacing(16)

Set line spacing for filter form options. Default is 6.

FilterFormView(title: "Sort Filter, MultiSelection, EmptySelection, fixed", mandatoryFieldIndicator: self.mandatoryField(), isRequired: false, options: self.sortValueOptions, errorMessage: nil, isEnabled: self.isEnabled, allowsMultipleSelection: true, allowsEmptySelection: true, value: self.$sortFilterFixedSelectionValue, buttonSize: .fixed)
.filterFormOptionsLineSpacing(10)

Specific the position of the text that drawn for footnote icons. Default value is .trailing.

Maximum number of the footnote icons. Default value is 0. When the count is less or equal to 0, means the number is unlimited.

 _ObjectItem(title: "Object Item",
            footnoteIcons: {
                Image(systemName: "circle.fill")
                Image(systemName: "person.fill")
            })
            .footnoteIconsMaxCount(1)

Specifies whether the footnoteIcons are drawn as circular. Default value is true.

 _ObjectItem(title: "Object Item",
            footnoteIcons: {
                Image(systemName: "circle.fill")
                Image(systemName: "person.fill")
            })
            .isFootnoteIconsCircular(false)

Dimensions of the footnote icons spacing. Default value is -2.

 _ObjectItem(title: "Object Item",
            footnoteIcons: {
                Image(systemName: "circle.fill")
                Image(systemName: "person.fill")
            })
            .footnoteIconsSpacing(2)

Dimensions of footnote icons. Default value is 16x16.

 _ObjectItem(title: "Object Item",
            footnoteIcons: {
                Image(systemName: "circle.fill")
                Image(systemName: "person.fill")
            })
            .footnoteIconsSize(CGSize(22, 22))

Set whether the order of items in KPIHeader is forced or not.

Set inter item spacing of items in KPIHeader.

List row background color

Experimental filter feedback bar styling

Experimental filter feedback bar styling

Config full configuration Item in FilterFeedbackBar.

Set font for filter feedback bar item name. Default is Font.system(.body).

@State var items: [[SortFilterItem]] = [[.slider(item: .init(name: "User Stories", value: 10, minimumValue: 0, maximumValue: 100, formatter: "Stories", icon: "number"), showsOnFilterFeedbackBar: true)]]
 FilterFeedbackBar(items: self.$items)
    .filterFeedbackBarItemFont(Font.system(.body))

Set foreground color for filter feedback bar item in selected state.

@State var items: [[SortFilterItem]] = [[.slider(item: .init(name: "User Stories", value: 10, minimumValue: 0, maximumValue: 100, formatter: "Stories", icon: "number"), showsOnFilterFeedbackBar: true)]]
 FilterFeedbackBar(items: self.$items)
    .filterFeedbackBarItemSelectedForegroundColor(.red)

Set foreground color for filter feedback bar item in unselected state.

@State var items: [[SortFilterItem]] = [[.slider(item: .init(name: "User Stories", value: 10, minimumValue: 0, maximumValue: 100, formatter: "Stories", icon: "number"), showsOnFilterFeedbackBar: true)]]
 FilterFeedbackBar(items: self.$items)
    .filterFeedbackBarItemUnselectedForegroundColor(.gray)

Set spacing between the sub views in filter feedback bar item. Default is 6.

@State var items: [[SortFilterItem]] = [[.slider(item: .init(name: "User Stories", value: 10, minimumValue: 0, maximumValue: 100, formatter: "Stories", icon: "number"), showsOnFilterFeedbackBar: true)]]
 FilterFeedbackBar(items: self.$items)
    .filterFeedbackBarItemSpacing(8)

Set padding for filter feedback bar item. Default is 8.

@State var items: [[SortFilterItem]] = [[.slider(item: .init(name: "User Stories", value: 10, minimumValue: 0, maximumValue: 100, formatter: "Stories", icon: "number"), showsOnFilterFeedbackBar: true)]]
 FilterFeedbackBar(items: self.$items)
    .filterFeedbackBarItemPadding(8)

Set maximum width for filter feedback bar item. Default is 0. When value is greater than 0, maximum width will be set to this value, otherwise nil

@State var items: [[SortFilterItem]] = [[.slider(item: .init(name: "User Stories", value: 10, minimumValue: 0, maximumValue: 100, formatter: "Stories", icon: "number"), showsOnFilterFeedbackBar: true)]]
 FilterFeedbackBar(items: self.$items)
    .filterFeedbackBarItemMaxWidth(200)

Set minimum height for filter feedback bar item. Default is 38.

@State var items: [[SortFilterItem]] = [[.slider(item: .init(name: "User Stories", value: 10, minimumValue: 0, maximumValue: 100, formatter: "Stories", icon: "number"), showsOnFilterFeedbackBar: true)]]
 FilterFeedbackBar(items: self.$items)
    .filterFeedbackBarItemMinHeight(38)

Set corner radius for filter feedback bar item. Default is 10.

@State var items: [[SortFilterItem]] = [[.slider(item: .init(name: "User Stories", value: 10, minimumValue: 0, maximumValue: 100, formatter: "Stories", icon: "number"), showsOnFilterFeedbackBar: true)]]
 FilterFeedbackBar(items: self.$items)
    .filterFeedbackBarItemCornerRadius(10)

Set fill color for filter feedback bar item background in selected state.

@State var items: [[SortFilterItem]] = [[.slider(item: .init(name: "User Stories", value: 10, minimumValue: 0, maximumValue: 100, formatter: "Stories", icon: "number"), showsOnFilterFeedbackBar: true)]]
 FilterFeedbackBar(items: self.$items)
    .filterFeedbackBarItemBackgroundSelectedFillColor(.clear)

Set fill color for filter feedback bar item background in unselected state.

@State var items: [[SortFilterItem]] = [[.slider(item: .init(name: "User Stories", value: 10, minimumValue: 0, maximumValue: 100, formatter: "Stories", icon: "number"), showsOnFilterFeedbackBar: true)]]
 FilterFeedbackBar(items: self.$items)
    .filterFeedbackBarItemBackgroundUnselectedFillColor(.tertiaryFill)

Set stroke color for filter feedback bar item background in selected state.

@State var items: [[SortFilterItem]] = [[.slider(item: .init(name: "User Stories", value: 10, minimumValue: 0, maximumValue: 100, formatter: "Stories", icon: "number"), showsOnFilterFeedbackBar: true)]]
 FilterFeedbackBar(items: self.$items)
    .filterFeedbackBarItemBackgroundSelectedStrokeColor(.tintColor)

Set stroke color for filter feedback bar item background in unselected state.

@State var items: [[SortFilterItem]] = [[.slider(item: .init(name: "User Stories", value: 10, minimumValue: 0, maximumValue: 100, formatter: "Stories", icon: "number"), showsOnFilterFeedbackBar: true)]]
 FilterFeedbackBar(items: self.$items)
    .filterFeedbackBarItemBackgroundUnselectedStrokeColor(.separatorOpaque)

Set border width for filter feedback bar item. Default is 1.

@State var items: [[SortFilterItem]] = [[.slider(item: .init(name: "User Stories", value: 10, minimumValue: 0, maximumValue: 100, formatter: "Stories", icon: "number"), showsOnFilterFeedbackBar: true)]]
 FilterFeedbackBar(items: self.$items)
    .filterFeedbackBarItemBorderWidth(1)

Place the button at the beginning

Place the button at the beginning

Place the button at the beginning

Place the button at the end

Place the button at the end

Place the button at the end

Step style for StepProgressIndicator.

Modifier for step separator line.

A toolbar modifier for fiori style.

A toolbar modifier for fiori style.

A toolbar modifier for fiori style.

A toolbar modifier for fiori style.

A toolbar modifier for fiori style.

A toolbar modifier for fiori style.

Experimental option list picker styling

Experimental option list picker styling

Sets the style for the progress view.

List style for destination list in list picker.

Undocumented

Displays the AI notice beneath the view, including an icon, text, and an actionable text element. It is used within the form cell to present the AI notice message. Clicking the actionLabel triggers the viewMoreAction.

Show banner message view at the top of target view or as a overlay above the view.

Show banner message view at the top of target view or as a overlay above the view.

Show banner message view at the top of target view or as a overlay above the view.

Show banner message view at the top of target view or as a overlay above the view. Click View Detail can pop up message detail sheet.

Control the BannerMultiMessageSheet to be shown or not.

Set measurement formatter for duration picker.

@State var selection: Int = 0
var formatter: MeasurementFormatter {
let formatter = MeasurementFormatter()
    formatter.locale = Locale(identifier: "zh-CN")
    formatter.unitStyle = .long
    formatter.unitOptions = .providedUnit
    return formatter
}
DurationPicker(selection: self.$selection, maximumMinutes: 124, minimumMinutes: 60, minuteInterval: 2)
    .measurementFormatter(self.formatter)

To show the InformationView at the bottom of the view. It includes an icon and text. It is used in error handling to show error / warning / informational / success confirmation message.

Adds a condition that controls whether entries section can be displayed for ListPickerDestination.

Adds a condition that controls whether ListPickerDestination should be dismissed when selection is made. This is only work for single selection and isTrackingLiveChanges is true.

Customize the list style used in the list picker of filter feedbar bar.

Background color customization for rows in ListPickerDestination

Sets the position of the loading indicator.

Sets the size for the loading indicator.

Sets the tint color of the loading indicator.

Sets the maximum number of tags that a View can display.

Use tagLimit(_:) to cap the number of tags that a View can display.

The line limit applies to all Tag instances within a hierarchy.

 ObjectHeader(title: "Transformer Overheating",
            subtitle: "Three Phase Pad Mounted Transformer (533423)",
            tags: ["I am selected", "PM01", "103-Repair", "tag 4", "tag 5", "tag 6"],
            footnote: "1000 - Hamburg, MECHANIK",
            descriptionText: "Customer noticed that the transformer started",
            status: "High",
            substatus: "Scheduled",
            detailContent: {
                HeaderChart(title: {
                   Text("Temperature")
                }, subtitle: {
                   Text("20 min ago")
                }, chart: {
                   ChartView(chartModel)
                })
            })
            .tagLimit(3)

Show a toast message as an overlay above the view.

Show a toast message as an overlay above the view.