List Floorplan¶
FUIListFloorplan
¶
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.
Usage¶
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