Other Classes

UICollectionViewCell subclass for FUIDataTableCardView card type, where FUIDataTable are centered in the card.

Extends FUIDataTableCardView API, by extension on FUIBaseDrawingCollectionViewCell.

Usage

let cell = collectionView.dequeueReusableCell(withReuseIdentifier: FUIDataTableCardCollectionViewCell.reuseIdentifier, for: indexPath) as! FUIDataTableCardCollectionViewCell
cell.title.text = "Machine Health Monitoring"
cell.subtitle.text = "ID 3940151"
cell.status.text = "3hr"
self._innerView.data = [[FUIText("Need Attention"), FUIText("Yesterday")],
                        [FUIText("Stable"), FUIText("Jul 5, 2021")],
                        [FUIText("Need Attention"), FUIText("Jul 4, 2021")]]

return cell

Theming

Supported TEXT class paths:

fdlFUIDataTableCardCollectionViewCell_title {}
fdlFUIDataTableCardCollectionViewCell_subtitle {}
fdlFUIDataTableCardCollectionViewCell_status {}
fdlFUIDataTableCardCollectionViewCell_footnote {}
fdlFUIDataTableCardCollectionViewCell_textItem {}: TEXT theme for all cells in FUIDataTable. It has lowest priority.
fdlFUIDataTableCardCollectionViewCell_textItem_row2 {}: TEXT theme for one speciif column in FUIDataTable. # is the column index. It has third priority.
fdlFUIDataTableCardCollectionViewCell_textItem_column1 {}: TEXT theme for one specific row in FUIDataTable. # is the row index; header is row 0 if it existis. It has second priority.
fdlFUIDataTableCardCollectionViewCell_textItem_row2_column1{}: TEXT theme for one specific cell. Row index and column index are required. It has highest priority.

Supported TEXT properties:

font-color: Color;
font-style: UIFontTextStyle;
text-line-clamp: Integer;
text-align: NSTextAlignment;

Supported IMAGE class paths:

fdlFUIDataTableCardCollectionViewCell_imageItem {}: IMAGE theme for all cells in FUIDataTable. It has lowest priority.
fdlFUIDataTableCardCollectionViewCell_imageItem_column# {}: IMAGE theme for one speciif column in FUIDataTable. # is the column index. It has third priority.
fdlFUIDataTableCardCollectionViewCell_imageItem_row# {}: IMAGE theme for one specific row in FUIDataTable. # is the row index; header is row 0 if it existis. It has second priority.
fdlFUIDataTableCardCollectionViewCell_imageItem_row#_column# {}: IMAGE theme for one specific cell in FUIDataTable. Row index and column index are required. It has highest priority.

Supported IMAGE properties:

tint-color: Color;
image-name: String;

A FUIDataTableCardView is used to track the current and historical development of valuations (= text) based measuring points (e.g. color, viscosity) over time. This helps users to identify unforeseen changes in the development immediately.

Usage

let view = FUIDataTableCardView()
view.title.text = "Machine Health Monitoring"
view.subtitle.text = "ID 3940151"
// set it as needed
view.subtitle.textColor = UIColor.preferredFioriColor(forStyle: .criticalLabel)
view.status.text = "3hr"
view.detailImage = UIImage(named: "")
view.data = [[FUIText("Need Attention"), FUIText("Yesterday")],
             [FUIText("Stable"), FUIText("Jul 5, 2021")],
             [FUIText("Need Attention"), FUIText("Jul 4, 2021")]]

Theming

Supported TEXT class paths:

fdlFUIDataTableCardView_title {}
fdlFUIDataTableCardView_subtitle {}
fdlFUIDataTableCardView_status {}
fdlFUIDataTableCardView_footnote {}
fdlFUIDataTableCardView_textItem {}: TEXT theme for all cells in FUIDataTable. It has lowest priority.
fdlFUIDataTableCardView_textItem_row2 {}: TEXT theme for one speciif column in FUIDataTable. # is the column index. It has third priority.
fdlFUIDataTableCardView_textItem_column1 {}: TEXT theme for one specific row in FUIDataTable. # is the row index; header is row 0 if it existis. It has second priority.
fdlFUIDataTableCardView_textItem_row2_column1{}: TEXT theme for one specific cell in FUIDataTable. Row index and column index are required. It has highest priority.

Supported TEXT properties:

font-color: Color;
font-style: UIFontTextStyle;
text-line-clamp: Integer;
text-align: NSTextAlignment;

Supported IMAGE class paths:

fdlFUIDataTableCardView_imageItem {}: IMAGE theme for all cells in FUIDataTable. It has lowest priority.
fdlFUIDataTableCardView_imageItem_column# {}: IMAGE theme for one speciif column in FUIDataTable. # is the column index. It has third priority.
fdlFUIDataTableCardView_imageItem_row# {}: IMAGE theme for one specific row in FUIDataTable. # is the row index; header is row 0 if it existis. It has second priority.
fdlFUIDataTableCardView_imageItem_row#_column# {}: IMAGE theme for one specific cell in FUIDataTable. Row index and column index are required. It has highest priority.

Supported IMAGE properties:

tint-color: Color;
image-name: String;

A base collection view layout class using section layout manager for generating layout attributes for views in a collection view.

A collection view section layout manager that computes the position and size in a section. This is a base class which defines the common properties of a collection section. This class is not supposed to be used directly. Instead, subclass this one and implement prepare() for calculating frames for views in collection view.

The base view of a calendar cell view.

This is for SAPFiori internal use only.

Gridline properties for an Axis.

Style definition for the chartView. Gives access to the chart theming.

The default implementation of the FUITintAttributesProvider with FUIControlState as the TintState type.

Undocumented

UICollectionView subclass, which invokes a sizeChangeHandler: (() -> Void)? closure, when the current content size of the collection does not match the intrinsic content size. The sizeChangeHandler property is internal to the SDK.

Developers should generally not initialize FUIResizingCollectionView directly. Instead, instances of the class are typically accessed through the FUITableViewCollectionSection API’s.

Undocumented

