
                      
                      
                      FUISearchBar

Fiori style UISearchBar.

Developer can add a FUIBarcodeScanner to this FUISearchBar by setting the isBarcodeScannerEnabled property of the FUISearchBar to true. A barcode scanner icon will be displayed at the bookmark icon location of the search bar.

A barcode scanner view will be displayed when the barcode scanner icon is tapped.

Please refer to FUISearchController about how to use this FUISearchBar.

Attention

The delegate object with type UISearchBarDelegate is declared as a weak reference. So 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.

Declaration

Swift

@MainActor
public class FUISearchBar : UISearchBar


                      
                      
                      FUISearchController

Fiori style UISearchController. The only difference between FUISearchController and regular UISearchController is the searchBar. FUISearchController‘s searchBar is FUISearchBar.

Developer can add a FUIBarcodeScanner to this FUISearchBar by setting the isBarcodeScannerEnabled property of the FUISearchBar to true. A barcode scanner icon will be displayed at the bookmark icon location of the search bar.

A barcode scanner view will be displayed when the barcode scanner icon is tapped.

Developer can turn on speech recognition by setting the isSpeechRecognizerEnabled property of the FUISearchBar to true. A speech icon will be displayed near the bookmark icon in the search bar.

An interaction menu will be displayed when the speech icon is tapped.

For iOS 11, it is recommended to set the FUISearchController to navigationItem, instead of the table view header for iOS 10.

Here is a sample code snippet.

// Instantiate an FUISearchController and configure its properties
searchController = FUISearchController(searchResultsController: nil)
searchController.searchResultsUpdater = self
searchController.hidesNavigationBarDuringPresentation = true
searchController.searchBar.placeholderText = "Search The List"

// Adding barcode scanner to this search bar
searchController.searchBar.isBarcodeScannerEnabled = true
searchController.searchBar.barcodeScanner?.scanMode = .EAN_UPC
searchController.searchBar.barcodeScanner?.scanResultTransformer = { (scanString) -> String in
return scanString.uppercased()
}
// Adding speech recognizer to this search bar. The speech recognizer and the barcode scanner are mutually exclusive.
searchController.searchBar.isSpeechRecognizerEnabled = true

navigationItem.searchController = searchController
navigationItem.hidesSearchBarWhenScrolling = false

Theming


fdlFUISearchController_searchBar {
bar-tint-color: @line;
background-color: @primary1_darkBackground;
background-tint-color: @tintColorDark;
}

Declaration

Swift

@MainActor
open class FUISearchController : UISearchController

extension FUISearchController: UISearchBarDelegate

extension FUISearchController: UIBarPositioningDelegate

extension FUISearchController: UISearchResultsUpdating

extension FUISearchController: SFSpeechRecognizerDelegate

extension FUISearchController: UIEditMenuInteractionDelegate

extension FUISearchController: FUIBarcodeScanViewControllerDelegate


                      
                      
                      FUIBarcodeScanViewController

This UIViewController is to be used for user to scan for 1D and 2D codes using the device’s camera.

Developer may use segue in their storyboard to access this FUIBarcodeScanViewController in FUIBarcodeScanViewController.storyboard. The delegate property of the FUIBarcodeScanViewController and the properties of the FUIBarcodeScanner may be set in the prepare for segue function as follows:


override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
let destination = segue.destination as! UINavigationController
let vc = destination.viewControllers[0]
if vc is FUIBarcodeScanViewController {
let scanViewController = vc as! FUIBarcodeScanViewController
switch segue.identifier! {
case "CustomScanSegue":
scanViewController.barcodeScanner.scanMode = .qr
scanViewController.barcodeScanner.indicatorBorderColor = UIColor.red.cgColor
scanViewController.barcodeScanner.indicatorBorderWidth = 20
scanViewController.barcodeScanner.promptMessage = "Scan A QR Code"
scanViewController.barcodeScanner.scanResultTransformer = { s in
return s + "-transformed"
}
scanViewController.delegate = self
default:
break
}
}
}

Or, developer may use codes to instantiate this controller as follows:


func customScanFromCode(_ sender: Any) {
let scanViewController = FUIBarcodeScanViewController.createInstanceFromStoryboard()
scanViewController.barcodeScanner.scanMode = .qr
scanViewController.barcodeScanner.indicatorBorderColor = UIColor.red.cgColor
scanViewController.barcodeScanner.indicatorBorderWidth = 20
scanViewController.barcodeScanner.promptMessage = "Scan A QR Code"
scanViewController.barcodeScanner.scanResultTransformer = { s in
return "transformed"
}
scanViewController.delegate = self

let navController = UINavigationController(rootViewController: scanViewController)
self.navigationController?.present(navController, animated: true, completion: nil)
}

Also, developer needs to implement the FUIBarcodeScanViewControllerDelegate protocol to be notified with a scan result:


