Laravel Mentions
This episode is for members only

Sign up to access "Laravel Mentions" right now.

Get started
Already a member? Sign in to continue
Playing
10. Setting up Tribute and mentionable users

Episodes

0%
Your progress
  • Total: 1h 52m
  • Played: 0m
  • Remaining: 1h 52m
Join or sign in to track your progress

Transcript

00:00
We're now going to add the ability to show a list of usernames when we type the trigger symbol like at in our case and this is going to list out a bunch of users in fact it will list out all of
00:12
the users in our application. We'll probably come back to this later to either filter this down implement some sort of asynchronous way to load these in so we don't have a huge list of usernames in here by default but we'll get this working to start with and then we can always tweak it later. The question is how are we going to do this? Well probably one of the best solutions that I've found
00:36
is a package called Tribute. This allows us to very easily add in native mentions with JavaScript. Let's go ahead and set this up and I'll show you how to pull it into an Alpine component which of course we can then transfer through to our form. Okay so the first thing is to go ahead and install this so let's do an npm install on Tribute.js and just wait for that to finish and then we're going
01:01
to come over to something like app.js something that we just generally load in and we're going to go ahead and import this and just set it as a global window object. Not the ideal solution but let's go ahead and get this working first and we can always fix this later. So we're going to go ahead and import Tribute from Tribute.js that's the first step. We then want to go ahead and bind
01:25
this to the window object so let's say window.tribute and we'll just set that to that tribute instance and then we can just use that directly within Alpine. Now what we also need to do is pull in the styles associated for this. We're not going to customize this at all just yet but we want to import these. Now we can either do that directly within our style sheet or we can do
01:45
it directly within javascript it doesn't really matter. So let's pull in our from Tribute.js dist so distribution folder and tribute.css and that will pull in all the styles that we'll need to get this working. Okay now that we've got this pulled in what we can do is make the container for our text area a tribute instance or we can set it up here and point to our text area within this
02:11
component. So we're going to make this a Alpine component so it kind of makes sense to use Alpine here since we're working with Livewire as well and basically just when we initialize this we just want to start to set tribute up. So I'm going to use single quotes here just makes it a little bit easier to write any of the javascript that we need inside of here. Now to set this up let's go ahead
02:34
and create out a tribute variable and we're just going to say new tribute so pretty much the window the the tribute value from the window object that we've just created. Now all we need to do here is just pass in a list of options so let's just keep this simple to start with we're going to choose a trigger so for us that is going to be an app symbol pretty
02:58
straightforward. Second we have a list of values now these are the values that we want to pass in like the username and stuff like that so basically what we need inside of here is an array of objects which contain a key and a value so the key is going to be something like the user's name so let's just do that double quote and the value is going to be the username so let's say Alex
03:28
so we can just create two of these as an example and then we'll actually pull these from our database so the first one's going to be Alex the second one is going to be Tabby. So we can further customize this which is what we're going to do in a second but now that we've got this set up all we need to do is bind it to our text area for this we just need to set this
03:50
as a ref so we just have some way to reference it and I'm just going to call that text area and then inside of our alpine init we can say tribute attach refs and text area and that will attach tribute to our text area that should be everything we need there's a bunch of ways that you can customize this we'll do this in just a second but for now at least this should work
04:16
nicely let's just go ahead and check that we don't have anything in our console and yeah everything looks good here so let's go ahead and just try this out so let's say hey I'm going to type the at symbol and yeah sure enough you can see this is giving us a list of them two hard-coded options we added and if I hit enter on any of them that goes ahead and pre-fills in the value rather than
04:40
the key so you can customize this and probably the only thing we're going to be customizing here is the menu item template that's what we've just seen a moment ago when we went ahead and started to type the trigger so what this will allow us to do is get each of the items in that we've defined in this list which we'll be pulling in from the actual database shortly and we can just return a
05:03
custom way that we want to display these so under item we've got the original which is the object just here so maybe I want to show at and then the username so that's the value then I want to bind on maybe some parenthesis and then in here I want to output the item original and key so that's the name of the user so just by doing that you can customize how this looks so let's say hey at and
05:34
yeah that didn't work so let's just have a look here yep I've used a dot to concatenate there try that one more time and there we go so you get something that's a little bit more readable and you can actually see the user's name as part of this as well just add a space in there and I think we are good so yeah there we go it's a little bit easier to see okay so next up we obviously don't
05:56
want to hard code these values we want these to actually come from our database now how do we do this well what we're going to do for now is just create out a really simple class so I'm going to create out a directory here called mentions and I'm going to create a php class here called mentionables and the whole point of this class is just going to be to return all of the mentionable things
06:24
that we can have in our application now this isn't the ideal solution because if you have say thousands of users this is obviously going to return thousands of usernames and names which is then going to get injected into your html and it's going to be pretty slow we'll come up with a better solution later but let's just get this working at least for now and this would even be
06:45
fine if you had a few hundred or a couple of thousand users okay so we've created this class mentionables I've created a static get method which is going to allow us to access this really conveniently we're going to use the user model to get all of the users now we could even scope this so you could say select for example and select only the username and just to make this a little
07:07
bit quicker but we'll just grab everything for now and then we're just going to map through this and let's just use a short function here we'll get the user in here for each iteration of this and let's return this in the format that we're expected to return that here so we've got key is the name and value is the username so let's say key username and let's say value
07:38
user and username okay great so we could write a test for this but let's just inject this directly into the values here now we can't just dump this out we have to encode this properly and luckily blade has a json directive that we can use to do that and encode that to json and then in here all we need to do is just reference the full path to mentionables so I don't usually reference things
08:05
directly like this within blade but for things like this like one-off things it's absolutely fine and we're just going to say get so that's going to return a list of them formatted users json encode it and that will be exactly what we just did but obviously pulling from our database so we shouldn't actually see any difference here because of course we've got these users
08:25
but if we had another user went ahead and signed up for an account for example let's say Mabel signed up for an account let's just create this email out and of course this is unique save that out head over and say hey at sure enough we get Mabel in there and tribute filters this down as we type as well so it will actually search through all
08:50
of these values so this is good enough for now now we can go ahead and just say hey Alex and Mabel for example we can go ahead and post that and we know that's going to go ahead and trigger it's going to send an email to everyone and everything is now working but we now have a nice client-side solution to showing a list of usernames

Episode summary

In this episode, we add the ability to mention users in a text area using the '@' symbol, just like you see on many social media platforms. We start by setting up the Tribute.js library, which easily handles "mention" autocomplete functionality. You'll see how to install it via npm, pull it into your JS (we globally add it to window for now), and grab its styles so everything looks right.

Next, we hook Tribute into our Alpine component by providing it with a hardcoded list of users—just to get things working initially. We walk through customizing how the suggestions look (like showing both username and full name). Once it’s working with those example users, we move onto pulling the real list of users from our database. For that, we make a simple PHP class called Mentionables that gathers all users and returns them in the format Tribute expects. We then JSON-encode this data in Blade and pass it to our frontend.

We wrap up by testing the setup: add a new user and watch them appear in the mentions dropdown, and show how Tribute filters as you type. The solution still needs optimizing for larger user bases (we point out future improvements), but we've now got a solid, working MVP for user mentions in place!

Episode discussion

No comments, yet. Be the first!