Download XIB’s Templates Single Item \ Horizontal Item Smartfeed Header Cell


Important: App developers integrating with Smartfeed can set custom UI template per “widget id”. This process requires understanding in how Smartfeed is structured (“parent widget” with “children widgets”). Please contact your Partner Manager for more information.

App developers integrating with Smartfeed can override the default UI and use their own custom UI template or “layout files”. The override is done per “widget id”.


Download XIB’s Templates

Download the template xib files (v4.9.1) from here


Items in the feed can be divided into 2 types:

1) Single item – one item in a line, example:

2) Horizontal item – multiple horizontal items in a line, example:


Here is how custom UI works for Smartfeed:

1) Single item – you can override the xib file for the entire item. Please note, xib file must contain exactly one top level object which must be SFTableViewCell or descendent of SFTableViewCell

2) Horizontal item – you can override the xib file for each item in the “horizontal view” but can NOT customize the entire view. Please note, xib file must contain exactly one top level object which must be SFCollectionViewCell or descendent of SFCollectionViewCell


Step 1 – Download XIB Files As Base For Override

The first step to setup custom UI is to start working with the default xib layout template Outbrain use in the Smartfeed for the specific layout you plan to override. Use the relevant custom layout xib file according to the item “widget id”. For example, in order to add custom layout for single recommendation, use the template file: SFSingleWithTitleTableViewCell.xib. Please contact your TAM for more information.

You will probably find iOS Smartfeed UI Templates page useful.


Step 2 – Edit xib File


Important: It will be very helpful to take an example from the Smartfeed sample app.

1) Use one of the template files you just downloaded as the base file for override and change the file name to have “App” in the prefix, for example “AppSFSingleWithTitleTableViewCell”.

2) Please note, for “Single item” – the xib class for UITableViewCell has to be SFTableViewCell or descendent of SFTableViewCell. For “Horizontal item” – the xib class for UITableViewCell has to be SFCollectionViewCell or descendent of SFCollectionViewCell.


3) SFTableViewCell has Outlets, you must make sure all Outlets are connected, see example:

4) Set the cell reusable identifier as “AppSFTableViewCell” or something similar (you’ll need to use it in the next step).


Step 3 – Code

Important: run the following code after SmartFeedManager instance is already configured: (see setupCustomUIForSmartFeed() in the sample app code).


Override Template For a Widget ID


let bundle = Bundle.main
let singleCellNib = UINib(nibName: "AppSFSingleWithTitleTableViewCell", bundle: bundle)
self.smartFeedManager.register(singleCellNib, withReuseIdentifier: "AppSFSingleWithTitleTableViewCell", forWidgetId: "SDK_SFD_1")


Override Template For a Template Type


let bundle = Bundle.main
let singleCellNib = UINib(nibName: "AppSFSingleTableViewCell", bundle: bundle)
self.smartFeedManager.register(singleCellNib, withReuseIdentifier: "AppSFSingleTableViewCell", for: SFTypeStripWithTitle)


List of SFItemType’s

typedef enum
{
    SFTypeSmartfeedHeader = 1,
    SFTypeStripNoTitle,
    SFTypeCarouselWithTitle,
    SFTypeCarouselNoTitle,
    SFTypeGridTwoInRowNoTitle,
    SFTypeGridThreeInRowNoTitle,
    SFTypeGridTwoInRowWithTitle,
    SFTypeGridThreeInRowWithTitle,
    SFTypeStripWithTitle,
    SFTypeStripWithThumbnailNoTitle,
    SFTypeStripWithThumbnailWithTitle,
    SFTypeStripVideo,
    SFTypeStripVideoWithPaidRecAndTitle,
    SFTypeStripVideoWithPaidRecNoTitle,
    SFTypeGridTwoInRowWithVideo,
    SFTypeBadType
} SFItemType;


Smartfeed Header Cell

It’s also possible to customize the Smartfeed header cell by going through a similar process as described above, see the step by step guidelines here:

1) Use the template of SFTableViewHeaderCell.xib for manipulating the UI.

2) Change the name of the file SFTableViewHeaderCell.xib –> AppSFTableViewHeaderCell.xib

3) Add SFTableViewHeaderCell.xib to your app code

4) Use the following code to customize the header:


let bundle = Bundle.main
let headerCellNib = UINib(nibName: "SFTableViewHeaderCell", bundle: bundle)
self.smartFeedManager.register(headerCellNib, withReuseIdentifier: "AppSFTableViewHeaderCell", for: SFTypeSmartfeedHeader)