FUIBarButtonItem is an enhanced UIBarButtonItem to provide a way to specify the image to be displayed based on the state when title is nil or empty.

For now, only normal and disabled states are used.

FUIBarButtonItem also provides a few convenience init()s to return a newly initialized SAPFiori Style UIBarButtonItem. It has the SAPFiori styles, font & color for title and icon, .quaternaryFill background color for .highlighted state, and a minimum 44x44 touch area.

A UITableViewHeaderFooterView subclass, which supports top and bottom padding and separators.

Undocumented

The base class for an Inline Validation form table view cell.

UIView subclass to draw text and glygh image using TextKit apis. Typically not used by developer.

Undocumented

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

Code usage:

let dimensionSelector = FUIDimensionSelector(titles: titles)
dimensionSelector.selectedIndex = 1
dimensionSelector.interItemSpacing = 20
dimensionSelector.selectionDidChangeHandler = { [weak self] index in
print("selected: \(index ?? -1)")
}

Styling

Attribute setting:

Setting the items’ styling for title and border with setAttribute(attribute, for:). Currently .normal, .selected and .disabled are supported.

let attribute = FUISegmentAttribute(textColor: .red, borderColor: .blue)
dimensionSelector.setAttribute(attribute: attribute, for: .selected)

Theming

fdlFUIDimensionSelector {
title-color: green;
title-color-selected: red;
title-color-disabled: gray;
border-color: blue;
border-color-selected: orange;
border-color-disabled: gray;
interItem-spacing: 20;
title-inset: 5 10 5 10;
content-inset: 0 40 0 40;
}

Undocumented

The FUITableViewCollectionSection control is designed to be used, when a section in a UITableView should be dedicated to displaying a UICollectionView, and, the height of that section should adjust to fit its contents.

The collection section produces a single FUICollectionViewTableViewCell, which refreshes its height, after its subview FUICollectionView calculates the sizes of its subview UICollectionViewCell items.

A developer uses the FUITableViewCollectionSection, by assigning a data source (/and delegate) to its collectionView: FUICollectionView property; then, he or she should supply its collectionViewTableViewCell property to a UITableViewDataSource.tableView(_:cellForRowAt:) implementation.

## Usage

    let workorders: [WorkOrder] = [WorkOrder]()

    override public func viewDidLoad() {

        let workOrdersLayout = FUICollectionViewLayout.horizontalFlow
        workOrdersLayout.itemSize = CGSize(width: 200, height: 200)
        self.workOrdersSection = FUITableViewCollectionSection(tableView: self.tableView, collectionViewLayout: workOrdersLayout)
        self.workOrdersSection.collectionView.dataSource = self
        self.workOrdersSection.collectionView.register(FUISimpleCollectionViewCell.self, forCellWithReuseIdentifier: FUISimpleCollectionViewCell.reuseIdentifier)
        self.workOrdersSection.collectionView.delegate = self
        self.workOrdersSection.collectionView.isScrollEnabled = false

        self.tableView.estimatedRowHeight = 98
        #if swift(>=4.2)
            self.tableView.rowHeight = UITableView.automaticDimension
        #else
            self.tableView.rowHeight = UITableViewAutomaticDimension
        #endif

    }

    // MARK:  UITableViewDataSource
    override public func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 1
    }

    public override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        return self.workOrdersSection.collectionViewTableViewCell
    }

    // MARK:  UICollectionViewDataSource
    public func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {

        switch collectionView {
        case workOrdersSection.collectionView:
            let cell = collectionView.dequeueReusableCell(withReuseIdentifier: FUISimpleCollectionViewCell.reuseIdentifier,
                                                                          for: indexPath) as! FUISimpleCollectionViewCell
            cell.contentImageView.image = UIImage(named: "WorkOrderImage")
            cell.titleLabel.text = "Work Order: \(indexPath.item)"
            return cell
        default:
            // ...
        }
    }

The reusable UI component implemented as a UICollectionViewCell to allow users to enter notes.

The cell height is automatically adjusted to allow all of the content to be displayed. However, the cell height is also limited to the height of the screen above the soft keyboard height.

Usage

The following is an example of usage in an application with UIViewController and UICollectionViewDataSource:

override func viewDidLoad() {
    super.viewDidLoad()
    self.collectionView.register(FUINoteCollectionViewCell.self, forCellReuseIdentifier: FUINoteCollectionViewCell.reuseIdentifier)
}

override func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UITableViewCell {
    let cell = self.collectionView.dequeueReusableCell(withReuseIdentifier: FUINoteCollectionViewCell.reuseIdentifier, for: indexPath) as! FUINoteCollectionViewCell
    cell.onChangeHandler = { [unowned self] newValue in
         self.noteText = newValue
    }
    cell.placeholder.text = "Enter Description"
    cell.value = noteText
    cell.isTrackingLiveChanges = true
    return cell
}

Theming

Supported TEXT class paths:

   fdlFUINoteFormCell_valueText {}
   fdlFUINoteFormCell_placeholder {}

Supported TEXT properties:

   font-color: Color;
   font-style: UIFontTextStyle;

Supported TINTABLE class paths:

   fdlFUIKeyValueFormCell_valueText {}

Supported TINTABLE properties:

   tint-color { -disabled }: Color;
   font-style { -disabled }: UIFontTextStyle;

The reusable UI component implemented as a UICollectionViewCell to display or edit a textfield.

The developer should set the following properties on the cell in their implementation of the UITableViewDataSource cellForRow(at:) function:

• keyName: The key name of the property.
• value: The value of the property.

And, an onChangeHandler:

• onChangeHandler: a handler closure that is invoked on changes to the value.

Optionally, the developer may provide

• isEditable: Indicates whether the cell’s value may be modified. The default is true.

• isStacked: A Boolean value to determine whether the cell should use a stacked or linear layout. If the device’s accessibility settings font size is increased, the cell will force a stacked layout. By default, this property is set to true.

• maxKeyWidth: The maximum width of the key with a linear layout. By default, the width is 115 for compact and 160 for regular. The set value must meet the minimum default threshold.

