Skip to content

List Floorplan


open class FUIListFloorplan<Entity: Identifiable & Hashable, Section: Hashable & CaseIterable>: UITableViewController, UISearchResultsUpdating

A generic UITableViewController subclass for displaying business objects in a list context.

Floorplan Structure

  • On the top of view is FUIGridTableViewHeader (optional).
  • Under the header, to display a list of entities, a standard table view is implemented using FUIEditableTableViewDiffableDataSource. By default the list view supports features including pull to refresh, global search, and pagination control.


View Model Binding

An FUIListViewModel manages the data pipeline between the list floorplan and data query loader. It also controls how paginated list results are displayed and the global search function. When initializing an FUIListFloorplan, it is required to set up a view model. The floorplan informs the view model whenever there is a request of new entities query, meanwhile it also observes state changes exposed by the view model.

var queries: [ProductListReportSections: FUIDataLoader<Product>] = [:]
queries[.default] = ProductDataLoader()

let model = FUIListViewModel<Product, ProductListReportSections>(queries: queries, isListPagingEnabled: true, isSearchEnabled: true)

let floorplan = FUIListFloorplan<Product, ProductListReportSections>(viewModel: model)

Cell Binding

A cellBinding closure may be used to custom the display of table view cells bound with different entities.

floorplan.cellBinding = { tableView, indexPath, entity in
    let cell = tableView.dequeueReusableCell(withIdentifier: FUIObjectTableViewCell.reuseIdentifier, for: indexPath) as! FUIObjectTableViewCell
    entity.bind(to: cell)
    return cell

Pull & Drag Interaction

By default FUIListFloorplan supports pagination in an infinite scroll pattern.

  • Pull to refresh is implemented using standard UIRefreshControl.
  • Infinite scrolling with paginated display is triggered by the scrollViewDidEndDragging delegate. An initial list will be displayed when the floorplan is displayed. When user scrolls to the end of the list, entities for the next page will be fetched and display. During the data fetching period, a loading indicator will be animating in the footer area of the list view.

Search Control

  • Change searchDebounceTiming to add a delay before actual initiating of search requests to a data query loader.
  • Implement emptyResultsView to display a custom empty state view when the search result is empty.

Tap Action Handling

  • Implement addButtonDidTapHandler to handle the tap action on add button.
  • Implement deleteButtonDidTapHandler to handle the tap action on delete button.

Last update: April 14, 2021