Sitemap

LinkedIn Hakawai. Implement user mentions feature in your iOS Swift application.

5 min readApr 23, 2018

--

Hi, welcome to my little blog about iOS development. In this post, I’d like to tell you about how you can implement mentions in your iOS application written in Swift. I am sure that there are a lot of ways to implement this feature, but I am writing here this post to implement it in more easier steps.

Of course, you can check official docs from the page of the library https://engineering.linkedin.com/ios/introducing-hakawai-powerful-mentions-enabled-text-view-ios, but I think it is little outdated. I spend some time to implement the functionality of the mentions plug-in in Swift. This post does not pretend to be the exact documentation, but in the end, you will implement mentions future in your iOS Swift app. Also, I will show how to implement custom chooser view. So, without wasting much more time lets dive deeper into the steps.

Basic steps to implement mentions future with HAKAWAI:

  • Create your UIViewController with instance of HKWTextView and assign its externalDelegate property to this view controller, if you want to implement the textView delegate functionalities in same view controller class;
  • Create a class that conforms to HKWMentionsEntityProtocol for returning entities for searching and for mentions arrays;
  • Create a helper class which implements the required functionalities mentioned in HKWMentionsDelegate;
  • Assign the HKWMentionsPlugin instance’s delegate property to an instance of your helper class;
    Set controlFlowPlugin of textView instance to register the plug-in.

So, let’s dive deeper into each step.

First, create a UIViewController, drag UITextView from objects library to the controller and assign the class to HKWTextView

Now, create a new class, for example, called User and make him implement HKWMentionsEntityProtocol

You’ll see an error that your class doesn’t conform to the HKWMentionsEntityProtocol, but don’t worry, we will fix it.

If you will go to the declaration of the HKWMentionsEntityProtocol than you will see that it has 3 required properties that we have to implement(return).

Press enter or click to view image in full size

So, just implement it. If you like Swift extension as I like, just make one, and implement required functionality in this extension, otherwise, you can do it directly. Swift extensions is a great future of language that allows you to group your code by logic, more you can read here: https://developer.apple.com/library/content/documentation/Swift/Conceptual/Swift_Programming_Language/Extensions.html

In the code above, we declare basic user fields and implement the protocol in extension. We just return our fields in this method. Note this is not required for implementation entityMetadata, just example, you can put here what you need. And basic constructor for creating entities. Note, if you already have the class that entities of which you want to be in the mentions list, you can just make an extension for your model class and implement these methods.

Now we are going to create a helper class that conforms to the HKWMentionsDelegate.

You can call it MentionsManager, or whatever you want.

Press enter or click to view image in full size

We created class MentionsManager and declare here a static instance for future register im mentions plugin. In the extension we implement HKWMentionsDelegate.

We created class MentionsManager and declare here a static instance for a future register in mentions plugin. In the extension we implement HKWMentionsDelegate.

It contains 3 required methods that you need to implement. These methods are asyncRetrieveEntitiesForKeyString, cellForMentionsEntity and heightForCellForMentionsEntity, detail information of these methods, you can read in the protocol, but the short version is:

  • asyncRetrieveEntitiesForKeyString — here you should provide data for some keystring that user types into the textview. At the end of this methods, you should call completionBlock and pass to id your data that conforms to the HKWMentionsEntityProtocol protocol, also pass in YES or NO depending on whether you expect to append additional results later.
  • cellForMentionsEntity — Return a table view cell to be displayed for a given mention entity in the chooser view. This is true if you use default chooser view, but if you want to use custom one you can just return nil.
  • heightForCellForMentionsEntity — and the last one, as I think such clear from the title, returning height for the mentions entity.

On the screenshot above, in the asyncRetrieveEntities method, we just created an array with two user entities. This is a basic example, but here you can load your data from some repository layer class.

In the cellForMentionsEntity method, we just register our cell (UserTableViewCell) in our tableview, and then dequeue it and set nameL(UILabel) property to display entity name, that we return from method entityName() :) Note, that UserTableViewCell here is just a custom cell, that I want to use to show how to implement custom chooser view.

And finally return 44.0 in the heightForCellForMentionsEntity methods. That all about required methods in the HKWMentionsDelegate.

The last actions that we need to do are to create plugin instance and set its properties.

Press enter or click to view image in full size

We created mode for displaying our mention chooser view, then we create control chars when user will type this (or one of) symbol, we should show a list of suggestions. then we create our plugin, with these properties, and with colors for different modes. Assign newly created plugin to our var, then register plugin in our textview, and finally assign a delegate property to our MentionsManager shared instance.

So, lets build the app and see the results.

Press enter or click to view image in full size
Initial state, empty textview
Press enter or click to view image in full size
Typed @ symbol and see mentions.
Press enter or click to view image in full size
Added (clicked on name) mention to the textview.
Press enter or click to view image in full size
Select the mention

So, as you can see, we implement mentions future with HAKAWAI library pretty easy. Feel free to ask, if you have any

--

--