• alternativeInputButton: An FUIButton that manages an alternative method to fill the textField.

• isAlternativeInputEnabled: A Bool that shows or hides the alternativeInputButton. This button will indicate whether isAlternativeInputEnabled and isEditable are true.

Color settings:

Manage the color of the control by programmatically setting the textColor and tintColor.

The following is an example of usage in an application with UIViewController and UICollectionViewDataSource:

override func viewDidLoad() {
    super.viewDidLoad()
    self.collectionView.register(FUITextFieldCollectionViewCell.self, forCellReuseIdentifier: FUITextFieldCollectionViewCell.reuseIdentifier)
}

override func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: FUITextFieldCollectionViewCell.reuseIdentifier, for: indexPath) as! FUITextFieldCollectionViewCell

    cell.keyName = "Editable"
    cell.value = myObject.productName

    // MARK:  implement onChangeHandler
    cell.onChangeHandler = { newValue in
        myObject.productName = newValue
    }

    // MARK: Implement alternative input, i.e. use OCR to capture input

    cell.isAlternativeInputEnabled = true
    let inputImage = FUIIconLibrary.system.camera
    cell.alternativeInputButton.setImage(inputImage.withRenderingMode(.alwaysTemplate), for: .normal)
    cell.alternativeInputButton.didSelectHandler = { [weak self, weak cell] (button) in

        //Import SAPML to use OCR capability
        let textRecController = FUITextRecognitionViewController()
        textRecController.recognitionView.observationHandler = { [unowned textRecController] observations in
            let filteredObservations = <#filter out unwanted text#>
            textRecController.recognitionView.showTexts(for: filteredObservations)
            let areObservationsValid = <#filteredObservations meets desired criteria#>
            if areObservationsValid {
                DispatchQueue.main.async {
                    cell?.value = filteredObservations.map { $0.value }.joined(separator:" ")
                }
                return true
            }
            return false
        }

        textRecController.onClose = {
            self?.dismiss(animated: true)
        }
        self?.present(UINavigationController(rootViewController: textRecController), animated: true)
    }

    return cell
 }

## Theming

nuiClass:

 fdlFUITextFieldFormCell {}

Supported TEXT class paths:

 fdlFUITextFieldFormCell_keyText {}
 fdlFUITextFieldFormCell_valueText {}

Supported TEXT properties:

 font-color: Color;
 placeholder-color: Color;
 font-style: UIFontTextStyle;

Supported BUTTON class paths:

 fdlFUITextFieldFormCell_alternativeInputButton {}

Supported BUTTON properties:

 background-color: Color;
 font-color: Color;

UITableViewDiffableDataSource subclass to support editing for the cells in table view.

This class is an implementation of FUIAttachmentAction to allow users to choose items using PHPickerViewController from the Photo Library as attachments in FUIAttachmentsFormView.

The implementation uses a PHPickerViewController to let user choose items from Photo Library.

This class is an implementation of FUIAttachmentAction to allow user to choose a file using UIDocumentPickerViewController as an attachment in FUIAttachmentsFormView.

If the application wants to have its Document directory accessible by the UIDocumentPickerViewController, the application needs to have the following 2 properties set to true in its plist:

• “Supports opening documents in place” (LSSupportsOpeningDocumentsInPlace)
• “Application supports iTunes file sharing” (UIFileSharingEnabled)

Note that the file URL returned by the document picker is a temporary url. The content of the file may not be available after the document picker is closed. Therefore, developer should copy the file content to a location that it may attach the file content later.

class TestFormTableViewController: FUIFormTableViewController {
    override func viewDidLoad() {
        // ...

        // prepare temporary directory to hold attachment files
    }

    // ...

    override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        // ...

        let cell = tableView.dequeueReusableCell(withIdentifier: FUIAttachmentsFormCell.reuseIdentifier, for: indexPath) as! FUIAttachmentsFormCell
        cell.attachmentsController.delegate = self
        cell.attachmentsController.dataSource = self
        cell.attachmentsController.reloadData()

        let documentPickerAction = FUIDocumentPickerAttachmentAction()
        documentPickerAction.delegate = self
        cell.attachmentsController.addAttachmentAction(documentPickerAction)

        return cell
    }
}

extension TestFormTableViewController: FUIDocumentPickerAttachmentActionDelegate {
    var documentPicker: UIDocumentPickerViewController {
      return UIDocumentPick  erViewController(documentTypes: ["public.data"], in: .import)
    }

    func documentPickerAttachmentAction(_ action: FUIDocumentPickerAttachmentAction, didPickFileAt url: URL) {
        if let savedUrl = saveFileToTempFolder(url) {
            self.addAttachmentURL(savedUrl)
        }
        self.tableView.reloadSections(IndexSet(integer:self.attachmentSection), with: .automatic)
   }
}

Attention

The delegate object with type FUIDocumentPickerAttachmentActionDelegate is declared as a weak reference. On deallocation it will be automatically set to nil. To keep it alive as expected, developer should retain the delegate object during its whole execution scope.

Base inner view for FUIButtonCollectionViewCell.

The content view of a form cell.

When FUIListPickerCollectionViewCells are to be used in an application, the application’s implementation of UICollectionViewController that hosts these FUIListPickerCollectionViewCells must be a subclass of this FUIFormCollectionViewController. FUIFormCollectionViewController hides all the complexity and interactions for handling FUIListPickerCollectionViewCell.

The application’s implementation of the UICollectionViewController needs to only implement the following functions:

 class FormCollectionViewCellTestTVC: UICollectionViewController {
    override func viewDidLoad() {
        // MUST: Call viewDidLoad function of super class.
        super.viewDidLoad()

        // Register FUIFormCells that will be used
        self.collectionView.register(FUIListPickerCollectionViewCell.self, forCellWithReuseIdentifier: FUIListPickerCollectionViewCell.reuseIdentifier)
        ...
    }

    override func numberOfSections(in collectionView: UICollectionView) -> Int {
        // Return how many sections are in the collection
        return ...
    }

    override func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        // Return number of items in each section
        return ...
    }

    override func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: FUIListPickerCollectionViewCell.reuseIdentifier, for: indexPath) as! FUIListPickerCollectionViewCell
        cell.keyName = "Pick One"
        cell.isEnabled = true
        // MARK:  implement onChangeHandler
        cell.onChangeHandler = { newValue in
            myObject.title = newValue
        }
        return cell
    }

