Create and Filter patterns

This protocol is to be implemented by all the form cells except FUIAttachmentsFormCell, including:

When FUIFormCells are to be used in an application, application’s implementation of UITableViewController that hosts these FUIFormCells must be a subclass of this FUIFormTableViewController. FUIFormTableViewController hides all the complications and interactions for handling all different types of FUIFormCells.

Application’s implementation of the UITableViewController needs to only implement the following functions:

 class FormCellTestTVC: FUIFormTableViewController {
    override func viewDidLoad() {
        // MUST: Call viewDidLoad function of super class.
        super.viewDidLoad()

        // Register FUIFormCells that will be used
        self.tableView.register(FUITitleFormCell.self, forCellReuseIdentifier: FUITitleFormCell.reuseIdentifier)
        ...
    }

    override func numberOfSections(in tableView: UITableView) -> Int {
        // Return how many section in the table
        return ...
    }

    override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        // Return number of rows in each section
        ...
    }

    override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        // Return the cell to be used at the IndexPath specified
        let cell = tableView.dequeueReusableCell(withIdentifier: FUITitleFormCell.reuseIdentifier, for: indexPath) as! FUITitleFormCell
        cell.value = "Work Request"

        cell.isEditable = true
        // MARK:  implement onChangeHandler
        cell.onChangeHandler = { newValue in
            myObject.title = newValue
        }
        return cell
    }

In addition, if there are some other actions on the table view, it is required that the action functions should also call function endEditing of the table view with the force parameter to true so that all editing cells have its onChangeHandler called. For example, the function didSaveTapped below is the action when the Save button tapped:

    @IBAction func didSaveTapped(_ sender: AnyObject) {
        self.tableView.endEditing(true)

        // save object ...
    }

The reusable UI component implemented as an UITableViewCell to allow user to enter a value, using a UITextField.

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

• value: The value of the property, as String

And an onChangeHandler:

• onChangeHandler: a handler closure, which is invoked on changes to the value

Optionally, the developer may provide:

• isEditable: Indicates if the cell’s value may be modified. Defaults to true.

Color settings:

Setting tintColor for valueTextField for a state using setTintColor(_:for:) api. Currently disabled and normal are supported.

 cell.setTintColor(UIColor.red, for: .normal)

The following is an example of usage in an application UITableViewController:

override func viewDidLoad() {
   super.viewDidLoad()
   self.tableView.register(FUITitleFormCell.self, forCellReuseIdentifier: FUITitleFormCell.reuseIdentifier)
   // ...
}

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

   cell.value = myObject.title
   cell.isEditable = true

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

## Theming Supported style classes

 fdlFUITitleFormCell
 fdlFUITitleFormCell_valueTextField

The reusable UI component implemented as an UITableViewCell to display or edit a key-value pair property.

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

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

And an onChangeHandler:

• onChangeHandler: a handler closure, which is invoked on changes to the value

Optionally, the developer may provide

• isEditable: Indicates if the cell’s value may be modified. Defaults to true.

When the cell is editable, the key and value are arranged vertically in a stack, otherwise they are arranged horizontally.

Color settings:

Setting tintColor for add button for a state using setTintColor(_:for:) api. Currently disabled and normal are supported.

 cell.setTintColor(UIColor.red, for: .normal)

The following is an example of usage in an application UITableViewController:

override func viewDidLoad() {
    super.viewDidLoad()
    self.tableView.register(FUITextFieldFormCell.self, forCellReuseIdentifier: FUITextFieldFormCell.reuseIdentifier)
}

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

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

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

    return cell
}

## Theming

nuiClass:

 fdlFUITextFieldFormCell {}

Supported TEXT class paths:

 fdlFUITextFieldFormCell_keyLabel {}
 fdlFUITextFieldFormCell_valueTextField {}

Supported TEXT properties:

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

The reusable UI component implemented as an UITableViewCell to allow user enter notes.

Optionally, the developer may provide:

• value: The default text in the note.
• placeholderText: The placeholder string to be put on the text area before user typed anything.
• isAutoFitting: If this is true, the scroll will be disabled and the height of the cell will grow and shrink as needed. There is a minimum height that the cell will maintain.
• isEditable: Indicates if the note text could be modified or not. The default is true.
• onChangeHandler: a handler closure, which is invoked on changes to the value

Color setting:

Setting text color of valueTextView for a state using setTintColor(_:for:) api. Currently .disabled and .normal are supported.

 cell.setTintColor(UIColor.red, for: .normal)

The following is an example of usage in an application UITableViewController:

