Contact views

FUIContactCell is a variant of UITableViewCell defined in SAPFiori. It contains a UIImageView, several UILabels, and a FUIActivityControl component.

It supports three activity items by default. You can change this by setting maxVisibleItems on the activityControl property.

Code usage:

 //Create a FUIContactCell in a TableView
 override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
     let cell = tableView.dequeueReusableCell(withIdentifier: FUIContactCell.reuseIdentifier) as! FUIContactCell
     let activities: [ActivityItem] = [ActivityItem.phone, ActivityItem.message]
     let contact = DataSource.contact[indexPath.row]
     cell.detailImage = contact.image
 // To enable a default gradient layer behind the placeholder text.
      cell.detailImageView.isGradientLayerEnabled = true
 // Set placeholder text.
     cell.detailImageView.placeholder.text = "This is a placeholder"
     cell.headlineText = contact.name
     cell.subheadlineText = contact.title
     cell.descriptionText = contact.address
     cell.activityControl.addActivities(activities)

 // Optionally, adjust activity item size (defaults to `CGSize(width: 25.0, height: 25.0)`)
     self.activityControl.itemSize = CGSize(width: 25, height: 25)
 // Optionally, adjust limit on visible items in activity control (defaults to `3`)
     self.activityControl.maxVisibleItems = 3
 // Optionally, adjust activity control spacing (defaults to `29.0`)
     self.activityControl.stackView.spacing = 29.0

 // Implement onActivitySelectedHandler.
    cell.onActivitySelectedHandler = { activityItem in

        switch activityItem {
        case ActivityItem.phone:
            let _ = contact.call()
        case ActivityItem.message:
            let _ = contact.sendMessage()
        case ActivityItem.videoCall:
            let _ = contact.video()
        default:
            break
        }
    }
 }

## Theming Supported style classes

 fdlFUIContactCell
 fdlFUIContactCell_headlineLabel
 fdlFUIContactCell_subheadlineLabel
 fdlFUIContactCell_descriptionLabel

See more

@IBDesignable
@MainActor
open class FUIContactCell : NibDesignableFUIBaseTableViewCell, FUIActivityControlDelegate, FUIContentCopyable

FUIActivityItem is a activity object that activity control supports. Activities supported by default including: phone, email, message, videoCall and detail

See more

public struct FUIActivityItem : Equatable, Hashable

FUIActivityControl is a stand-alone component supporting user activities. By default, it supports phone, email, message, videoCall. FUIContactCell embed with a FUIActivityControl by default.

Code usage:

 //You can create your own activity object if you want.
 let myCustomActivity = FUIActivityItem(icon: UIImage(named: "asset"), identifier: "mycustomer.twilio")
 let activities: [FUIActivityItem] = [FUIActivityItem.phone, FUIActivityItem.message, myCustomActivity]

 //Create a FUIActivityControl object.
 let activityControl = FUIActivityControl()
 activityControl.addActivities(activities)
 activityControl.delegate = self

 //Optionally, set an item size (if nil, intrinsic size of image will be used)
 activityControl.itemSize = CGSize(width: 44.0, height: 44.0)

 //Optionally, set a limit to visible items (useful for hiding items in `.compact` horizontal mode)
 activityControl.maxVisibleItems = 3

 //Optionally, set the inter-item spacing (useful for showing more items in `.compact` horizontal mode)
 activityControl.spacing = 10.0

 //Implement this method in your class to handle action.
 func activityControl(_ activityControl: FUIActivityControl, didSelectActivity activityItem: FUIActivityItem) {
     switch activityItem {
         case FUIActivityItem.phone:
            //do something
         case FUIActivityItem.message:
            //do something
         case myCustomActivity:
            //do something
         default:
            break
     }
 }

## Attention

The delegate object with type FUIActivityControlDelegate is declared as a weak reference. So on deallocation it will be automatically set to nil. To keep it alive as expected, developer should retain the delegate object during its whole execution scope.

See more