Undocumented

Undocumented

Undocumented

Undocumented

Base inner view to display a key-value pair property for FUIListPickerCollectionViewCell.

Please refer to the FUIListPickerCollectionViewCell documentation for details.

Base view for map snapshot form cell. Typically not used directly by developer.

Inner content view for map snapshot form cell. Typically not used directly by developer.

Map snapshot form cell, where the custom geometry is shown on a map-based imagery.

Developer may specify the geometry object to display, and configure the title text, status text, and accessory type.

This cell height is automatically adjusted to allow the whole content to be displayed.

Usage

let snapshotFormCell = tableView.dequeueReusableCell(withIdentifier: FUIMapSnapshotFormCell.reuseIdentifier,
                                                     for: indexPath) as! FUIMapSnapshotFormCell
snapshotFormCell.title.text = "Location"
snapshotFormCell.geometry = self.provider?.editingGeometry
if let coordinates = snapshotFormCell.coordinates {
   let numOfPoints = coordinates.count
   snapshotFormCell.status.text = numOfPoints > 1 ? "\(numOfPoints) Points Added" : "\(numOfPoints) Point Added"
}
snapshotFormCell.accessoryType = .disclosureIndicator
return snapshotFormCell

The base class for auto-fitting form table view cell, such as FUINoteFormCell.

The content view of a FUINoteFormCell.

FUIOrderPickerFormCell is a UITableViewCell subclass, which is used in the advanced sort pattern when there are multiple sort criteria involved. The component allows users to adjust priority of sort criteria and switch order direction flexibly.

## Usage Example:

 let cell = tableView.dequeueReusableCell(withIdentifier: FUIOrderPickerFormCell.reuseIdentifier, for: indexPath) as! FUIOrderPickerFormCell

 cell.value = [
 FUISortCriterion(criterion: FUIMultiLineText("Priority"),
                  isSelected: true,
                  isAscending: false,
                  ascendingText: FUIMultiLineText("Lowest first"),
                  descendingText: FUIMultiLineText("Highest first")),
 FUISortCriterion(criterion: FUIMultiLineText("Name"),
                  isSelected: false,
                  isAscending: true,
                  ascendingText: FUIMultiLineText("Ascending"),
                  descendingText: FUIMultiLineText("Descending"))
]

cell.onChangeHandler = { [unowned self] change, newValue in
     // change contains the info about immediate change to sort criterions
     // newValue contains the latest array of sort criterions
}

return cell


 // more customization options
 // change the title
 cell.title = FUIText("Order by", font: UIFont.preferredFioriFont(forTextStyle: .largeTitle), textColor: UIColor.preferredFioriColor(forStyle: .negativeLabel))

 // change the selected icon for all sort criterions
 let config = UIImage.SymbolConfiguration(font: UIFont.preferredFioriFont(forTextStyle: .body))
 let icon = UIImage(systemName: "checkmark.circle", withConfiguration: config)
 cell.selectedIcon = icon

 // change the appearance of labels in sort criterion with font, textColor and numberOfLines in FUIMultiLineText
 FUIMultiLineText("Priority", font: UIFont.preferredFioriFont(forTextStyle: .body), textColor: UIColor.purple)

 // other options
 cell.isAtLeastOneSelected = false
 cell.isContentCopyable = false

## Theming

Supported TEXT class paths:

    fdlFUIOrderPickerFormCell_title
    fdlFUIOrderPickerFormItemCell_title {}
    fdlFUIOrderPickerFormItemCell_subtitle {}

Supported TEXT properties:

    font-color: Color;
    font-style: UIFontTextStyle;

Supported IMAGE class paths:

    fdlFUIOrderPickerFormItemCell_leadingImageView {}

Supported IMAGE properties:

    image-name: UIImage;
    font-style: UIFontTextStyle;
    tint-color: UIColor;

See Theming support in FUIOrderPickerFormView and FUIOrderPickerFormItemView

The table view cell in FUIOrderPickerFormCell

Theming

Supported TEXT class paths:

   fdlFUIOrderPickerFormItemView_title {}
   fdlFUIOrderPickerFormItemView_subtitle {}

Supported TEXT properties:

   font-color: Color;
   font-style: UIFontTextStyle;

Supported IMAGE class paths:

   fdlFUIOrderPickerFormItemView_leadingImageView {}

Supported IMAGE properties:

   image-name: UIImage;
   font-style: UIFontTextStyle;
   tint-color: UIColor;

The content view of FUIOrderPickerFormItemCell. Standard Fiori control for rendering business object data.

The content view of FUIOrderPickerFormCell. Standard Fiori control for rendering business object data.

A slider form cell displays a continuous range of values along a track where the user slides a handle using their thumb between the lower (minimum) value of the range and the upper (maximum value) of the range. The custom range slider supports both a single thumb or double thumb.

Note: In voiceover mode, and when focusing on the thumb, the user can swipe up or down to change the value or double tap and hold to continuously change the value.

The content view of the FUIRangeSliderFormCell or FUIRangeSliderCollectionViewCell.

FUIRatingControl 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.

When the style property is .editable, user can tap an individual image to set the rating. Users can also slide their finger from side to side over the control to select the rating. The FUIRatingControl will send UIControl.Event.valueChanged event when rating changed.

Theming

Supported FUIRatingControl class paths:

fdlFUIRatingControl

Supported RatingControl properties:

on-color { -standard | -accented | -editable-disabled | -editable-disabled }: Color;
off-color { -standard | -accented | -editable-disabled | -editable-disabled }: Color;
on-image { -standard | -editable }: Image;
off-image { -standard | -editable }: Image;

This is the content view of the FUIRatingControlFormCell.

This view includes a FUITextKitView for title, a FUIRatingControl for the rating control, and another FUITextKitView for subtitle. When subtitle is not nil, the title will not be displayed.

