038 Setup Site Edit View in JCB

SETUP SITE EDIT VIEW IN JCB

Adding Admin View To Front-End Site

Hi. I'd like to quickly give you a tutorial on how to add an admin view to the front end of your site. There can be editing and submission of the front end of this specific admin view. To illustrate this, I'm going to use the public version of JCB, it has this demo version in it. First I'll compile it and install it to the local Joomla website. We can see what happens. Install it, open it. Here we have the demo version that is publicly available and it has a admin view called "Looks". 00:01:07 If you go to the list view of the admin view, called Looks, you see there is none, we will create new. There is a description box in the new view. A more item, where you can click, and see some custom fields: email, mobile phone, date of birth, image, website. And your normal publish, permission, structure for the view, 00:01:37 and the name field. Now that's what I referred to as the admin view. It's this combination of fields working together in one view.

How To Add Editing Area

Now what I will show you is how to add editing area, these three tabs to the front end of your site that it will function like a form. Who you would allowed to access the form will depend upon the permissions structure. You will see the permission structure is what 00:02:14 controls, who can edit and who can add items to a specific admin view. Currently as you can see your public cannot edit this, if we created an item they cannot edit it. There's an item level on permissions. If I close out then you'll see in options there is also a global control on permissions. The global control of permissions 00:02:46 is also, if you want public to be able to submit to this form, you need to allow them to be able to create. You would say allow, and the public is allowed to create. You will see that most components has more than one view. This one has only one it's called look. So you'll also have to over here(look create) 00:03:13 say allow, and if you want them to edit existing submissions. There is the edit state, edit own, created by, all these things in the global spec, as well as in the local edit of the view.

Two Switches

There are two switches here. One is a global switch, and one that is specifically focusing on the view. If you cannot access the view on the front end after we've created it, it is would need to come back to this area and sort out the permissions for the specific group who should have access to the specific view on a front end. 00:03:57 This permission structure is quite intense and extendable. You can target specific groups with specific permissions. For every view the JCB builds in the admin, and site. I'm not going to make any further changes.

Demo Component - Settings

We are in the demo component. I'm going to go back to JCB and I'm going to flip one switch and then JCB will develop or write the code 00:04:34 for the site end of this component. So I'm going back to JCB. Going to components and opening the component. And now in the component there is an area called settings where all your admin views are linked. I'm going to open that. Usually there are this little bug in Joomla, which if you open it the first time, it doesn't reflect the original setting. I usually open it, cancel it, and then open it again. You'll see that the original setting is 00:05:17 back. You will see that edit create site view must be set to yes. If it is set to yes, then it means that it's going to create a site view of view - look, as so that you can edit it on the site end and not only in the admin area and it also means create items. Save this 00:05:44 and then also save and close. Go back to compiler, compile demo. Install it.

Code - Controller - Model - View

Now let's go look at the code. Looking at the demo websites folder structure, we are going to components. We'll see that there is a com_demo folder. 00:06:19 We will see there is the models as well as the controllers as well as the views. This is the view that was dynamically generated by JCB. The view, the model and the controller are called look. You can open (controller look.php) to see what was the code that was written. 00:06:49 You can see it looks very similar to the admin area except that it's been slightly modified for your front end and it's requirements. As you can see we were adding some CSS classes and JavaScript from the back end. Here is the model, 00:07:16 getItem, getForm, and the controller. We are showing you the code what was created. The fact that this was created, doesn't mean that there is a set of links that you can click and edit the forms which was submitted or that there is a link to create any. These things is what you need to do manually. 00:07:51 authores

Manually Add Links

Let's show you some of that. There is two views called under site views, one is called looks and other one is called looking. As you can remember the one we looked at here, which I set was automatically generate is called look, so that one isn't showing because it was a tick box that created this whole view model and controller. You don't need to build the look view again. 00:08:21 You need to get links to it. In looks we are using a Dynamic Gets, and in looking. Let's go to the Dynamic Gets page. There is one called looks and looking. Let's go to the looks Dynamic Gets. It got a custom script area were we're asking whether the items are set whether there are items. Then we looping through them, and during the looping process we determine by $canDo script, 00:09:10 you will see in the helper class there's a getAction function.

The getAction function asks whether look item, where the current user has the edit option to the specific look item. If it does it in this little script, it builds an edit look button. And dynamically adds that to the edit link, which is coupled to the item, and then continues on. It dynamically generates the button for edit in the dynamic get. 00:09:48 You could have done that anywhere. I decided to do it here, because then it gets added to the model, which is more where your logic, for lots of your data structure should be placed. If you go back to the site views, open the looks site view. You will see that we got the main get set as looks. If you scroll down, 00:10:25 in this area we are looping through the look items, and echoing the edit link after the description. That means the link that we built in the Dynamic Get which is the button, will either be empty and therefore show nothing. If the user doesn't have the permission to edit it, or it will show a button. 00:11:04 As I look at this I haven't added a link for creating new looks. The same would be required to do that.

• Add A Button To Create New Looks

You could use the same button script, copy that. Here before the table, you could 00:11:29 add a button to create new looks. All you would need to change is this link here ((index_php?option_com_"Component") that it will have an id to zero. It will create a new look. That's a quick tutorial on how to add an editable 00:11:53 admin view to the site end of your component. Then link it into your side view, that you can click on a button and edit a specific id view or create more. Then control that with this getAction helper class method, which gives you whether it can be edited. You can go look at this helper class in the code. 00:12:23

Let me just quickly open that for you. Here in the code, in helpers, we open demo.php. We scroll down until we get the method called getAction. 00:12:50 Around 540 depends on how much the customer scripting there is been added. You can go through this logic to see that we are dealing with a number of concepts and trying to determine the permission to edit own and to create. It all gets stored and gives back to you 00:13:17 in the result set. You could also echo out the result, var dump or something in the look to see exactly what is the result that you get from that structure.

If we go back to the looks view. 00:13:42 Let's just open that model. You will see that the custom scripting we looked at, gets added (see video) from JCB that custom scripting that creates the button. You could come in here, and you can add a var_dump);exit; and take $cando 00:14:06 and login as any kind of user on the site, then when you load the page, it should show you the $cando list of that specific user group. Also keep in mind that here's the authorise setting that is applicable to the looks site view. And it also controlled in the permission structure. 00:14:33 There's a lot of permissions automatically being added to components build in JCB. You need to always keep that in mind. It might look like things don't work while it works very well. You just haven't kept in mind that there is a permission structure, and that you need to adapt that permission on structure as it is fitting to your project.