FUIObjectCard

open class FUIObjectCard : FUIBaseAccessoryDrawingCollectionViewCell<FUIObjectCardContentView>, InnerViewContainerEventHandling, FUIContentCopyableView

FUIObjectCard is a collection view UI component which extends FUIBaseAccessoryDrawingCollectionViewCell for showing rich business information for an object in a card format, including tags and rating. The FUIObjectCard can also be configured to use single action button.

Initialization and Configuration:

To use FUIObjectCard, it should be dequeued from a UICollectionView and returned in its data source method.

Example of setting an FUIObjectCard by implementing cellForItemWith in the collection view:

   cell.title.text = "Business Object Title"
   cell.subtitle.text = "Business Object Subtitle"
   cell.footnote.text = "Business Object Footnote"
   cell.tags = [FUITag(title: "Tag - 1"), FUITag(title: "Tag - 2"), FUITag(title: "Tag - 3")]
   cell.rating = 5
   cell.trailingProperties = [.tags, .footnote, .rating]
   cell.status.text = "$26.99"
   cell.actionAccessoryType = .button
   cell.actionAccessoryView?.button.setImage(FUIIconLibrary.system.cartAdd.withRenderingMode(.alwaysTemplate), for: .normal)
   cell.actionAccessoryView?.button.contentMode = .center

Tags Compression Behavior:

Based on Fiori Global Design guidance, if the content size of tags component goes beyond one line, it will be truncated automatically to be fitted into one line display mode with a placeholder showing a title of “+x more” information (x means the number of remaining tags that are hidden). Please note that the compression will not work when the tag’s content is too long or only one tag is set.

Trailing Properties:

The order of trailing properties, including .tags, .footnote and .rating, can be set by the developer. By default, the trailing properties is set to [.footnote, .rating, .tags]. If there are duplicated trailing properties, only the first one will be displayed.

Default Styling:

Depending on the selection state, the tint color and button style of hierarchy icon, the font size of the title text, and the cell’s background color will be updated automatically.

Theming:

Supported class paths:

fdlFUIObjectCard {}

Please refer to FUIObjectCardContentView documentation for all supported attributes.