override func viewDidLoad() {
    super.viewDidLoad()
    self.tableView.register(FUINoteFormCell.self, forCellReuseIdentifier: FUINoteFormCell.reuseIdentifier)
    // ...
}

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

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

    // If a value already exists, set it to the `value` property
    cell.value = myObject.note

    // Specify an optional placeholder text
    cell.placeholderText = "Description"

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

    return cell
}

## Theming Supported style classes

 fdlFUINoteFormCell
 fdlFUINoteFormCell_valueTextView

A customized UITableViewCell, which contains a UILabel and a UITextView. It takes text as input.

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

• keyName: The key name of the property.
• placeholderText: The placeholder of the property.
• value: The value of the property, as String.

And an onChangeHandler:

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

Optionally, the developer may set

• isAutoFitting: Indicate if the cell height will adjust based on its content text. Default value is false.
• isTrackingLiveChanges: Indicate how onChangeHandler is invoked. If true, onChangeHandler will be invoked every time a letter is entered or deleted; if false, onChangeHandler will only be invoked when cell resigns first reponder.
• ‘isEditable’: If the cell is editable or not. Default value is true. Date detector works only if this property is set to false.

Color setting:

Setting text color of filter buttons for a state using setTintColor(_:for:) api. Currently .disabled and .normal are supported.

cell.setTintColor(UIColor.red, for: .normal)

The following is an example of usage in an application UITableViewController:

override func viewDidLoad() {
super.viewDidLoad()
self.tableView.register(FUIKeyValueFormCell, forCellReuseIdentifier: FUIKeyValueFormCell.reuseIdentifier)
// ...
}

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

let cell = tableView.dequeueReusableCell(withIdentifier: FUIKeyValueFormCell.reuseIdentifier, for: indexPath) as! FUIKeyValueFormCell
cell.keyName = "Note"
cell.placeholderText = "Description"
cell.value = myObject.descriptionText1
cell.isAutoFitting = true
cell.isTrackingLiveChanges = true
cell.isEditable = false
cell.onChangeHandler = { newValue in
self.myObject.descriptionText1 = newValue
}
return cell
}

Theming

Supported style classes

fdlFUIKeyValueFormCell
fdlFUIKeyValueFormCell_keyLabel
fdlFUIKeyValueFormCell_valueTextView

The reusable UI component implemented as an UITableViewCell to allow user to choose a boolean value using a switch for a property.

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

• keyName: The key name of the property
• value: The value of the property, as Bool
• isEditable: Indicates if the cell’s value may be modified. Defaults to true.

And, an onChangeHandler:

• onChangeHandler: a handler closure, which is invoked on changes to the value

Color settings:

Setting tintColor for add button for a state using setTintColor(_:for:) api. Currently disabled, normal, selected are supported. selected means switch is turned on.

 cell.setTintColor(UIColor.red, for: .normal)

The following is an example of usage in an application UITableViewController:

override func viewDidLoad() {
   super.viewDidLoad()
   self.tableView.register(FUISwitchFormCell.self, forCellReuseIdentifier: FUISwitchFormCell.reuseIdentifier)
   // ...
}

override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
   // ...
   let cell = tableView.dequeueReusableCell(withIdentifier: FUISwitchFormCell.reuseIdentifier, for: indexPath) as! FUISwitchFormCell
   cell.keyName = "Confirmed"
   cell.value = myObject.isConfirmed

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

   return cell
}

## Theming Supported style classes

 fdlFUISwitchFormCell
 fdlFUISwitchFormCell_keyLabel
 fdlFUISwitchFormCell_switchView

A customized UITableViewCell, which contains a UILabel, a UITextField and a UISlider. It allows users to select a single value from a continuous range of values.

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

• keyName: The key name of the property
• value: The value of the property, as Float
• minimumValue: The minimum value of the selection range.
• maximumValue: The maximum value of the selection range.

And an onChangeHandler:

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

Optionally, the developer may set:

• unit: The unit of value. Default is mi.
• isEditable: Indicates if the cell’s value may be modified. Defaults to true.

Color setting:

Setting text color of filter buttons for a state using setTintColor(_:for:) api. Currently .disabled and .normal are supported.

cell.setTintColor(UIColor.red, for: .normal)

The following is an example of usage in an application UITableViewController:

override func viewDidLoad() {
    super.viewDidLoad()
    self.tableView.register(FUISliderFormCell, forCellReuseIdentifier: FUISliderFormCell.reuseIdentifier)
    // ...
}

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

    let cell = tableView.dequeueReusableCell(withIdentifier: FUISliderFormCell.reuseIdentifier, for: indexPath) as! FUISliderFormCell
    cell.keyName = "Distance"
    cell.minimumValue = 0
    cell.maximumValue = 30
    cell.value = myObject.distance

    // MARK:  implement an onChangeHandler
    cell.onChangeHandler = { [weak self] newValue in
        self.myObject.distance = newValue
    }

    return cell
}