The reusable UI component implemented as an UITableViewCell which includes a FUIRatingControl to allow user select a rating.

This form cell uses FUIRatingControlContentView as its content view. FUIRatingControlContentView includes a FUITextKitView for hosting the keyName property, a FUIRatingControl for the rating control, and another FUITextKitView for subtitle.

When the text in subtitle is not nil, the title will not be displayed.

Control Styles

The available style for the FUIRatingControl can be set by developer to editable, editableDisabled, standard, or accented.

Example

control.style = .editable
control.ratingBounds = 0...5
control.rating = 3
control.onImage = UIImage(named: "filledStar").withRenderingMode(.alwaysTemplate)
control.onImage = UIImage(named: "openStar").withRenderingMode(.alwaysTemplate)
control.setTintColor(.orange, for: 0..<1)
control.setTintColor(.red, for: 1..<5)
control.setTintColor(.purple, for: 5..<6)

Theming

nuiClass:

fdlFUIRatingControlFormCell {}

Supported TEXT class paths:

fdlFUIRatingControlFormCell_title {}

Supported TEXT properties:

font-color: Color;
font-style: UIFontTextStyle;

Supported FUIRatingControl class path:

fdlFUIRatingControlFormCell_ratingControl

Supported RatingControl properties:

on-color { -standard | -accented | -editable-disabled | -editable-disabled }: Color;
off-color { -standard | -accented | -editable-disabled | -editable-disabled }: Color;
on-image { -standard | -editable }: Image;
off-image { -standard | -editable }: Image;

A UICollectionViewCell subclass that allows a user to view or select from a list of strings using a Fiori-styled segmented control.

The value property of the cell is equal to the selectedSegmentIndex in the segmented control.

Specify segment heights by setting the segmentHeight API. By default this is set to nil, which means a segment will adjust its height to fit the content.

Color setting:

Setting the text color of buttons in the cell for a state using the setButtonAttributes(_:for:) API. The supported states are: disabled, normal, and selected.

let attributes = FUISegmentedControlButtonAttributes()
attributes.titleAttributes = ...
attributes.borderColor = ...
cell.setButtonAttributes(attributes, for: .normal)

Code Usage

// Optionally, create an array of value options to localized string mappings.
let buttonTitles: [[String: String]] = [["LO": "Low"], ["MED": "Medium"], ["HI": "High"]]

// Register `FUISegmentedControlCollectionViewCell` in the `viewDidLoad()` method in the controller.
override func viewDidLoad() {
super.viewDidLoad()
self.collectionView.register(FUISegmentedControlCollectionViewCell.self, forCellReuseIdentifier: FUISegmentedControlCollectionViewCell.reuseIdentifier)
}

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: FUISegmentedControlCollectionViewCell.reuseIdentifier, for: indexPath) as! FUISegmentedControlCollectionViewCell

cell.valueOptions = buttonTitles.flatMap { $0.map { $0.value } }
cell.keyName = "Priority"
cell.value = myObject.priority  // String value in the valid options set: ["LO", "MED", "HI"]

// MARK: implement `onChangeHandler`.
cell.onChangeHandler = { newValue in
myObject.priority = buttonTitles[newValue].first!.key  // lookup valid String value, from the buttonTitles array
}

return cell
}

Theming

Supported style classes

fdlFUISegmentedControlCollectionViewCell
fdlFUISegmentedControlCollectionViewCell_keyLabel

A base FUISegmentedControlFormView that allows a user to view or select from a list of strings using a Fiori-styled segmented control.

The value property of the cell is equal to the selectedSegmentIndex in the segmented control.

Specify the height for segments by setting the segmentHeight API. By default it is set to nil, which means the segment will adjust its height to fit the content.

Color setting:

Setting the text color of buttons in the cell for a state using the setButtonAttributes(_:for:) API. The supported states are: disabled, normal, and selected.

let attributes = FUISegmentedControlButtonAttributes()
attributes.titleAttributes = ...
attributes.borderColor = ...
self.setButtonAttributes(attributes, for: .normal)

Code Usage

// Optionally, create an array of value option to localized string mappings
let buttonTitles: [[String: String]] = [["LO": "Low"], ["MED": "Medium"], ["HI": "High"]]

let view = FUISegmentedControlFormView()
view.valueOptions = buttonTitles.flatMap { $0.map { $0.value } }
view.keyName = "Priority"
view.value = myObject.priority  // String value in the valid options set: ["LO", "MED", "HI"]

// MARK: implement `onChangeHandler`.
view.onChangeHandler = { newValue in
myObject.priority = buttonTitles[newValue].first!.key  // lookup valid String value, from the buttonTitles array
}

Theming

Supported style classes

fdlFUISegmentedControlFormView
fdlFUISegmentedControlFormView_keyLabel

The content view of a FUIInlineSignatureFormCell.

Theming

Supported FUIInlineSignatureFormView class path:

fdlFUIInlineSignatureFormView

Supported FUIInlineSignatureFormView properties:

stroke-width: (Number)
stroke-color: (Color)
drawing-area-background-color: (Color)
xmark-color: (Color)
signature-line-color: (Color)

Supported Text class path:

fdlFUIInlineSignatureFormView_title
fdlFUIInlineSignatureFormView_startActionTitle
fdlFUIInlineSignatureFormView_restartActionTitle
fdlFUIInlineSignatureFormView_cancelActionTitle
fdlFUIInlineSignatureFormView_clearActionTitle
fdlFUIInlineSignatureFormView_saveActionTitle
fdlFUIInlineSignatureFormView_watermarkText

Supported Text properties:

font-color: Color;
font-style: UIFontTextStyle;

The content view of a FUISliderCollectionViewCell.

The content view of an FUIStepperFormCell.

The content view of a FUISwitchFormCell.

This is an implementation of FUIFormattedStringEditing on top of the regular iOS NumberFormatter.

The main enhancement is to add the support to handle cursor positions.

Here are two examples when using with the FUITextFieldFormCell:

