038 Setup Site Edit View in JCB

Jump to bottom Edit New page

Amigo edited this page Oct 7, 2019 · 17 revisions

SETUP SITE EDIT VIEW IN JCB

Adding Admin View To Front-End Site

00:00:00 (Click on these time links to see Youtube video)

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. The public version of JCB which contains this Demo Version is being used to illustrate this. First, it is compiled and installed to the local Joomla website. Install it, open it. Here is the Demo Version that is publicly available and it has an Admin View called "Looks". 00:01:07 If you go to the ListView of the Admin View, called 'Looks', there is none. Create 'New'. There is a description box in the New view and 'More' item, where you can click, and see some custom fields: 'email', 'mobile phone', 'date of birth', 'image', 'website' and the normal Publish, Permission, Structure for the view, and the name field. Now that is what has been referred to as the Admin view. It is this combination of fields working together in one view.

How To Add Editing Area

To add an editing area, (these three tabs) to the front end of the site that it will function as a form will be explained. To determine who can be allowed to access the form will depend upon the permissions structure. The permission structure controls who can edit and who can add items to a specific Admin view. 00:02:14 Currently the public cannot edit this, if an item is created they cannot edit it. There is an item level on permissions. If it is closed then it can be seen that there is also a 'Global' control on permissions in 'Options'. The Global control of permissions is also if you want the public to be able to submit to this form, it is necessary to allow them to be able to create. 00:02:46 Set it to 'Allow', and the public is allowed to create. Most components have more than one view. This one has only one; it is called 'Look'. Over here('Look create') say allow, and if you want them to edit existing submissions. 00:03:13There 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. One is a global switch and one that is specifically focusing on the view. If the view cannot be accessed on the front end after it has been created, it is necessary 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. Specific groups can be targeted with specific permissions for every view that JCB builds in the Admin as well as in the Site views. Cancel out, no further changes will be done and it returns to the Demo Component.

Demo Component - Settings

In JCB there is a switch that can be flipped for JCB to write the code for the site end of this component. So go back to JCB and to components and open the component. In the component, there is an area called 'Settings' where all the admin views are linked. If that is opened, it may be seen that there is usually this bug in Joomla, which if it is opened for the first time does not reflect the original setting. I usually open it, cancel it, and then open it again and the original setting is back. 00:05:17 You will see that 'Edit/Create Site View' must be set to 'Yes'. If it is set to 'Yes', then it means that it is going to create a Site View of this 'Look' so that it can be edited on the site end and not only in the Admin area and it also means Create items. Save this and then also save and close. Go back to compiler, compile demo. Install it.

Code - Controller - Model - View

Looking at the demo websites folder structure in the code, there is a com_demo folder under components. 00:06:19 There are the Models as well as the Controllers and the Views. This is the View that was dynamically generated by JCB. The View, the Model, and the Controller are called 'Look'. Open (controller look.php) to see what was the code that was written. 00:06:49 It looks very similar to the Admin Area except that it has been slightly modified for the front end and its requirements. As you can see we were adding some CSS classes and JavaScript from the back end. Here is the 'model','getItem', 'getForm', and the Controller.00:07:16 It shows the code that has been created. The fact that this was created, does not 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 should be done manually.

Manually Add Links

Under site views there are two views, one is called 'Looks' and another one is called 'Looking'. As you can remember the one we looked at here, which I set was automatically generated is called 'Look', so that one is not showing because it was a tick box that created this whole View model and Controller. It is not necessary to build the 'Look' view again but you need to get links to it. 00:08:21 In 'Looks' a Dynamic Gets is used, as well as in 'Looking'. Open the Dynamic Get page. There is one called 'Looks' and 'Looking'. Go to the Looks Dynamic Get. It got a custom script area were it is asked whether the items are set or whether there are items. 00:09:10 Then loop through them('$cando')(See video), it may be seen in the Helper Class there is a 'getAction' function.

The 'getAction' function inquires whether the current user has the edit option to the specific 'look' item. If it does, it builds in this little script 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 It could have been done anywhere. I decided to do it here because then it gets added to the model, which is more where your logic, for lots of the data structure, should be placed. Go back to the Site Views, open the 'Looks' Site View. It may be seen that the 'Main Get' is set as 'Looks'. If you scroll down, in this area(See video) we are looping through the 'Look' items, and echoing the edit link after the description.00:10:25 That means the link that has been built in the Dynamic Get which is the button, it will either be empty and therefore show nothing. If the user does not have the permission to edit it, or it will show a button. 00:11:04 A link has not been added for creating 'New Looks' and the same would be required to do that.

Add A Button To Create New Looks

The same button script may be used, copy that. Here before the table, a button could be added to create 'New Looks'. All that 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 is how to add an editable Admin view to the site end of your component. 00:11:53 Then link it into your Site 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 indicates whether it can be edited. Look at this Helper class in the code. 00:12:23

For example: In the code, in 'Helpers', open 'demo.php' then scroll down to the method called 'getAction'. 00:12:50 You can go through this logic to see that here are dealt with a number of concepts and we are trying to determine the permission to edit 'own' and to 'create'. It all gets stored and gives it back in the result set. 00:13:17 You could also 'echo' out the result, 'var dump' or something in the 'Look' to see exactly what is the result from that structure.

If we go back to the 'Looks' view and open that model. 00:13:42 It will be seen that the custom scripting that creates the button, gets added from JCB(see video). You could add a 'var_dump'; exit; and take '$cando' 00:14:06 and login as any kind of user on the site, then when the page is loaded, it should display the '$cando' list of that specific user group. Also, keep in mind that here is the 'Authorise' setting that is applicable to the Looks Site View and is also controlled in the permission structure. 00:14:33 Always keep in mind that there are a lot of permissions automatically being added to components build in JCB. If it appears that things do not function properly, it may be that it had not been kept in mind that there is a permissions structure, and it is necessary to adapt that permissions structure as it is fitting to your project.