@MainActor
open class FUIActivityControl : NibDesignable, FUIBackgroundSchemeSupporting

This protocol provides method for handling activity action in a activity control component.

See more

public protocol FUIActivityControlDelegate : AnyObject

FUIProfileHeader extends UIView to display profile header information. It contains a set of default content views and has different layouts in compact and regular mode.

Scrolling animations are supported if you set up profile header correctly.

Use profile header with or without animation.

Without Animation

Simply set table view’s tableHeaderView.

tableView.tableHeaderView = profileHeader

With Animation

Scrolling animation will be activated only if all the conditions below are met (otherwise there might be some unexpected behaviors):

• Profile header is added to table view as a subview.

tableView.addSubview(profileHeader)

• The table view to which profile header is added has isScrollEnable set to true.

• The table view to which profile header is added is embedded in a navigation controller and the navigation bar is not hidden.

• Large title is disabled in this view controller.

Views Available in FUIProfileHeader:

• imageView: a UIImageView. The image size is set to 80px by 80px. Use image or imageView.imageto set image.

• headlineLabel: a UILabel intended to display a headline text. Use headlineText to set label text.

• subheadlineLabel: a UILabel intended to display a subheadline text. Use subheadlineText to set label text.

• descriptionLabel: a UILabel intended to display a short text. Use descriptionText to set label text.

• detailContentView: a UIView added to the last position in the stack.

Example Initialization and Configuration

In table view controller’s viewDidLoad method:

let profileHeader = FUIProfileHeader()
profileHeader.imageView.image = #imageLiteral(resourceName: "rw")
// To enable a default gradient layer behind the placeholder text.
profileHeader.imageView.isGradientLayerEnabled = true
// Set placeholder text.
profileHeader.imageView.placeholder.text = "This is a placeholder"
profileHeader.headlineText = "Harry Ford"
profileHeader.subheadlineText = "The boy wizard, the boy wizard"
profileHeader.descriptionLabel.text = "This is a description"

//create an activityControl and set to detail content view.
let activityControl = FUIActivityControl()
activityControl.maxVisibleItems = 5
activityControl.itemSize = CGSize(width: 24, height: 24)
activityControl.spacing = CGFloat(36.0)

let phoneActivity = FUIActivityItem.phone
let msgActivity = FUIActivityItem.message
let emailActivity = FUIActivityItem.email
activityControl.addActivities([phoneActivity, msgActivity, emailActivity])
activityControl.activityItems[phoneActivity]?.setTintColor(UIColor.white, for: .normal)
activityControl.activityItems[msgActivity]?.setTintColor(UIColor.white, for: .normal)
activityControl.activityItems[emailActivity]?.setTintColor(UIColor.white, for: .normal)
profileHeader.detailContentView = activityControl

// If no animation is needed.
self.tableView.tableHeaderView = profileHeader

// If you want the scrolling animation.
// self.tableView.addSubview(profileHeader)

Important: There is no way to add a view as a subview of UITableView in storyboard/nib file. We highly recommend that developer’s set up the profile header programmatically, but if you really need to use storyboard/nib file, follow the instructions below:

1. In storyboard/nib file, create a separate UIView which is not under the structure of your UITableView and set custom class to FUIProfileHeader.

2. Set up an IBOutlet property for your profile header so that you can access it in your controller.

3. In viewDidLoad(), programmatically add it to table view as a subview.

@IBOutlet var profileHeader: FUIProfileHeader!

override func viewDidLoad() {
   self.tableView.addSubview(self.profileHeader)
}

Theming

Supported style classes

fdlFUIProfileHeader
fdlFUIProfileHeader_background
fdlFUIProfileHeader_imageView
fdlFUIProfileHeader_headlineLabel
fdlFUIProfileHeader_subheadlineLabel
fdlFUIProfileHeader_descriptionLabel

See more

@IBDesignable
@MainActor
open class FUIProfileHeader : NibDesignable

extension FUIProfileHeader: FUIBannerMessageView.FUIBannerHeaderContainerDelegate