func barcodeScanViewController(_ barcodeScanViewController: FUIBarcodeScanViewController, didReceiveScanResult scanResult: FUIBarcodeScanResult?) {
print("scan result: \(String(describing: scanResult?.scanResultString))")
if scanResult?.scanResultString != "success" {
alertInvalidQRCode()
} else {
barcodeScanViewController.dismiss(animated: true, completion: nil)
}
}

Attention

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

Declaration

Swift

@available(visionOS, unavailable)
@MainActor
public class FUIBarcodeScanViewController : UIViewController, FUIBarcodeScannerDelegate


                      
                      
                      FUIBarcodeScanViewControllerDelegate

The delegate protocol for the FUIBarcodeScanViewController.

Declaration

Swift

@available(visionOS, unavailable)
public protocol FUIBarcodeScanViewControllerDelegate : AnyObject


                      
                      
                      FUIBarcodeScanView

The UIView in the FUIBarcodeScanViewController.

Declaration

Swift

@MainActor
public class FUIBarcodeScanView : UIView


                      
                      
                      FUIBarcodeScanner

Protocol to interact with a Barcode Scanner. The FUIBarcodeScanner protocol provides properties to configure the barcode scanner. A barcode scanner can automatically scan for 1D and 2D codes using the device’s camera.

You can retrieve a Scanner instance through the UIViewController that host the barcode scanner. Currently, there are two scanner controller in SAPFiori:

Declaration

Swift

public protocol FUIBarcodeScanner


                      
                      
                      FUIBarcodeScanMode

The ScanMode enum defines a set of predefined modes to scan codes with the Scanner. Each mode contains a set of different codes including 1D and 2D codes.

Declaration

Swift

@objc
public enum FUIBarcodeScanMode : Int


                      
                      
                      FUIBarcodeScanResult

Represents the decoded result of a code scanning operation.

Declaration

Swift

public struct FUIBarcodeScanResult


                      
                      
                      FUIBarcodeScannerError

Enum which covers all errors occurring in the barcode scanner framework.

Declaration

Swift

public enum FUIBarcodeScannerError : Error, Equatable

extension FUIBarcodeScannerError: CustomStringConvertible


                      
                      
                      FUISearchTagView

A view representation of FUISearchTag.

Declaration

Swift

@MainActor
open class FUISearchTagView : UIView

extension FUISearchTagView: UIKeyInput

extension FUISearchTagView: UITextInputTraits


                      
                      
                      FUISearchTagsField

A UIScrollView shows a set of tags and a text field which allows user to input text.

Usage

Initialization

You can position tags field either setting the frame or constraints.

let tagsField = FUISearchTagsField()

Configuration

tagsField.tintColor = UIColor.preferredFioriColor(forStyle: .tintColorDark) // cursor color
tagsField.backgroundColor = UIColor.preferredFioriColor(forStyle: .primary9)
tagsField.contentInset = UIEdgeInsetsMake(9, 0, 9, 0)
tagsField.spaceBetweenTags = 5.0
tagsField.font = UIFont.systemFont(ofSize: 16)
tagsField.textColor = UIColor.preferredFioriColor(forStyle: .tintColorDark)
tagsField.fieldTextColor = UIColor.preferredFioriColor(forStyle: .tintColorDark)
tagsField.selectedColor = UIColor.preferredFioriColor(forStyle: .tintColorDark)
tagsField.selectedTextColor = UIColor.preferredFioriColor(forStyle: .primary1, background: .darkBackground)
tagsField.displayDelimiter = true
tagsField.delimiter = ","
tagsField.placeholder = "Search for Assignee"
tagsField.placeholderColor = UIColor.preferredFioriColor(forStyle: .primary3)
tagsField.numberOfLines = 2

Register a event handler

tagsField.onDidChangeText = { [weak self] (sender, text) in
// do something in response to text change.
}

Add or remove tags

tagsField.addTag("str")
tagsField.removeTag("str")

Theming

Supported class paths:

fdlFUITagsField {}

Supported TagsField attributes:

tint-color (Color) background-color (Color) content-insets (Box) font-color { -placeholder } (Color) font-name (FontName) font-style (UIFontTextStyle) font-size (Number) text-line-clamp (Integer) line-spacing (Float) tag-spacing (Float) tag-delimiter (String)

Supported Tag attributes:

tag-font-color { -selected } (Color) tag-background-color { -selected } (Color) tag-content-insets (Box)

Supported ImageView attributes:

search-icon-image (Image) search-icon-image-tint-color (Color)

Declaration

Swift

@MainActor
open class FUISearchTagsField : UIScrollView

extension FUISearchTagsField: UITextFieldDelegate

extension FUISearchTagsField: UIScrollViewDelegate


                      
                      
                      FUISearchToSelectView

A UIView contains a tag field and table view.

Components

tagsField: A WSTagsField shows some tags and an input text field.
tableView: A UITableView shows a list of items.

Usage

Initialization

You can position tags field either setting the frame or constraints.

let searchToSelectView = FUISearchToSelectView()

Configuration

You can configure tags field by access tagsField property.