Theming

Supported style classes

fdlFUISliderFormCell
fdlFUISliderFormCell_keyLabel
fdlFUISliderFormCell_valueTextField

A UITableViewCell subclass, which 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.

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

Color setting:

Setting text color of buttons in the cell for a state using setTintColor(_:for:) api. Currently disabled, normal and selected are supported.

cell.setTintColor(UIColor.red, for: .selected)

Code usage:

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

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

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

   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

fdlFUISegmentedControlFormCell
fdlFUISegmentedControlFormCell_keyLabel

A UITableViewCell subclass, which allows a user to read or enter a set of values, using a grid of buttons. Commonly used for composing filters.

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

• keyName: The key name of the property.
• value: An array of the selected indexes in the control. Uses the same index as the valueOptions array.
• `valueOptions: A String array, of titles for the buttons in the control

And an onChangeHandler:

• onChangeHandler: a handler closure, which is invoked on changes to the value

Optionally, the developer may provide

• allowsMultipleSelection: Indicates if multiple buttons may be selected simultaneously (true). If false, the control behaves in radio mode. Defaults to true.
• allowsEmptySelection: Indicates if the control allows zero items to be selected (true). If false, then once a value has been selected by the developer or user, taps by the user on the last selected item will be ignored, instead of de-selecting the item. Defaults to true.
• isEditable: Indicates if the cell’s value may be modified. Defaults to true.

Color setting:

Setting text color of filter buttons for a state using setTintColor(_:for:) api. Currently disabled, normal and selected are supported.

 cell.setTintColor(UIColor.red, for: .normal)

The following is an example of usage in an application UITableViewController:

 // optionally, create an array of value option to localized string mappings
  let buttonTitles: [[String: String]] = [["radius": "Distance"], ["price": "Price"], ["rating": "Ratings"], ["avail": "Availability"]]

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

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

     cell.valueOptions = buttonTitles.flatMap { $0.map { $0.value }}
     cell.keyName = "Sort By"
     cell.value = [1]
     cell.allowsMultipleSelection = true
     cell.allowsEmptySelection = false

     // MARK:  implement onChangeHandler
     cell.onChangeHandler = { [weak self] newValue in
        self.applyFilter(forDimensions: newValue)      // here, the cell input is set to a filter function
     }

    return cell
 }

## Theming Supported style classes

 fdlFUIFilterFormCell
 fdlFUIFilterFormCell_keyLabel
 fdlFUIFilterFormCell_item_contentView
 fdlFUIFilterFormCell_item_titleLabel
 fdlFUIFilterFormCell_item_contentView_selected
 fdlFUIFilterFormCell_item_titleLabel_selected

A UITableViewCell subclass, which allows a user to read or enter a value, using a date picker.

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

• keyName: The key name of the property.
• value: The value of the property, as Date

And an onChangeHandler:

• onChangeHandler: a handler closure, which is invoked on changes to the value

Optionally, UITableViewController could provide

• dateFormatter: A developer-defined UIDateFormatter, for transposing between Date type and String.
• datePickerMode: The UIDatePickerMode for the date picker. Default is .dateAndTime. Note that .countDownTimer mode is not supported. Use the FUIDurationPickerFormCell for duration values.
• isEditable: Indicates if the cell’s value may be modified. Defaults to true.

Color setting:

Setting text color of filter buttons for a state using setTintColor(_:for:) api. Currently .disabled, .normal and selected are supported.

 cell.setTintColor(UIColor.red, for: .normal)

The following is an example of usage in an application UITableViewController:

let dateFormatter = DateFormatter()

override func viewDidLoad() {
    super.viewDidLoad()

    dateFormatter.dateFormat = "dd-MM-yyyy"
    self.tableView.register(FUIDatePickerFormCell.self, forCellReuseIdentifier: FUIDatePickerFormCell.reuseIdentifier)
    // ...
}

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

    let cell = tableView.dequeueReusableCell(withIdentifier: FUIDatePickerFormCell.reuseIdentifier, for: indexPath) as! FUIDatePickerFormCell
    cell.keyName = "End Date"

    cell.dateFormatter = dateFormatter
    cell.datePickerMode = .date
    cell.value = cell.dateFormatter.date(from: myObject.endDate)   // "02-17-2017"

     // MARK:  implement onChangeHandler
     cell.onChangeHandler = { newValue in
        myObject.endDate = cell.dateFormatter.string(from: newValue)
     }

     return cell
}

## Theming Supported style classes

 fdlFUIDatePickerFormCell
 fdlFUIDatePickerFormCell_keyLabel
 fdlFUIDatePickerFormCell_valueTextField
 fdlFUIDatePickerFormCell_selectedBackgroundView
 fdlFUIDatePickerFormCell_valueTextField_selected

A UITableViewCell subclass, which allows a user to read or enter a value, using a duration picker.

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

• keyName: The key name of the property
• value: The value of the property, as TimeInterval

And an onChangeHandler:

• onChangeHandler: a handler closure, which is invoked on changes to the value

Optionally, the developer may provide

• minInterval: The minute interval to be used in the picker.
• isEditable: Indicates if the cell’s value may be modified. Defaults to true.

Color configuration:

Call setTintColor(_:for:) to configure tint color for disabled, normal, selected UIControlState. Setting tintColor is equivalent to call setTintColor(color, for: UIControlState.normal).

• disabled: Color to be used when control is disabled.
• normal: Color to be used when control is enabled.
• selected: Color to be used when control is selected.

The following is an example of usage in an application UITableViewController:

 override func viewDidLoad() {
     super.viewDidLoad()
     self.tableView.register(FUIDurationPickerFormCell, forCellReuseIdentifier: FUIDurationPickerFormCell.reuseIdentifier)
     // ...
 }

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

     let cell = tableView.dequeueReusableCell(withIdentifier: FUIDurationPickerFormCell.reuseIdentifier, for: indexPath) as! FUIDurationPickerFormCell
     cell.keyName = "Duration"
     cell.value = myObject.eventDuration  // in seconds

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

     return cell
 }

## Theming Supported style classes

 fdlFUIDurationPickerFormCell
 fdlFUIDurationPickerFormCell_keyLabel
 fdlFUIDurationPickerFormCell_valueTextField
 fdlFUIDurationPickerFormCell_valueTextField_selected

A customized UITableViewCell, which contains a UILabel, a UITextField and a UIPickerView. It allows users to select a single value from a set of options using a spinning wheel.

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

• keyName: The key name of the property
• valueOptions: A set of options that users can chose from.
• value: The value of the property, as Int

And an onChangeHandler:

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

Optionally, the developer may set

• isEditable: Indicates if the cell’s value may be modified. Defaults to true.

Color setting:

Setting text color of filter buttons for a state using setTintColor(_:for:) api. Currently .disabled, .normal and selected are supported.

cell.setTintColor(UIColor.red, for: .normal)

The following is an example of usage in an application UITableViewController:

override func viewDidLoad() {
super.viewDidLoad()
self.tableView.register(FUIValuePickerFormCell, forCellReuseIdentifier: FUIValuePickerFormCell.reuseIdentifier)
// ...
}

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

let cell = tableView.dequeueReusableCell(withIdentifier: FUIValuePickerFormCell.reuseIdentifier, for: indexPath) as! FUIValuePickerFormCell
cell.keyName = "Maximum Price"
cell.valueOptions = ["5", "10", "15", "20", "25"]
cell.value = 0

// MARK:  implement an onChangeHandler
cell.onChangeHandler = { [weak self] newValue in
self.myObject.price = self.priceTitles[newValue].first!.key
}

return cell
}

Theming

Supported style classes

fdlFUIValuePickerFormCell
fdlFUIValuePickerFormCell_keyLabel
fdlFUIValuePickerFormCell_valueTextField
fdlFUIValuePickerFormCell_valueTextField_selected

The reusable UI component implemented as an UITableViewCell to display a key-value pair property, which is integrated with a FUIListPicker controller for displaying a list of values.

### Single-line version

### Multi-line version

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

• keyName: The key name of the property.
• value: The default selections.
• valueOptions: The list of optional values user may choose from.
• allowsMultipleSelection: Indicates if user can select multiple values. Default is true, meaning by default user may select multiple values.
• isEditable: If the selection(s) could be modified or not. The default is true.
• listPicker: The FUIListPicker for this FUIListPickerFormCell.

Color settings:

Setting tintColor for add button for a state using setTintColor(_:for:) api. Currently disabled and normal are supported.

 cell.setTintColor(UIColor.red, for: .normal)

Note that the display of the selections in the valueTextField is the responsibility of the developer if the dataSource property of the listPicker is set. Developer is to set the text of the valueTextField to reflect the selections. Otherwise, if developer sets valueOptions and leaves dataSource of listPicker to nil, then the text in valueTextField will be set internally.

Here are the code snippets in app’s UITableViewController implementation: (The app’s UITableViewController needs to be a subclass of FUIFormTableViewController.)

        var propValue7: [Int] = [1, 3, 6]
        var valueOptions7 = ["One", "Two", "Three", "Four", "Five", "Six", "Seven"]
        var listPickerDataSource7 = StringListPickerDataSource(options: valueOptions7)

        override func viewDidLoad() {
            super.viewDidLoad()
            self.tableView.register(FUIListPickerFormCell.self, forCellReuseIdentifier: FUIListPickerFormCell.reuseIdentifier)
            // ...
        }

        override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
            // ...
            let cell = tableView.dequeueReusableCell(withIdentifier: FUIListPickerFormCell.reuseIdentifier, for: indexPath) as! FUIListPickerFormCell
            cell.keyName = "Choose Multiple"
            cell.value = propValue7
            cell.allowsMultipleSelection = true
            cell.valueTextField.text = descriptionForSelectedStrings(valueOptions7, at: propValue7) // See below

            cell.listPicker.dataSource = listPickerDataSource7
            cell.listPicker.searchResultsUpdating = listPickerDataSource7
            cell.listPicker.isSearchEnabled = true
            cell.listPicker.prompt = "Please select multiple items"

            cell.listPicker.searchBar?.isBarcodeScannerEnabled = true
            cell.listPicker.searchBar?.barcodeScanner?.scanMode = .EAN_UPC
            cell.listPicker.searchBar?.barcodeScanner?.scanResultTransformer = { (scanString) -> String in
                return self.transformStringToSearchBar(scanResultString: scanString)
            }
            // MARK:  implement onChangeHandler
            cell.onChangeHandler = { [weak self] newValue in
                self.propValue3 = newValue
            }
            return cell
            // ...
        }

        func descriptionForSelectedStrings(_ options: [String], at indexes: [Int]) -> String {
            return options.enumerated().filter({ (index, element) -> Bool in
                return indexes.contains(index)
            }).reduce ("") { string, element in
                return string.isEmpty ? element.1 : "\(string), \(element.1)"
            }
        }

## Theming Supported style classes

 fdlFUIListPickerFormCell
 fdlFUIListPickerFormCell_keyLabel
 fdlFUIListPickerFormCell_valueTextField
 fdlFUIListPickerFormCell_selectedBackgroundView

An object that adopts the FUIListPickerDataSource protocol is responsible for providing the data and views required to display the list of options available in FUIListPickerFormCell or FUIListPickerTableViewController.

The data source could be sectioned by implementing the following function:

func numberOfSections(in listPicker: FUIListPicker)  -> Int

Implementation Note:

The list picker will not show any item if any of the required functions is not implemented.

The following optional functions are required to be implemented for data source not using unique identifier:

func numberOfRows(in listPickerTableView: UITableView) -> Int

func listPickerTableView(_ tableView: UITableView, cellForRowAt index: Int, isFiltered: Bool) -> UITableViewCell

The following optional functions are required to be implemented for data source using unique identifier but not sectioned:

func numberOfRows(in listPickerTableView: UITableView) -> Int

func listPickerTableView(_ tableView: UITableView, cellForRowAt index: Int, isFiltered: Bool) -> UITableViewCell

func listPickerTableView(_ tableView: UITableView, cellForItemWithUniqueIdentifier uniqueIdentifier: String) -> UITableViewCell

func listPickerTableView(_ tableView: UITableView, uniqueIdentifierForItemAt index: Int) -> String

func listPickerTableView(_ tableView: UITableView, indexForUniqueIdentifier uniqueIdentifier: String) -> Int

The following optional functions are required to be implemented for data source using unique identifier and sectioned:

func numberOfSections(in listPicker: FUIListPicker) -> Int

func listPickerTableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int

func listPickerTableView(_ tableView: UITableView, cellForRowAtIndexPath indexPath: IndexPath, isFiltered: Bool) -> UITableViewCell

func listPickerTableView(_ tableView: UITableView, uniqueIdentifierForItemAtIndexPath indexPath: IndexPath) -> String

func listPickerTableView(_ tableView: UITableView, cellForItemWithUniqueIdentifier uniqueIdentifier: String) -> UITableViewCell

func listPickerTableView(_ tableView: UITableView, indexPathForUniqueIdentifier uniqueIdentifier: String) -> IndexPath?

An implementation of FUIListPickerSearchResultsUpdating protocol is responsible to maintain a filtered list of options, based on the search string specified, for the corresponding FUIListPickerDataSource implementation.

Implementation Note:

Depending on the FUIListPickerDataSource, different optional functions in the corresponding FUIListPickerSearchResultsUpdating are required to be implemented. The list picker will not show any item if any of the required functions is not implemented.

The following optional functions are required to be implemented for data source not using unique identifier:

func listPicker(_ listPicker: FUIListPicker, filteredDataSourceContainsItemAt unfilteredIndex: Int) -> Bool

func listPicker(_ listPicker: FUIListPicker, unfilteredDataSourceIndexOfItemAt filteredIndex: Int) -> Int

The following optional functions are required to be implemented for data source using unique identifier but not sectioned:

func listPicker(_ listPicker: FUIListPicker, filteredDataSourceContainsItemWithUniqueIdentifier uniqueIdentifier: String) -> Bool

The following optional functions are required to be implemented for data source using unique identifier and sectioned:

func listPicker(_ listPicker: FUIListPicker, filteredDataSourceContainsItemWithUniqueIdentifier uniqueIdentifier: String) -> Boo

The protocol defines the properties and functions for listing the options in an UITableView for the corresponding ListPickerFormCell.

This FUIListPickerTableViewController is to show a list of table view cells to let user select one of the cell. Developer needs to provide implementation of FUIListPickerDataSource, and FUIListPickerSearchResultsUpdating if search is enabled, in order to use FUIListPickerTableViewController.

If the isDismissedOnSelection property is set to true, and the allowsMultipleSelection property is set to false, then when user selected one cell by tapping the displayed cell, the onSelectionHandler property will be invoked to notify the user selection. The table view will then be dismissed.

There will be a Done button shown in the navigation bar if the isDismissedOnSelection property is set to false or the allowsMultipleSelection property is set to true. The onSelectionHandler property will be invoked after user tapped the Done button if the allowsMultipleSelection property is set to false, or the onMultipleSelectionHandler property will be invoked if the allowsMultipleSelection property is set to true. Then the table view will be dismissed.

There will be a Select All button in the All section header, if multiple selections is allowed and not all items are selected. All items are selected when the Select All button is tapped. Once all items are selected, the button title will change to Deselect All. All items are de-selected when Deselect All button is tapped.

Also, a Deselect All button will be in the Selected section header when multiple selections is allowed. The Selected section will appear if the items in the list could not be displayed in one screen, and there are one or more items selected. All selected items will be de-selected when Deselect All button is tapped.

Here is a code snippet of a typical usage:

let bundle = Bundle(for: FUIListPickerTableViewController.self)
let listPickerTableViewController = bundle.loadNibNamed("FUIListPickerTableViewController", owner: nil, options: nil)?.first as! FUIListPickerTableViewController
var listPicker = listPickerTableViewController.listPicker

listPicker.title = "Magic School"
listPicker.register(FUIObjectTableViewCell.self, forCellReuseIdentifier: FUIObjectTableViewCell.reuseIdentifier)
listPicker.dataSource = self.objectCellListPickerDataSource
listPicker.prompt = "Select One"
listPicker.estimatedRowHeight = 98

listPicker.isSearchEnabled = true
listPicker.searchResultsUpdating = self.objectCellListPickerDataSource
listPicker.isBarcodeScannerEnabled = true
listPicker.barcodeScanMode = .all
listPicker.barcodeScanResultTransformer = { (scanString) -> String in
    return "S"
}

listPickerTableViewController.onSelectionHandler = {
    self.select1Result.text = self.objectCellListPickerDataSource.descriptionForSelectedItems(at: [$0])
}
listPickerTableViewController.showsCancelButton = true
listPickerTableViewController.isDismissedOnSelection = false

// Select item at index 4 as default, which is the 5th item.
listPickerTableViewController.selectItem(4)

let navController = UINavigationController(rootViewController: listPickerTableViewController)
self.present(navController, animated: true, completion: nil)

Theming

Supported style classes

fdlFUIListPickerTableViewController
fdlFUIListPickerTVC_cancelItem
fdlFUIListPickerTVC_sectionHeaderTitleLabel
fdlFUIListPickerTVC_listTextLabel

• The reusable UI component implemented as an UITableViewCell to manage selecting attachments.

FUIAttachmentsFormCell uses a FUIAttachmentsViewController to display the title of the cell and a collection of icons to represent the attachments. The attachment icon size may change, depends on the system font size settings. The controller arranges the attachment icons in such a manner that as many icons to be fitted in a row, and as many rows to display all the attachment icons. It will also try to make the row spacing equal to the spacing between icons. However, the row spacing is limited to 20 pixels maximum.

Developers should use the property attachmentsController to provide attachment information; the delegate, the dataSource and the list of FUIAttachmentAction implementations for the desired type of attachments. The app can use the built-in types or implement additional types as desired.

Color settings:

Setting tintColor for add button for a state using setTintColor(_:for:) api. Currently normal and .selected are supported.

 cell.setTintColor(UIColor.red, for: .normal)

There are three built-in FUIAttachmentAction:

• FUIAddPhotoAttachmentAction: Choose photo from the photo library.
• FUITakePhotoAttachmentAction: Take photo using the camera.
• FUIDocumentPickerAttachmentAction: Select file using standard UIDocumentPickerViewController.

 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

     let addPhotoAction = FUIAddPhotoAttachmentAction()
     addPhotoAction.delegate = self
     cell.attachmentsController.addAttachmentAction(addPhotoAction)

     let takePhotoAction = FUITakePhotoAttachmentAction()
     takePhotoAction.delegate = self
     cell.attachmentsController.addAttachmentAction(takePhotoAction)

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

     return cell
 }

 var attachmentURLs: [URL] = [URL]()

// MARK: FUIAttachmentsViewControllerDataSource methods
func attachmentsViewController(_ attachmentsViewController: FUIAttachmentsViewController, iconForAttachmentAtIndex index: Int) -> (image: UIImage, contentMode: UIViewContentMode)? {
    let urlString = self.attachmentURLs[index].absoluteString
    guard let image = self.attachmentThumbnails[urlString] else {
        return nil
    }
    return (image!, .scaleAspectFill)
}

func numberOfAttachments(in attachmentsViewController: FUIAttachmentsViewController) -> Int {
    return attachmentURLs.count
}

func attachmentsViewController(_ attachmentsViewController: FUIAttachmentsViewController, urlForAttachmentAtIndex index: Int) -> URL? {
    return attachmentURLs[index]
}

// MARK:  FUIAttachmentsViewControllerDelegateMethods
func attachmentsViewController(_ attachmentsViewController: FUIAttachmentsViewController, couldNotPresentAttachmentAtIndex index: Int) {

}

func attachmentsViewController(_ attachmentsViewController: FUIAttachmentsViewController, didPressDeleteAtIndex index: Int) {
    self.attachmentURLs.remove(at: index)
    self.tableView.reloadSections(IndexSet(integer:attachmentSection), with: .automatic)
}


//MARK: FUIAddPhotoAttachmentActionDelegate
func addPhotoAttachmentAction(_ action: FUIAddPhotoAttachmentAction, didSelectPhotoAt url: URL) {
    self.addAttachmentURL(url)
}

//MARK: FUITakePhotoAttachmentActionDelegate

func takePhotoAttachmentAction(_ action: FUITakePhotoAttachmentAction, didTakePhotoAt url: URL) {
    self.addAttachmentURL(url)
}


func addAttachmentURL(_ url: URL) {
    self.attachmentURLs.append(url)
    DispatchQueue.main.async {
        self.tableView.reloadSections(IndexSet(integer:self.attachmentSection), with: .automatic)
        self.tableView.scrollToRow(at: IndexPath(row: 0, section: self.attachmentSection) , at: .middle, animated: true)
    }
}

 //MARK: FUIDocumentPickerAttachmentActionDelegate {
 var documentPicker: UIDocumentPickerViewController {
     return UIDocumentPickerViewController(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)
 }

## Theming

Supported TEXT class paths:

 fdlFUIAttachmentsFormView_attachmentTitleLabel {}
 fdlFUIAttachmentsViewController_alertActionTitle {}
 fdlFUIFileThumbnailCollectionItemView_titleLabel {}

Supported TEXT properties:

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

Supported IMAGE class paths:

 fdlFUIFileThumbnailCollectionItemView_detailImageView {}

Supported IMAGE properties:

 tint-color: Color;

Supported BUTTON class paths:

fdlFUIAddButtonCell_addButton {}

Supported BUTTON properties:

 image: Image;
 tint-color: Color;

Supported CELL class paths:

 fdlFUIAttachmentsFormCell_thumbnailCell {}
 fdlFUIAttachmentsFormCell_addButtonCell {}

Supported CELL properties:

 border-color: Color;
 border-width: Integer;
 corner-radius: Integer;

Supported style classes

Simple UITableViewCell subclass, containing a UIButton instance which can be aligned to 3 FUIHorizontalAlignment positions: .left, .center, .right.

Color settings:

Setting tintColor for button for a state using setTintColor(_:for:) api. Currently disabled, normal and selected are supported.

 cell.setTintColor(UIColor.red, for: .normal)

## Usage: Implement the action handler for the UIButton instance, to respond to UIControl events.

## Theming Supported style classes

 fdlFUIButtonFormCell
 fdlFUIButtonFormCell_button

FUIInlineValidationView is a UIView contains a UILabel. It is used by FUIInlineValidationTableViewCell as a validation view appearing at the bottom to show the validation message.

Theming

Supported style classes

fdlFUIInlineValidationView
fdlFUIInlineValidationView_titleLabel
fdlFUIInlineValidationView_separatorView
fdlFUIInlineValidationView_backgroundView

FUIInlineValidationTableViewCell is a base class for FUIFormCells that need to support validation handling. The validation view will appear at the bottom of cell if validation message is set.

Code usage:

1. Custom class should subclass FUIInlineValidationTableViewCell to enable validation handling. Create a bottom constraint on main view and contentView and assign to validationViewHeight property.

public class FUITitleFormCell: FUIInlineValidationTableViewCell, FUIFormCell, UITextFieldDelegate {
    public override init(style: UITableViewCellStyle, reuseIdentifier: String?) {
       //Any setup code

       self.validationViewHeight = self.stackViewBottom
    }
}

1. Set validationMessage on the cell.

override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: FUITitleFormCell.reuseIdentifier, for: indexPath) as! FUITitleFormCell
    //Configure your cell

    cell.validationMessage = "Validation msg"
}

FUIFilterFeedbackControl provides an easy way for programmers to represent a list of applied filters. This FUIFilterFeedbackControl usually appears at the top of the screen above a UITableView. Although you can set this view to any height, it is recommended to set the height of this cell to CGFloat(44). And set its height constraint to the same value.

Developers can use in Interface Builder by adding a UIView to their storyboard or XIB, then setting its class to FUIFilterFeedbackControl. Then set the filterGroups, and filterResultsUpdater properties.

@IBOutlet var filterFeedbackControl: FUIFilterFeedbackControl!

// ...

var sortGroup = FUIFilterGroup()
var mileGroup = FUIFilterGroup()
var nearGroup = FUIFilterGroup()

override func viewDidLoad() {
    super.viewDidLoad()

    let sortDistanceItem = FUIFilterItem("Sort: Distance", isFavorite: false, isActive: true)
    let sortPriceItem = FUIFilterItem("Sort: Price", isFavorite: false, isActive: false)
    let sortRatingsItem = FUIFilterItem("Sort: Ratings", isFavorite: false, isActive: false)
    let sortAvailabilityItem = FUIFilterItem("Sort: Availability", isFavorite: false, isActive: false)

    let mile1Item = FUIFilterItem("0.1 mi", isFavorite: true, isActive: false)
    let mile2Item = FUIFilterItem("0.2 mi", isFavorite: true, isActive: false)
    let mile3Item = FUIFilterItem("0.3 mi", isFavorite: true, isActive: false)
    let mile4Item = FUIFilterItem("0.4 mi", isFavorite: true, isActive: true)

    sortGroup.items = [sortDistanceItem, sortPriceItem, sortRatingsItem, sortAvailabilityItem]
    sortGroup.allowsEmptySelection = false
    sortGroup.isMutuallyExclusive = true

    mileGroup.items = [mile1Item, mile2Item, mile3Item, mile4Item]
    mileGroup.allowsEmptySelection = true
    mileGroup.isMutuallyExclusive = true

    let nearGasItem = FUIFilterItem("Nearby Gas", isFavorite: true, isActive: false)
    let nearCoffeeItem = FUIFilterItem("Nearby Coffee", isFavorite: true, isActive: false)
    let nearRestaurantsItem = FUIFilterItem("Nearby Restaurants", isFavorite: true, isActive: false)

    nearGroup.items = [nearGasItem, nearCoffeeItem, nearRestaurantsItem]
    nearGroup.allowsEmptySelection = true
    nearGroup.isMutuallyExclusive = false

    filterFeedbackControl.filterGroups = [sortGroup, mileGroup, nearGroup]
    filterFeedbackControl.filterResultsUpdater = self

    // ...
}

func updateFilterResults(for filterFeedbackControl: FUIFilterFeedbackControl) {
    let effectiveItems = filterFeedbackControl.filterItems

    // ...
}

Theming

FUIFilterFeedbackControl is using a list of FUISegmentedControl componentes. Therefore, theming of FUIFilterFeedbackControl should be using the FUISegmentedControl theming elements.

fdlFioriSegmentedControl_item_contentView {
border-color: @primary4;
}

fdlFioriSegmentedControl_item_titleLabel {
font-color: @primary2;
}

fdlFioriSegmentedControl_item_contentView_selected {
border-color: @tintColorDark;
}

fdlFioriSegmentedControl_item_titleLabel_selected {
font-color: @tintColorDark;
}

Theming

Supported style classes

fdlFUIFilterFeedbackControl
fdlFUIFilterFeedbackControl_lineView

This protocol is to be used in FUIFilterFeedbackControl for updateing the results based on the changes in filters.

A FUIFilterGroup represents a group of related FUIFilterItem objects.

A FUIFilterItem represent one Filter item to be displayed on the FUIFilterFeedbackControl view.