Introduction & Project Setup
In the last episode, we created a simple component for our October CMS website, and that component just displayed the list of actors. In this episode, we are going to add some options to that component so that we can control that list a little bit better.
So we are going to add the number of actors that are getting displayed and also a sort order of those actors. First of all, we have to go to our home page and delete this forked code of our component and set the component right here again.
So I'm just going to delete this, go to components, actor list, and drag it right here. Because if we leave the forked code here, then the changes that we make to the component won't be reflected. So we are going to do that and save this. And just check out our home page and everything works. So we got the list of all the actors. Now we can change the code of our component to display some options in it.
Defining Component Properties
In our actors.php file, we are going to define some properties or options for our component. To do that, you just do public function defineProperties(), and now we return an array with some arrays in it. Every array that we return is going to be an option for our component.
The first option is going to be called results, and we return an array again. And in that array, we just define the title, description, default value, and so on of our options. The title is going to be 'Number of Actors'. The description is going to be 'How many actors do you want to display?'. The default value is going to be zero, and we are going to make it so that when the value of actors to display is zero, then it's infinite. So when someone writes zero in it, then it's going to display all of the actors.
Also, we can define the validation for our option. So since this is the number of actors, we want the user to enter only numbers, so you can add a validation pattern. So this is the regex validation pattern for numbers. And also we can define a validation message, and that message could say something, 'You can only enter numbers' or something like that. And that should actually be it for our first option. Let's just save this and go to the backend to see if we get those options.
Verifying the New Option in the Backend
So as of right now, as you can see, we just got this alias and that's it. Okay, let's refresh the page, and we have an error, of course. Syntax error on line 26. Let me see that. So I have to do this. I forgot the semicolon, of course.
If we go to our home page and click on actors, now we have 'Number of actors'. And if you go to this 'i' or info icon, we can see 'How many actors do you want to display?'. Okay. And of course the default value is currently zero. If I do something here like three and save this, nothing will happen because we still didn't connect that option to the display of actors.
So we have to find a way to take that number that a user inputted into our input field right here and say to October in some way, 'Okay if there is number three right here, then just display three actors.'
Also, if I do something like 'hi' and try to close this, I will get 'Only numbers are allowed' message because we can set only numbers right here. So I'm just going to put number two right here and save this so that I don't have to change it in the future. As you can see, we are still getting, of course, the full list of actors.
Implementing the Logic to Limit Results
Now, how does the displaying of actors or any other type of data work in October when you want to limit the list to some number, so like we want to do here? We want to display, for example, three actors. Well, you can just do this.
So we have our protected function loadActors, and we do Actor::all() and then we do the take method, take() and then the number of actors or items that we want to display. So if I do number three, save this, go right here, now we get only three actors. If I do one, now I get just one actor. So you can see how that works.
Now we just have to find a way not to have this hard-coded in our code, but to read from this option right here. And to do that, we're first going to define a new variable right here, and we're going to call it query. We are also going to need that for sorting options. So we're going to do query = Actor::all(), and right here we are going to return the query.
Now, remember we said that if someone enters zero into our input field, then the number of the results should be all, so all of the actors should be displayed. So we got that condition covered right here.
Now we want to tell October, if the number of actors that we inputted into our input field is bigger than zero, then display that number of actors. So we do that like this. So if $this->property('results')... so results, right? We defined properties right here. So if this property results is bigger than zero, then change the query to be something else. And we already know how to take a number and display that number of items on our page.
So we are going to define a new query right here. So we are saying if $this->property('results') or if results are bigger than zero, then take that property result, so right here, and then display that on the page. So display the number of actors that we inputted in that field.
Okay, let's just save this and see if it works. So remember, I already added number two right here, so we should get only two actors right now. As you can see, we get Ellen Page and Brad Pitt. We can test that out a bit. So let's say five, save it. Now we get five actors. If I put one, save, now it gets just one actor. As you can see, this is so easy.
Creating a Dropdown Option for Sorting
Now we are going to define sort options for our actors list. So in our defineProperties, we want to define another option, which is going to be sortOrder. And it's going to be another array with the title, of course, and the description is going to be 'Sort the actors'.
Another thing we need to do now, we need to define the type of our option. So for sort order, we don't want to have a simple input field, but we actually want to have a drop-down field. So we are just going to define the type of our option, and it's going to be dropdown, and the default value is going to be name ascending.
Okay, now we defined that option, but if I save this and go to our backend, let's just see what happens. Okay, we have 'Sort Actors', but we have nothing in here. So we have to define those options. Remember, we have a drop-down field right here, so we have to define some options for that drop-down field. And to do that, since this is called sortOrder, we create another function that is going to be called getSortOrderOptions().
And in here we return an array of options. So the first one is the default one, so name_ascending. We want to sort actors by name ascending or descending. So this is what the user will see, and this is our, let's say, machine name for that option. And that should be it.
We save this. If we refresh the page... Oh, come on. I forgot the semicolon again. Now if I click here and go to 'Sort actors', as you can see, this is the default value, and then we have 'Name (Descending)'.
Implementing the Sorting Logic
Now, of course, this also isn't going to work until we make it work on our loadActors function. So what I want to do is first define the sort order option. So I want to sort all of the actors and then just take the results and display them. So we don't want to do the results first, we want to do sorting first. To do this, we just do the same thing like we did right here. So I can even copy this one out, and instead of property('results'), I'm going to do property('sortOrder').
And that sortOrder, so we are checking if that sortOrder is equal to name_ascending, then we have to make our query something a bit different. So to do that, I will just do... And now we use a Laravel method called sortBy, sortBy('name'). So the default value of sortBy('name') is going to be ascending by default. And we do the same thing for the descending order. And now instead of sortBy('name'), we do sortByDesc. So sort by descending name. So this is also a Laravel method. Save this.
And now if we go to our home page, and let's just first of all try to display all of the actors. So we put zero right here, save it and display the actors. And as you can see, we are displaying those actors by their first name and in alphabetical order because the default value for that is name ascending. So we got Brad Pitt, Edward Norton, Ellen Page, John Cusack, and so on.
Now let's just try if it's going to work in the descending order. So we sort the actors by descending order. Save this, and now we got those actors again. John Wayne is first because the first letter of his name isn't a capital letter, so it shows up first, just like it did last when the order is ascending. So you would have to account for that if you're building something like this.
Conclusion
And I think that's about it. So you can see how easy actually it is to add options to your components. Of course, this is a very simple example of components, but I think it's a good starting place for you to develop something maybe a little more complex.
Remember, everything we did here will be available for you on GitHub. The link will be in the description below. Also, if you like this video, please give it a thumbs up. If you like the content I put out, maybe subscribe to the channel. Also, ask me questions on Twitter or on Facebook or in the comments below. I hope you guys enjoyed this episode. Thank you for watching, and I will see you in the next one.
