Chat UIKit iOS v3
Chat UIKit iOS
Chat UIKit
iOS
Version 3

Search messages

Copy link

You can search for messages within a group channel using the SBUMessageSearchViewController class, which displays the message search bar and the search results. The message search view is accessible through the Search in channel option in the SBUGroupChannelSettingsViewController class. Once you tap on one of the search results in the message search view, a new group channel view with the selected message as highlighted appears.

Note: If you set the starting point of your chat service to be the channel list or group channel, you can seamlessly guide your users to the message search view.


Initialize

Copy link

You can start building a message search view through the SBUMessageSearchViewController class. Use the init(channel:) initializer to create the instance and display the view as shown below.

let messageSearchVC = SBUMessageSearchViewController(channel: {CHANNEL})
let navigationController = UINavigationController(rootViewController: messageSearchVC)
present(navigationController, animated: true)

The following items are key elements of SBUMessageSearchViewController that are used to create a functional message search view.

Module components

Copy link

In the SBUMessageSearchViewController class, SBUMessageSearchModule and its components are used to create and display the message search view. The module is composed of two components: HeaderComponent and ListComponent.

Property nameTypeDefault value

HeaderComponent

SBUMessageSearchModule.Header

SBUModuleSet.MessageSearchModule.HeaderComponent

listComponent

SBUMessageSearchModule.List

SBUModuleSet.MessageSearchModule.ListComponent

When the loadView() method of the view controller is called, the module components get added to the view in the setupView() method of the Sendbird UIKit's view life cycle. Then, the configure method of each module component is called to set the property values and display the view.

HeaderComponent

Copy link

The HeaderComponent in the message search view shows a search bar in the titleView area and a button that searches for the keyword in the user's group channels. Each property corresponds to the elements in the NavigationBar of SBUMessageSearchViewController.

The following table shows the parameters of the configure method of the HeaderComponent.

Parameter nameType

delegate

SBUMessageSearchModuleHeaderDelegate

theme

SBUMessageSearchTheme

Note: To learn more about the delegate and the properties of the HeaderComponent, go to the API reference page.

listComponent

Copy link

The ListComponent shows a list of search results that contain the keyword. When a user taps on one of the results, it takes them to the group channel view with the keyword as highlighted. The following table shows the parameters of the configure method of the ListComponent.

Parameter nameType

delegate

SBUMessageSearchModuleListDelegate

dataSource

SBUMessageSearchModuleListDataSource

theme

SBUMessageSearchTheme

Note: To learn more about the delegate, data source, and the properties of the ListComponent, go to the API reference page.

View model

Copy link

The SBUMessageSearchViewController class uses a view model that is a type of the SBUMessageSearchViewModel class. The view model is created in the initializer of the view controller through the createViewModel(channel:) method.

The following table shows the parameter of the createViewModel method.

Parameter nameTypeDescription

channel

BaseChannel

Specifies the channel value. (Default: nil)

Note: To learn more about the methods and the event delegates of the view model, go to this API reference page.

SBUMessageSearchViewController properties

Copy link

To learn more about the properties of SBUMessageSearchViewController, go to the API reference page.


Customization

Copy link

You can customize the message search view by changing the view controller, module component, and view model that correspond to this key function.

View controller

Copy link

There are two ways to customize the view controller: change the default view controller value in the global SBUViewControllerSet class or set a single-use custom view controller in the key function.

The custom view controller in the code below is used in the following customization examples.

class CustomViewController: SBUMessageSearchViewController {
    // Implement custom code here.
}
  1. Change the value of SBUViewControllerSet.MessageSearchViewController.
SBUViewControllerSet.MessageSearchViewController = CustomViewController.self

// The view controller will now use `CustomViewController` as the default value.
  1. Use a one-time custom view controller in the message search view.
let messageSearchVC = CustomViewController(channel: {CHANNEL})
let navigationController = UINavigationController(rootViewController: messageSearchVC)
present(navigationController, animated: true)

Module component

Copy link

There are two ways to customize a module component: change the default module component type in the global SBUModuleSet.MessageSearchModule class or set a single-use custom module component in the view controller.

The custom header component in the code below is used in the following customization examples.

class CustomHeader: SBUMessageSearchModule.Header {
    // Implement custom code here.
}
  1. Change the value of SBUModuleSet.MessageSearchModule.HeaderComponent.
SBUModuleSet.MessageSearchModule.HeaderComponent = CustomHeader.self

let messageSearchVC = SBUViewControllerSet.MessageSearchViewController(channel: {CHANNEL}})

// The `headerComponent` in `SBUMessageSearchViewController` will now use `customHeader` as the default value.
  1. Change the module component in SBUMessageSearchViewController.
let messageSearchVC = SBUViewControllerSet.MessageSearchViewController(channel: {CHANNEL})
messageSearchVC.headerComponent = CustomHeader()

Note: To learn more about the methods of SBUMessageSearchModule, go to the API reference page.

View model

Copy link

In order to use a customized view model or customize the existing view model's event delegate, you must override the view controller.

  1. Use a customized view model.
class CustomViewController: SBUMessageSearchViewController {
    override func createViewModel(channel: BaseChannel) {
        // Set up viewModel to customized view model object.
        self.viewModel = CustomViewModel()

        // Implement your code here.
    }
}
  1. Customize the view model's event delegate.
extension CustomViewController: SBUMessageSearchViewModelDelegate {
    override func searchViewModel(
      _ viewModel: SBUMessageSearchViewModel,
      didChangeSearchResults results: [BaseMessage],
      needsToReload: Bool
    ) {
        // Implement your code here.
    }
}

MessageSearchQueryBuilder

Copy link

In SBUMessageSearchViewController, you can customize the query data used to search for keywords in the channel by using MessageSearchQueryBuilder. There are two ways to customize the query builder: use a customized query builder in the view controller or override the createViewModel() method.

  1. Use a customized query builder.
let messageSearchVC = SBUMessageSearchViewController(channel: {CHANNEL})
messageSearchVC.customMessageSearchQueryBuilder = {builder in
    builder.exactMatch = true
    builder.limit = 10
    // Implement your code here.
}
  1. Override createViewModel().
class CustomViewController: SBUMessageSearchViewController {
    override func createViewModel(channel: BaseChannel) {
        // Set `viewModel` to the `CustomViewModel` object.
        self.viewModel = SBUMessageSearchViewModel(
            channel: channel,
            messageSearchQueryBuilder: { builder in
                builder.exactMatch = true
                builder.limit = 10
                // Implement your code here.
            },
            delegate: self
        )
    }
}