self.tagsField.backgroundColor = UIColor.blue

Theming

Supported class paths:

fdlFUISearchToSelectView {}
fdlFUISearchToSelectView_tableView {}
fdlFUISearchToSelectView_tagsField {}

Supported TagsField attributes:

tint-color (Color)
background-color (Color)
content-insets (Box)
font-color { -placeholder } (Color)
font-name (FontName)
font-style (UIFontTextStyle)
font-size (Number)
text-line-clamp (Integer)
line-spacing (Float)
tag-spacing (Float)
tag-delimiter (String)

Supported Tag attributes:

tag-font-color { -selected } (Color)
tag-background-color { -selected } (Color)
tag-content-insets (Box)

Supported ImageView attributes:

search-icon-image (Image)
search-icon-image-tint-color (Color)

Declaration

Swift

@MainActor
open class FUISearchToSelectView : UIView


                      
                      
                      FUISearchToSelectViewDelegate

The delegate of FUISearchToSelectView manages uuids of cells and corresponding tag titles.

Declaration

Swift

public protocol FUISearchToSelectViewDelegate : AnyObject


                      
                      
                      FUISearchToSelectViewController

A view controller which specializes in managing a tags field and a table view. Selected table view cell will appear in tags field with a designated tag. You can also deselect a table view cell by deleting its designated tag in tags field. In order to make this work, your subclass must implement FUISearchToSelectViewDelegate delegate.

Components

searchToSelectView
tagsField
tableView

Usage

Subclassing and conforms to delegate. It conforms to UITableViewDataSource and UITableViewDelegate by default.

class MyController: FUISearchToSelectViewController, FUiSearchToSelectViewDelegate {}

Override viewDidLoad and do some setup here

override func viewDidLoad() {
    super.viewDidLoad()
    self.tableView.register(FUIObjectTableViewCell.self, forCellReuseIdentifier: FUIObjectTableViewCell.reuseIdentifier)
    self.tableView.register(FUITableViewHeaderFooterView.self, forHeaderFooterViewReuseIdentifier: FUITableViewHeaderFooterView.reuseIdentifier)
    self.tableView.rowHeight = UITableView.automaticDimension
    self.tableView.estimatedRowHeight = 50
    // ...
}

Implement dataSource and delegate methods


// Define data model.
var objects: [ModelObj] = []

// UITableView dataSource and delegate methods
override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    return objects.count
}

override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: FUIObjectTableViewCell.reuseIdentifier, for: indexPath) as! FUIObjectTableViewCell
    let model = objects[indexPath.row]

    cell.isMomentarySelection = false
    cell.selectionStyle = .none
    cell.detailImage = model.image
    cell.detailImageView.isCircular = true
    cell.headlineText = model.headline
    cell.subheadlineText = model.subheadline
    cell.footnoteText = model.footnote

    return cell
}

// FUISearchtoSelectViewControllerDelegate delegate
func searchToSelectView(_ searchToSelectView: FUISearchToSelectView, uuidForItemAt indexPath: IndexPath) -> String? {
    let obj = objects[indexPath.row]
    return obj.uuid
}

func searchToSelectView(_ searchToSelectView: FUISearchToSelectView, tagTitleFor itemUUID: String) -> String? {
    if let obj = objects.filter ({ $0.uuid == itemUUID }).first {
        return obj.headline
    }
    return nil
}

Note

Developer is responsible for updating selectedUUIDs after data changes to make sure all selected UUIDs are still valid.

Theming

Supported class paths:

fdlFUISearchToSelectViewController_searchToSelectView {}
fdlFUISearchToSelectViewController_tableView {}
fdlFUISearchToSelectViewController_tagsField {}

Supported TagsField attributes:

tint-color (Color)
background-color (Color)
content-insets (Box)
font-color { -placeholder } (Color)
font-name (FontName)
font-style (UIFontTextStyle)
font-size (Number)
text-line-clamp (Integer)
line-spacing (Float)
tag-spacing (Float)
tag-delimiter (String)

Supported Tag attributes:

tag-font-color { -selected } (Color)
tag-background-color { -selected } (Color)
tag-content-insets (Box)

Supported ImageView attributes:

search-icon-image (Image)
search-icon-image-tint-color (Color)

Declaration

Swift

@MainActor
open class FUISearchToSelectViewController : UIViewController, UITableViewDataSource, UITableViewDelegate


                      
                      
                      FUISearchTag

A struct holds the infomation for a tag which presents in a FUISearchTagsField.

Declaration

Swift

public struct FUISearchTag : Hashable

Search Bar and Barcode Scan

Attention

Declaration

Theming

Declaration

Attention

Declaration

Declaration

Declaration

Declaration

Declaration

Declaration

Declaration

Declaration

Usage

Initialization

Configuration

Register a event handler

Add or remove tags

Theming

Declaration

Components

Usage

Initialization

Configuration

Theming

Declaration

Declaration

Components

Usage

Theming

Declaration

Declaration