076 A Quick Demonstration to Load a List of Items in a Site View

A QUICK DEMONSTRATION TO LOAD A LIST OF ITEMS IN A SITE VIEW

We want to do a quick demonstration of how to build a little bit more advanced List View the type that you would find in sermon distributor this list view is comprised of templates and layouts And various Integrations so let me Take one of them and change them to Yeah to be our example 00:00:35 So first of all we've just looking at the site views already there so there's Sermon Preachers, Preacher series's Categories category And an API So I think we'll use this preacher Because it is a List query So let's go look at its Dynamic get 00:01:05 Now There are two ways for us to build a List of items in a site View Before I go into the dynamic get I need to just Show you the difference here The one way Which I prefer Is the Ajax Way 00:01:31 Because I can load up to 10000 rows Or items The page Where is the normal way and that's the dynamic Get way Can only load Quite Yeah let's say In a way that is Not too slow 00:01:55 About 100 items per page and so you basically need to use pagination If you don't use pagination It takes very long for the page to load if it's more than 100 items If you wanna load more than 100 items I suggest you go the Ajax Way Ajax I'm using footable plugin And it is Yeah I assure there's other ways to do it like most things It's the thing I The plugin that I have been using for many years now and it's always 00:02:35 been improving the developers are constantly improving it And if we If we open this This URL here let me open that I'm going to refresh the page To give you a full idea of what we're talking about So going to refresh it Now scroll down here is the example we count 1234 and there we go it's now in that moment we waited it loaded 10000 Rows which is a 1000 00:03:12 Pages so if I click here to go to the very last one you see it's 10000 Items and I mean it was very quick in loading those items into this table Why I like FooTable so much is if you Now resize your screen here it will automatically Load those items like this and I know there is such library also in Joomla I realize that And 00:03:48 Are you welcome to use any of those I just like this Components approach Look at our little JavaScript you need On the page To basically need a URL To the column headers which are basically these values And Then you need a URL to get the Json And That's the only HTML you need on the page 00:04:16 And that's as simple it is to load 10000 Items like that in a table It has interesting Opportunity even with regarding to editing if I scroll down here Here It has editing rows Option here And the editing rows option Gives you option to add new rows And edit existing rows 00:04:49 I mean this is crazy load a 10000 size Table of 10000 items and then edit any of them I really think this plugin and it is a amazing Tool And I'm not even that good with JavaScript and I can manage this, so I'm sure all of you would be able to do the same I'm not gonna demonstrate This now I don't have time it's a little bit more complicated I suppose Because I need to show you how to build These And maybe we can look at that but I'm first going to 00:05:32 To look at This normal Implementation that uses Dynamic get because in any case usually if I'm going This way I first build something here and then move it there that's how I do it but that's just me Let JCB write some of the code for me and I move it to the a to the Ajax basically backend Ok So Back to our component 00:06:00 We have a few dynamic gets here already All of them are list queries So That means They are able to get more than one item from the database now The request was made to get all the sermons and not have a filter Which is quite easy I'm gonna use this one And I'm gonna just change this to 00:06:30 To all Then I'm going to the tweak And I'm going to Just remove that one option I'm gonna leave the access level You know what That's just good practice you have access levels in your tables and The user isn't supposed to access an item it's always good to not allow them if you don't want any filter you simply remove this 00:07:04 This And you can even remove the ordering and it will work ok So That is all you need to do to get all of the sermons from the table I am going to Just Remove this one for my purpose we can look at the joint options and they seem ok Leave them that way And then the custom scripting 00:07:35 What I'm doing here With a custom scripting I'm basically setting up links links to the series links to the categories Links to the actual sermon Links to the series And Basically first create a Slug And then This helper route Get sermon route 00:08:01 Get series route and get category route Is a helper class which Is common in Joomla for your router now I'll show you how where to find this class So if we go to The Front-end not the administrative area but the front end and we go down to sermons Are we go to helpers no not helpers Yeah it is actually helpers we going to helpers then we see there is a file called route So we open that And that is where you find the Route helper class 00:08:42 So in our code I have used this placeholder option Which dynamically add the word sermon distributor To helper route And that's simply were Where it builds this class name How does class is loaded into the component dynamically so you don't need to do it again And it's doing it here You see there is registering the class In the main 00:09:14 PHP file of the component So now in this class we have some static functions get Sermon route Get preacher route get preachers plural and preacher Singular And categories and category And Series list And series And API 00:09:43 And that's about it So that's where I get the names if I am going to Target any of these areas I'm coming in here and I can see how it's building it basically just Building the link right it's grabbing the necessary string With the right option the right View Adding the ID then we have a little function here find item Which is in the same class you can search for it it's way at the bottom Just give it a little space there and what this does and I mean if any of you feel you can do this better please make a pull request Let me know 00:10:26 It's trying to find where this item Which we're building this link is maybe linked to a menu So that we can append The menu ID To the item And doing that get the correct URL Ok so that's what that's all about and then like I said we get the ID We dump it in here we add the item ID to the link and we return the link Now Back in the 00:11:00 Code here We add just one little tweak and this is this route Jroute which converts that long URL to whatever the system Setting is currently in regards to your search engine optimisation so that's what this String here Is all about it is basically creating links based on The Slug Now The Slug is a concept which takes the Alias is of an item and it's ID Combines it with his double With this colon between it So that 00:11:40 You can use it in your search engine optimisation router ok So that's what this custom code here is about to we don't need to change this that's what's all this issue here Your filtering doesn't affect this whatever you grab you want these links on the page So you could click to those areas right you want to have it ready to use And then here's little tweak we made for the router To identify the correct Elias So we want to get the correct Elias in relation to These different areas So in this one we going to be in the Sermon we would be doing sermons here So we could 00:12:30 Change this S View to Sermon Like that Because we know Oh wait a minute we don't we will be looking at a list of sermons Ok so that case We not gonna be able to very effectively build a Elias Because at the moment it used to be them the preachers name so that that would have been 00:13:05 Preacher in here this place holder would have been replaced with preacher now because we're not going to be filtering by preacher or category we gonna end up having to just Use the ID because there is No identity if I could say there's no way to link the page to a specific identity So what I would usually do in that case I would just Turn this off and see what is the default behaviour What comes out ok So let's walk through that and see how that works out for us Ok so now we just gonna save as copy 00:13:50 That's we we gonna do leave the Pagination on because like I said you want to be able to return Only at most 100 items per page So save as copy And close So now we have a new List query called sermons all And it is ready to be used And it basically only filters by access this is what I want and That should do that should do it Now let's go to our site views 00:14:27 We basically took this item And We changed it Get That's what we did Wait no not this one This one Because You see it has A Preacher ID but it's actually having a list query for the sermons And then it has 00:14:51 A bunch of custom gets to get the number of downloads the number of sermons and the actual Preachers information So we want to change this now this View To actually just get all the sermons in the system right The first thing will do is will change this To this sermon all Option And will change this also do that to see how they will look Basically looks exactly the same you see so that means we don't really need to change anything Here all of this should still work 00:15:31 Just the way it was If you want to do your own implementation here Then you'll need to Basically use These values to build your own implementation I'm using A lot of Uikit Classes here you see and in these templates this is also what's being 00:15:58 Done so we have many Different implementations but now you see we have these params in here now This params brings to us a certain values linked to the preacher page But we are going to change this this is no longer going to be preacher because it can't have the Same codes name of as another page So we'll have to change this and We gonna change this to all Just like that And change this to all so everywhere where we dealing with params 00:16:40 We need to change the params so we can highlight them And we need to change that Because We are changing this view We calling it all Ok Like that Ok Now this I'm going to call this sermon we are working with sermons 00:17:26 So the context is sermon Because if we check permissions everything you wanna check that against the sermon Permission structure So I'm gonna use sermon there And everywhere else I'm gonna just change this to all and remember this because we're gonna have To go add a whole lot of new fields To this component to have those values ok So just keep that in mind We need we need to have this extra switch 00:18:02 For the all display All Sermons display all sermons display Now Mind you this area shouldn't even be here now Because we are not going to retrieve a Preacher information So we taking that out So we only want you all sermons all sermons And then let's look at this I'm thinking you you know I don't wanna get 00:18:34 Too complicated here So let me change this Back It could work if we just leave it the way it was But no, you know I started going down this way so let me show you what that mean to add these values in It's just that in our Templates sermon table and sermon Grid And sermon list Were also gonna have to look at some param values And make some tweaks 00:19:08 So When we need to take Take basically copy these Down somewhere So we can We can go look at them so it's that one sermon list sermon grid and table Ok So those are the three areas we need to go look at So let's do that now 00:19:44 Save as copy before we do it you want to check out some other things Ok let's see We have some colour settings here This also be changed to all So we just checking for these params right so we can Update everything correctly Now this Is for hits We're not gonna need the hits area 00:20:21 Because When I do targeting a Preacher So I'm going to take this out We don't need this That should be enough Just check that it's not up here Basically take that out as well I had to take that out because it was calling that function hit Which was In in this area here 00:20:55 But I took that out because we not getting a Preacher So since we not getting a Preacher we don't need to increment the hit Because we not counting anything so that's why I took that out I'm here I'm doing some fooTable Styles this is still using an old version of fooTable So This might be a good time to update this but ok I don't have time now so I'm just gonna fall back To this for now Ok So here Everything looks fine I'm gonna say save as copy 00:21:33 Close I did I do that already No that was good ok so now we have a new Site view And we need to go look at these templates So let's go out of here Go to templates So the templates we wanna look at it is these three So it is first one Sermons table it's this one here let's open that Ok 00:22:06 So now we'll see that we have again A whole lot of Params here With Placeholders Site view site view site view so now we gonna have a problem No not really because we are using all so this will update to all Now I have to set this params for sermons Description sermon preacher series category so all of these Params which are actually fields 00:22:46 In the configuration of this component I have to update so this SView will fall back to the view where this Template is going to be used so that the site view Which we working with its code name is all So It's going to fall back to the word All This is what it's going to fall back to Ok so in that template everywhere you see S view it is Going to be call all 00:23:23 So if we go to the sermons list same thing here let's see This seems fine Hear this one It's going to fall back to all Like that So We need to set a value for this and that will then decide what type of List file This will have 00:23:52 The same would go for the grid If we opened preacher not preacher, sermons grid Here We're again seeing A lot of Sview.....Sview Values All over the place And it is going to affect 00:24:15 The component if we don't set these Parameters in the global settings Then it won't find this but it will fall back to zero So you'll still work but it won't load anything because zero means nul ok So it will not load the preacher Values And that's why it might look like things are not working because these Configuration values are not existing yet We need to create them I'll show you how I was hoping to skip that but I realize 00:24:59 It's a helpful thing to know how to do that So For now first step would be to add this Site view So I'm gonna just add a down here Under before sermon I'm gonna say All sermons I'm gonna give it an add menu it has meta Country that has access and it's public ok so I'm adding it in there 00:25:38 To the components site views Save and close so if I compile this now we will Get that view added to the component and everything should be there so Let's do that compile it quickly Ok now I've got it installed So we go here Sermon distributor We have all our values here We have no preachers or sermons or anything created So we won't have a fully functional front end but if we go to menus And we would to change our home 00:26:25 to Sermons all sermons Save and close we'll go back to sermons And options Then to permissions and we search for Site Then we see there is a site All sermons access and it said to allow but sometimes if you're busy updating It may not be set to allow so you must change that 00:26:57 for your public And Now if we go front end OK, we have a error account So let's look at that That's on View HTML 5 No ...HTML PHP 48 let's go look at that no sermons were found So here 00:27:23 Our line 48 in the sermons Views all Line 48 we have a number of sermons now since there is no number in And the system It's giving us an error Let's so let's fix that that shouldn't be that hard to fix We go back To our component in Joomla In the site views 00:27:53 We open all sermons Go to PHP And It's basically This one here So what we can do As we can do a little Check here We say 00:28:20 Something like that we first check is it a array And if it is then We count the array because that's how many sermons they are And we we added here And then here we can just say You know Nul If there's none Ok now we actually don't need these values anymore Because we're not actually 00:28:46 Getting a Preacher ID and preacher ID so I'm gonna remove this as well From from the component Because we don't have a Preacher In this Return set So we don't need those values So I'm taking them out just For good practice And then that should then Get us going 00:29:10 Let's compile it again and install Now we have is no sermons were found We can go back to our component and we can add a few you know values Ok so I've Now added a whole lot of sermons And just Randomly Sorted them We should have enough to work with here 00:29:38 Let's see that's is about About 400 400 sermons Ok so now on the front We gonna diss refresh the front page And wallah We now have all of these showing up And it is all of the sermons And there is going to that specific sermon And then this specific 00:30:12 Series And it's showing us the hits of every sermon And We can page to other pages pagination we can change this to a greater amount Click the wrong button here Ok so now we have 100 Yeah so Our new list is working as we expected So but we still haven't set 00:30:47 The The correct Values here so let me show you what I mean In our display we have this all sermon table colour And we have that set here Then we have also Some If we open the Default page we have this display And 00:31:21 Yeah So the first one Although if it doesn't find one or two it defaults to list So we don't have these values where are these values found They are found in the components Config So if I go to the member of the administrative area And I open the config.xml Then those values should be in this file This file 00:31:52 If we scroll down We will see there sermon default icon Box scroll down scroll down Here's the preacher remember preacher display we change that to all display and list style Now so we see the Preacher's values are here How did it get here In component Builder If I go back to component builder There is an area called component config 00:32:26 If you open that You'll find a whole lot of fields here And It's got tab names that bundle them so the series bundles all these Values So we'll have to Go up all the way here Two preachers Actually preacher singular this one And we'll have to go create each of these Fields except 00:33:02 These Menu this one will have to do This we won't Because we not getting the preacher right so we just need to get the values that are related to the sermon Layout So it's from here Basically from these values. We will need the Will need to get it from after the spacer Table grid list style colour icon description Series 00:33:40 Category Sermon counter Hits Downloads and a switch sermon preacher open so these are the Fields we'll have to go and recreate For the all view So we can copy switch sermons fords Bracket preacher And weekend 00:34:10 Search for this in the field area Basically this string just to be the same As the one you see there So we're going to fields And we type in that string and search And so here are all those values that we need to also create So there are two ways to do this one is I can just copy them all With this batch Option 00:34:44 or the other is to do them one at a time So I'm gonna do them Just let's just do at least one So I need to change a few values here I need to change this to all I need to change that to all And This as well all All Table grid list the default is grid 00:35:17 That's 2 Ok so that is the first one I'm gonna save as copy And then Close Now the second one And So It Goes On I need to Convert these fields For the all view We can leave this to be sermons 00:35:44 Set if sermon hits to be shown should be staying that's right that's right this would be all hits that And then Save as copy Close Now description All Show sermon description This would be fine fine that must be all we change that to all 00:36:11 Save as copy I think that's more than enough Now we go back to the component and to the config area And then underneath The I think I'm gonna do it here Before sermon Right here Just add a few Fields 00:36:40 So it should be marked as Global we gonna change this to all All And then We'll just search for it I will use the The grid And the hits And the description I'm just gonna do those 3 So we are doing that for all The table the hits the description 00:37:10 Save and close And can compile and install Now when we opened sermon distributor backend we go to options We'll now I have a new tab you're called all And we can change this to table grid or List. It is already on list so let's let's change it to table Let's say don't show hits and don't show description And save This value So it is loading it correctly now 00:37:44 As a table Now let's make another change here let's Let's say show hits and show description and let's make it a grid and save Now we refresh it And there we go We have it all now in gridlayout Now it's again Just giving us The last hundred 00:38:11 And we can paginate through them Correctly So it's it's falling Back To The Way It Used To Work except that it doesn't show the actual It's not Filtering it by preacher it just grabbing all of the values Ok I think that's all for now To show you how to Load a a list of values 00:38:41 in JCB With pagination without any filter like For example preacher Ok well thanks for watching