open class FUIFilterFeedbackControl : UIView

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() {

    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

    // ...


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;


Supported style classes

  • The array of FUIFilterGroup objects for this control.



    public var filterGroups: [FUIFilterGroup] { get set }
  • Implement this protocol to respond to the changes of filters.



    public weak var filterResultsUpdater: FUIFilterResultsUpdating?
  • The UICollectionView in this FUIFilterFeedbackControl.



    public var collectionView: UICollectionView { get }
  • The list of the FUIFilterItem to be used in this FUIFilterFeedbackControl.

    • Items with isActive true will be put ahead of the items with isActive false.
    • Items with both isActive and isFavorite false will be dropped.



    public var filterItems: [FUIFilterItem] { get }
  • Sets the content offset of the UICollectionView in this FUIFilterFeedbackControl.



    public func setContentOffset(_ contentOffset: CGPoint, animated: Bool)



    A point (expressed in points) that is offset from the content view’s origin.


    true to animate the transition at a constant velocity to the new offset, false to make the transition immediate.