Grid View¶
FUIGridTableViewCell
¶
FUIGridTableViewCell
is a Fiori UI component that extends UITableViewCell
for showing a list of FUIGridRowItem
horizontally. By default, cell height is determined by the auto-layout system height of the tallest item in the cell. Row items will be vertically center aligned if cell only contains single-line text items. Otherwise, row items will be top aligned. Column width is configurable by assigning a fixed width or percent width. You can also have dynamic column in the cell by assigning value of -1 to that column. At most one column can be dynamic.
A common usage is to create a table view with multiple FUIGridTableViewCell
s representing different rows for showing a list report. Each cell(row) has a collection of FUIGridRowItem
s. Each column in the table view can bind with a FUIGridrowHeaderItem
to represent a type of data. SAPFiori provides three types of row items which conform to FUIGridRowItem
protocol:
FUIGridRowHeaderItem
- representing a header for a column.FUIGridRowTextItem
- representing a text or number item. Assign aNumberFormatter
instance toFUIGridRowTextItem
if you want to format textual representation of the number.FUIGridRowImageItem
- representing an image item.
Example Initialization and Configuration of FUIGridTableViewCell
¶
Register FUIGridTableViewCell
for Table View. Set UITableViewAutomaticDimension
to rowHeight
if You Want Cell Height to Be Dynamic¶
override open func viewDidLoad() {
super.viewDidLoad()
tableView.register(FUIGridTableViewCell.self, forCellReuseIdentifier: FUIGridTableViewCell.reuseIdentifier)
tableView.rowHeight = UITableViewAutomaticDimension
tableView.estimatedRowHeight = 100
tableView.sectionHeaderHeight = UITableViewAutomaticDimension
tableView.estimatedSectionHeaderHeight = 100
tableView.register(FUIGridTableViewHeader.self, forHeaderFooterViewReuseIdentifier: FUIGridTableViewHeader.reuseIdentifier)
}
Override tableView(_:cellForRowAt:)
dataSource
Method and Configure Cell¶
//data model
var contentData: [FUIGridRowItem] {
let item0 = FUIGridRowImageItem(image: #imageLiteral(resourceName: "ProfilePic"))
let item1 = FUIGridRowTextItem(text: "PM01 PM01")
let item2 = FUIGridRowTextItem(number: 31.00)
let item3 = FUIGridRowTextItem(number: 31.00)
let item4 = FUIGridRowTextItem(number: 31.00)
let item5 = FUIGridRowTextItem(number: 31.00)
return [item0, item1, item2, item3, item4, item5]
}
var headerData: [FUIGridRowItem] {
let item0 = FUIGridRowHeaderItem(text: " ")
let item1 = FUIGridRowHeaderItem(text: "Product Name")
let item2 = FUIGridRowHeaderItem(text: "Model")
let item3 = FUIGridRowHeaderItem(text: "Category")
let item4 = FUIGridRowHeaderItem(text: "Availability")
let item5 = FUIGridRowHeaderItem(text: "Price")
return [item0, item1, item2, item3, item4, item5]
}
override open func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: FUIGridTableViewCell.reuseIdentifier, for: indexPath) as! FUIGridTableViewCell
if let data = displayedData?[indexPath.row] {
cell.gridItems = data.gridItems
cell.tag = data.index
cell.columnWidthPercent = columnWidthPercent
cell.accessoryType = .disclosureIndicator
}
return cell
}
override func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
let header = tableView.dequeueReusableHeaderFooterView(withIdentifier: FUIGridTableViewHeader.reuseIdentifier) as! FUIGridTableViewHeader
header.gridItems = self.header?.gridItems
header.columnWidthPercent = columnWidthPercent
header.accessoryType = .disclosureIndicator
return header
}
FUIGridTableViewHeader
¶
FUIGridTableViewHeader
is a Fiori UI component that extends UITableViewHeaderFooterView
for showing a list of FUIGridRowItem
horizontally. It will display as a section header in table view. By default, header height is determined by the auto-layout system height of the tallest item in the cell. Row items will be vertically center aligned if cell only contains single-line text items. Otherwise, row items will be top aligned.
Setting column width by assigning a fixed width or percentage for each column. You can also have dynamic column in the cell by assigning value of -1 to that column. At most one column can be dynamic.
Example Initialization and Configuration of FUIGridTableViewHeader
¶
Register FUIGridTableViewHeader
for Table View. Set UITableViewAutomaticDimension
to rowHeight
if You Want Cell Height to Be Dynamic¶
override open func viewDidLoad() {
super.viewDidLoad()
tableView.sectionHeaderHeight = UITableViewAutomaticDimension
tableView.estimatedSectionHeaderHeight = 100
tableView.register(FUIGridTableViewHeader.self, forHeaderFooterViewReuseIdentifier: FUIGridTableViewHeader.reuseIdentifier)
}
Override tableView(_: viewForHeaderInSection:)
DataSource
Method and Configure Cell¶
//data model
var headerData: [FUIGridRowItem] {
let item0 = FUIGridRowHeaderItem(text: " ")
let item1 = FUIGridRowHeaderItem(text: "Product Name")
let item2 = FUIGridRowHeaderItem(text: "Model")
let item3 = FUIGridRowHeaderItem(text: "Category")
let item4 = FUIGridRowHeaderItem(text: "Availability")
let item5 = FUIGridRowHeaderItem(text: "Price")
return [item0, item1, item2, item3, item4, item5]
}
override func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
let header = tableView.dequeueReusableHeaderFooterView(withIdentifier: FUIGridTableViewHeader.reuseIdentifier) as! FUIGridTableViewHeader
header.gridItems = self.header?.gridItems
header.columnWidthPercent = columnWidthPercent
header.accessoryType = .disclosureIndicator
return header
}