UI libraries / InstantSearch iOS / Widgets

About this widget

The QueryRuleCustomData widget displays custom data from Rules.

You may want to use this widget to display banners or recommendations returned by Rules, and that match search parameters.

Examples

Instantiate a QueryRuleCustomDataConnector and launch an initial search on its Searcher triggering a Rule that returns custom data.

1
2
3
4
5
6
7
8
let searcher = HitsSearcher(appID: "YourApplicationID",
                            apiKey: "YourSearchOnlyAPIKey",
                            indexName: "YourIndexName")
let bannerViewController = BannerViewController()
let queryRuleCustomDataConnector = QueryRuleCustomDataConnector<Banner>(searcher: searcher,
                                                                        controller: bannerViewController)

searcher.search()

Parameters

searcher
type: HitsSearcher
Required

The Searcher that handles your searches.

interactor
type: QueryRuleCustomDataInteractor<Model>
default: .init()
Required

The logic applied to the custom model.

controller
type: ItemController
default: nil
Optional

The Controller interfacing with a concrete custom data view.

presenter
type: Presenter<SearchStats?, Output>
default: nil
Optional

The Presenter defining how a model appears in the controller.

Low-level API

If you want to fully control the QueryRuleCustomData components and connect them manually, you can use the following components:

  • Searcher: The Searcher that handles your searches.
  • QueryRuleCustomDataInteractor: The logic applied to the custom model.
  • ItemController: The Controller interfacing with a concrete custom data view.
1
2
3
4
5
6
7
8
let searcher = HitsSearcher(appID: "YourApplicationID",
                            apiKey: "YourSearchOnlyAPIKey",
                            indexName: "YourIndexName")
let queryRuleCustomDataInteractor: QueryRuleCustomDataInteractor<Banner> = .init()
let bannerViewController: BannerViewController = .init()

queryRuleCustomDataInteractor.connectSearcher(searcher)
queryRuleCustomDataInteractor.connectController(bannerViewController)

Customizing your view

If you want to use a third-party input view, or you want to introduce some custom behavior to the already provided UIKit component, you can create your own controller conforming to the ItemController protocol.

Protocol

func setItem(_ item: String?): Function called when new metadata are received.

Example

Let’s assume your custom JSON data contains a banner URL that can be decoded to the following structure:

1
2
3
struct Banner: Decodable {
  let bannerURL: URL
}  

You could implement the BannerViewController presenting the banner image as follows:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
class BannerViewController: UIViewController, ItemController {
  
  let bannerView: UIImageView = .init()

  override func viewDidLoad() {
    super.viewDidLoad()
    // some setup layout code
  }
  
  func setItem(_ item: Banner?) {
    guard let bannerURL = item?.bannerURL else {
      bannerView.image = nil
      return
    }
    URLSession.shared.dataTask(with: bannerURL) { (data, _, _) in
      self.bannerView.image = data.flatMap(UIImage.init)
    }.resume()
  }
  
}

SwiftUI

To create a rule custom data view with SwiftUI start with implementation of the ItemController containing your custom model as a published property.

1
2
3
4
5
6
7
8
9
class BannerObservableController: ObservableObject, ItemController {

  @Published var banner: Banner?
  
  func setItem(_ item: Banner?) {
    self.banner = item
  }

}

Then connect this controller to the QueryRuleCustomDataConnector or QueryRuleCustomDataInteractor and build a SwiftUI view presenting the fetched custom model.

1
2
3
4
5
6
7
8
9
10
11
struct ContentView: View {

  @ObservedObject var bannerController: BannerObservableController

  var body: some View {
    if let bannerURL = bannerController.banner?.bannerURL {
      // present a banner using the fetched URL
    }
  }

}
Did you find this page helpful?