• As a currency number formatter

  let cell = tableView.dequeueReusableCell(withIdentifier: FUITextFieldFormCell.reuseIdentifier) as! FUITextFieldFormCell
  cell.keyName = "Price"
  cell.keyboardType = .decimalPad
  let formatter = FUINumberFormatter()
  formatter.numberStyle = .currency
  cell.formatter = formatter
  ...
  

  The text field will display “$12.34” when user types “12.34”.

• With custom suffix

  let cell = tableView.dequeueReusableCell(withIdentifier: FUITextFieldFormCell.reuseIdentifier) as! FUITextFieldFormCell
  cell.keyName = "Weight"
  cell.keyboardType = .decimalPad
  let formatter = FUINumberFormatter()
  formatter.numberStyle = .decimal
  formatter.maximumFractionDigits = 3
  formatter.positiveSuffix = "lbs"
  cell.formatter = formatter
  

  The text field will display “1.234lbs” when user types “1.234”.

A FUIFormattedStringEditing implementation to format phone number.

This formatter accepts only digit characters 0 through 9. All other characters user typed are ignored.

The default format is “(###) ###-####”. Which correspond to US phone number system. Developer could change the format to fit phone number for other countries.

The content view of an FUITextFieldFormCell.

The FUIGridRowSummaryItem is a subclass of FUIGridRowTextItem for representing a summary item in FUIGridTableViewCell. FUIGridRowSummaryItem is different from FUIGridRowTextItem in terms of style.

Theming

Supported style classes

fdlFUIGridRowSummaryItem_label

FUIGridTableViewHeaderFooterView is a FIori UI component that extends UITableViewHeaderFooterView for showing a list of FUIGridRowItem column titles. It will display as a section header or footer in table view.

Columns widths may be specified in absolute points, or as a set of fractions in 0.0..<1. A developer may also designate one column for flexible width, by assigning the value -1 to that column width.

The FUIGridTableViewHeaderFooterView is adaptive for regular and compact horizontal content modes. It is hidden by design, when in compact mode. The AutoLayout automatic dimension technique should be used for computing the height.

Example Initialization and Configuration:

override open func viewDidLoad() {
super.viewDidLoad()
tableView.sectionHeaderHeight = UITableViewAutomaticDimension
tableView.estimatedSectionHeaderHeight = 100
tableView.register(FUIGridTableViewHeaderFooterView.self, forHeaderFooterViewReuseIdentifier: FUIGridTableViewHeaderFooterView.reuseIdentifier)
}

Override tableView(_: viewForHeaderInSection:) dataSource method and configure header.

// header data list
var headerData: [FUIGridRowItem] {
let item0 = FUIGridRowHeaderItem(text: " ")
let item1 = FUIGridRowHeaderItem(text: "Symbol")
let item2 = FUIGridRowHeaderItem(text: "Open")
let item3 = FUIGridRowHeaderItem(text: "High")
let item4 = FUIGridRowHeaderItem(text: "Low")
let item5 = FUIGridRowHeaderItem(text: "Close")
return [item0, item1, item2, item3, item4, item5]
}

// set column widths.  Should be shared by rows and header.
let columnWidths = [-1, 0.2, 0.1, 0.1, 0.1, 0.1]

// configure header view
header.items = headerData
header.columnWidthPercent = columnWidths
header.accessoryType = .disclosureIndicator // match row cell accessory types!

FUIGridTableViewSummaryFooter is a Fiori UI component that extends UITableViewHeaderFooterView for showing a list of FUIGridRowItem column titles. It displays as a section footer in table view.

Columns widths may be specified in absolute points, or as a set of fractions in 0.0..<1. A developer may also designate one column for flexible width, by assigning the value -1 to that column width.

The FUIGridTableViewSummaryFooter is adaptive for regular and compact horizontal content modes. It is hidden by design, when in compact mode. The AutoLayout automatic dimension technique should be used for computing the footer height.

Example Initialization and Configuration:

override open func viewDidLoad() {
super.viewDidLoad()
tableView.sectionFooterHeight = UITableViewAutomaticDimension
tableView.estimatedSectionFooterHeight = 100
tableView.register(FUIGridTableViewSummaryFooter.self, forHeaderFooterViewReuseIdentifier: FUIGridTableViewSummaryFooter.reuseIdentifier)
}

Override tableView(_: viewForFooterInSection:) dataSource method and configure header.

// header data list
var footerData: [FUIGridRowItem] {
let item0 = FUIGridRowSummaryItem(text: "Total")
let item1 = FUIGridRowSummaryItem(text: "10")
let item2 = FUIGridRowSummaryItem(text: "10")
let item3 = FUIGridRowSummaryItem(text: "10")
let item4 = FUIGridRowSummaryItem(text: "10")
let item5 = FUIGridRowSummaryItem(text: "10")
return [item0, item1, item2, item3, item4, item5]
}

// set column widths.  Should be shared by rows and header.
let columnWidths = [-1, 0.2, 0.1, 0.1, 0.1, 0.1]

// configure header view
footer.items = headerData
footer.columnWidthPercent = columnWidths
footer.accessoryType = .disclosureIndicator // match row cell accessory types!

A view controller showing popover list for creating geometry in map view.

Usage

Initialize the popover content view controller.

var popoverContent = FUICreateGeometryPopOverTableViewController()

Define selection behavior and do some setup for map legend items.

@objc private func presentCreatePopover() {
   popoverContent.items = createGeometryItems
   popoverContent.modalPresentationStyle = .popover
   let popover = popoverContent.popoverPresentationController
   let createGeometryResultsController = CreateGeometryResultsController()
   popoverContent.didSelectHandler = { [unowned self] createItem in
       createGeometryResultsController.editingGeometryMapLegendItem = createItem
       self.navigationController?.pushViewController(createGeometryResultsController, animated: true)
   }
   popover?.barButtonItem = plusBarButtonItem
   self.present(popoverContent, animated: true, completion: nil)
}

A subclass of MKPointAnnotation which conforms to FUIAnnotation and it is tied to a callout tag showing the name of a route on the map.

FUIEditingGeometryObject a generic object that specifies the accepted FUIGeometryType, Representation Type, and Map Type.

Variables Available in FUIEditingGeometryObject:

• geometry: The geometry associated with the editing object

• cachedGeometry: The cached instance of the geometry

• cachedIndex: The cached index for polylines and polygons for their selected index

Methods Available in FUIEditingGeometryObject:

• addRepresentation(to context: MapContextType): A method to add the geometry to the map.

• removeRepresentation(from context: MapContextType): A method to remove the geometry from the map.

• redrawRepresentation(in context: MapContextType, with existingCoordinates: [CLLocationCoordinate2D], scheme: FUIBackgroundColorScheme, traits: UIUserInterfaceStyle): A method to re-draw the geometry display in the map.

Wrapper class of geometry types

MKPointAnnotation subclass to support selection state.

A generic class supports both MapKit and Esri for storing route segments and stops information.

A subclass of FUIMKMapFloorplanViewController designed to be used with MapKit framework. It adds additional functionality to map floorplan controller to support routes display.

Usage

Create a FUIRoute instance for each route you want to display. Make sure your route stop geometry type extends MKPointAnnotation and FUIAnnotation, and route segment geometry type extends MKPolyline and FUIOverlay.

1. Implement FUIMKRoutingMapViewDataSource methods.

In the routing floorplan controller viewDidLoad() set the datasource.

self.dataSource = dataSource

func numberOfRoutes(in mapView: MKMapView) -> Int { return 1 }

func mapView(_ mapView: MKMapView, routeAt index: Int) -> FUIRoute<MKPolyline, MKPointAnnotation> { return fuiRoute }

1. FUIMKRoutingMapViewDelegate provides more functionalities that you can make your app more powerful.

In the floorplan controller viewDidLoad() set the delegate.

self.delegate = delegate

Determine how annotation view/overlay renderer should appear. You can customize the view/render provided with fiori default styles.

func mapView(_ mapView: MKMapView, willRender annotationView: MKAnnotationView, forVertexAtIndex vertexIndex: Int, inRouteAt routeIndex: Int, in state: FUIMapFloorplan.State) {
   switch annotationView {
   case is FUICircleAnnotationView:
       (annotationView as! FUICircleAnnotationView).innerColor = .red
   case is FUIMarkerAnnotationView:
       (annotationView as! FUIMarkerAnnotationView).markerTintColor = .blue
   default:
       break
   }
}

Respond to route select/deselect action

func mapView(_ mapView: MKMapView, didSelectRouteAt index: Int)

func mapView(_ mapView: MKMapView, didSelectVertexAt vertexIndex: Int, inRouteAt routeIndex: Int)

func mapView(_ mapView: MKMapView, didDeselectRouteAt index: Int)

func mapView(_ mapView: MKMapView, didDeselectVertexAt vertexIndex: Int, inRouteAt routeIndex: Int)

Theming

Base inner view for FUIMapDetailTagObjectTableViewCell.

Base container for showing business object information.

Example Initialization and Configuration:

let view = FUICardBaseContainer<Header: UIView, InnerView: Drawing>()
view.primaryAction.isHidden = false
view.secondaryAction.isHidden = false
view.primaryAction.setTitle(<#T##String?#>, for: <#T##UIControlState#>)
view.secondaryAction.setTitle(<#T##String?#>, for: <#T##UIControlState#>)

Theming

Please refer to FUIObjectCardView documentation for all supported attributes.

Base container for showing object actions in footer.

Example Initialization and Configuration:

let view = FUICardFooterView()
view.primaryButton.isHidden = false
view.primaryAction.setTitle("Primary", for: .normal)
view.secondaryAction.isHidden = false
view.secondaryAction.setTitle("Secondary", for: .normal)

Base container for showing business object header information.

Example Initialization and Configuration:

let view = FUICardHeaderView()
view.detailImageView.image = UIImage(named: "imageName")
view.overflowAction.isHidden = false
view.title = "Title"

Theming

Supported TEXT class paths:

fdlFUICardHeaderView_title {} fdlFUICardHeaderView_overflowAction {}

Supported TEXT properties:

font-color: Color; font-style: UIFontTextStyle; text-align: NSTextAlignment;

Supported IMAGE class paths:

fdlFUICardHeaderView_detailImageView {}

Supported IMAGE properties:

tint-color: Color;

Showing business list card information as inner view for collection view cell.

Base inner view showing business object information for FUIListCardView.

Example Initialization and Configuration:

let view = FUIListCardView<<#ItemIdentifier: Hashable & Identifiable#>>()
view.register(<#T##cellClass: AnyClass?##AnyClass?#>, forCellReuseIdentifier: <#T##String#>)
view.cellProvider = ((UITableView, IndexPath, ItemIdentifier) -> UITableViewCell)
view.setItems(<#T##[ItemIdentifier]#>)
view.cellTappedHandler = ...

Showing business list card information as inner view for table view cell.

Base container for showing business object header information.

Example Initialization and Configuration:

let view = FUIListCardView<ItemIdentifier>()
view.detailImageView.image = UIImage(named: "imageName")
view.title = "Title"
view.primaryButton.isHidden = false
view.primaryAction.setTitle("Primary", for: .normal)
view.secondaryAction.isHidden = false
view.secondaryAction.setTitle("Secondary", for: .normal)
view.overflowAction.isHidden = false
view.overflowAction.setImage(UIImage(systemName: "ellipsis"), for: .normal)
view.register(cellClass: AnyClass?, forCellReuseIdentifier: "reuseIdentifier")
view.cellProvider = ((UITableView, IndexPath, ItemIdentifier) -> UITableViewCell)
view.setItems([ItemIdentifier])
view.cellTappedHandler = ...

Theming

Supported TEXT class paths:

fdlFUICardHeaderView_title {} fdlFUIListCardView_overflowAction {} fdlFUIListCardView_primaryAction {} fdlFUIListCardView_secondaryAction {}

Supported TEXT properties:

font-color: Color; font-style: UIFontTextStyle; text-align: NSTextAlignment;

Supported IMAGE class paths:

fdlFUIListCardView_detailImageView {}

Supported IMAGE properties:

tint-color: Color;

FUIObjectCard is a collection view UI component which extends FUIBaseAccessoryDrawingCollectionViewCell for showing rich business information for an object in a card format, including tags and rating. The FUIObjectCard can also be configured to use single action button.

Initialization and Configuration:

To use FUIObjectCard, it should be dequeued from a UICollectionView and returned in its data source method.

Example of setting an FUIObjectCard by implementing cellForItemWith in the collection view:

   cell.title.text = "Business Object Title"
   cell.subtitle.text = "Business Object Subtitle"
   cell.footnote.text = "Business Object Footnote"
   cell.tags = [FUITag(title: "Tag - 1"), FUITag(title: "Tag - 2"), FUITag(title: "Tag - 3")]
   cell.rating = 5
   cell.trailingProperties = [.tags, .footnote, .rating]
   cell.status.text = "$26.99"
   cell.actionAccessoryType = .button
   cell.actionAccessoryView?.button.setImage(FUIIconLibrary.system.cartAdd.withRenderingMode(.alwaysTemplate), for: .normal)
   cell.actionAccessoryView?.button.contentMode = .center

Tags Compression Behavior:

Based on Fiori Global Design guidance, if the content size of tags component goes beyond one line, it will be truncated automatically to be fitted into one line display mode with a placeholder showing a title of “+x more” information (x means the number of remaining tags that are hidden). Please note that the compression will not work when the tag’s content is too long or only one tag is set.

Trailing Properties:

The order of trailing properties, including .tags, .footnote and .rating, can be set by the developer. By default, the trailing properties is set to [.footnote, .rating, .tags]. If there are duplicated trailing properties, only the first one will be displayed.

Default Styling:

Depending on the selection state, the tint color and button style of hierarchy icon, the font size of the title text, and the cell’s background color will be updated automatically.

Theming:

Supported class paths:

fdlFUIObjectCard {}

Please refer to FUIObjectCardContentView documentation for all supported attributes.

Showing business object card information as inner view for collection view cell.

Base inner view showing business object information for FUIObjectCard.

Example Initialization and Configuration:

let view = FUIObjectCardContentView()
view.title.text = "Business Object Title"
view.subtitle.text = "Business Object Subtitle"
view.footnote.text = "Business Object Footnote"
view.status.text = "Business Object Status"
view.statusImageView.image = UIImage(named: <#image#>)
view.tags = [FUITag(title: "Tag - 1"), FUITag(title: "Tag - 2"), FUITag(title: "Tag - 3")]
view.rating = 5
view.trailingProperties = [.rating, .tags, .footnote]
view.iconImages = ["1", FUIIconLibrary.indicator.veryHighPriority.withRenderingMode(.alwaysTemplate)]

Theming

Supported TEXT class paths:

fdlFUIObjectCardContentView_title {} fdlFUIObjectCardContentView_subtitle {} fdlFUIObjectCardContentView_footnote {} fdlFUIObjectCardContentView_status {} fdlFUIObjectCardContentView_body {} fdlFUIObjectCardContentView_overflowAction {}

Supported TEXT properties:

font-color: Color; font-style: UIFontTextStyle; text-align: NSTextAlignment;

Supported IMAGE class paths:

fdlFUIObjectCardContentView_detailImageView {}

Supported IMAGE properties:

tint-color: Color;

Showing business object card information as inner view for table view cell.

Showing business object card information.

Example Initialization and Configuration:

let view = FUIObjectCardView()
view.primaryButton.isHidden = false
view.primaryAction.setTitle("Primary", for: .normal)
view.secondaryAction.isHidden = false
view.secondaryAction.setTitle("Secondary", for: .normal)
view.overflowAction.isHidden = false
view.overflowAction.setImage(UIImage(systemName: "ellipsis"), for: .normal)
view.title.text = "Business Object Title"
view.subtitle.text = "Business Object Subtitle"
view.footnote.text = "Business Object Footnote"
view.status.text = "Business Object Status"

Theming

Supported class paths:

fdlFUIObjectCardView {} fdlFUIObjectCardView_title {} fdlFUIObjectCardView_subtitle {} fdlFUIObjectCardView_footnote {} fdlFUIObjectCardView_status {} fdlFUIObjectCardView_body {} fdlFUIObjectCardView_primaryAction {} fdlFUIObjectCardView_secondaryAction {} fdlFUIObjectCardView_overflowAction {}

Typically not used by developer

Typically not used by developer

A base class that is the FUIBaseDrawingTableViewCell subclass for presenting an object view inside a table view cell, which defines common layout elements shared by FUIObjectTableViewCell and FUIHierarchyItemTableViewCell.

Typically not used by developer

A UISegmentedControl subclass with Fiori styles.

Usage:

let segmentControl = FUISegmentControl(items: ["Segment 1", "Segment 2", "Segment 3"])
segmentControl.addTarget(self, action: #selector(selectionChange(segmentControl:)), for: .primaryActionTriggered)

Use segment control in a container with dark background

segmentControl.backgroundColorScheme = .darkConstant

Theming

fdlFUISegmentControl {
   background-color (Color)
   background-image { -selected | -highlighted | -disabled } (Image)

   tint-color (Color)
   selected-segment-tint-color (Color)

   // The divider image to be used when both left and right segment are in normal state
   divider-image (Image)

   font-color { -selected | -highlighted | -disabled } (Color)

   text-shadow-color { -selected | -highlighted | -disabled } (Color)
   text-shadow-offset { -selected | -highlighted | -disabled } (Size)

   font-name { -selected | -highlighted | -disabled } (FontName)
   font-size { -selected | -highlighted | -disabled } (Size)
   font-style { -selected | -highlighted | -disabled } (UIFont.TextStyle)
}

FUITimelineNowIndicatorCell is a UITableViewCell subclass, designed to present now indicator in a Timeline view.

## Usage

override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: "FUITimelineNowIndicatorCell", for: indexPath) as! FUITimelineNowIndicatorCell
    return cell
}