-
-
Notifications
You must be signed in to change notification settings - Fork 175
074 How to add Joomla Custom Fields
00:00:00 (Click on these time links to see Youtube video)
At last we are happy to announce that we have added Joomla Custom field integration. Joomla Custom fields are the fields that you see on the Users, there are Fields and Field groups. The same under Articles, Fields and Field groups which targets the Articles and all the Users respectively. If you add fields on the articles, when you create an article and it meets the specific criteria, the field will show up and you fill them in, and it shows up on the front end of your website. The whole Field and Field Group concept has an integrative option for third-party components. We have changed JCB enough to allow that kind of field integration in your components.
I'm going to demonstrate how to make use of this. We'll use the normal Demo component, the way to add the fields to your Demo component, is to have Admin Views. You are going to link the field to a Admin View. You can link it to multiple Admin Views. I'm going to demonstrate linking it to the only one called Look. You can click on the Edit, 00:01:31 and go to the area where you link the Look, the View to the component. You will see there's a new field called Joomla Fields. 'Select if the option to add Joomla Fields should be added to the view.' We are going to click that, and all you need to do is, to have it work in a back-end. The front-end have a little bit more tricks to it. That is to be expected because the front-end of JCB components should be unique.
We are going to close out of this and before making any changes to the front-end of the component, I'm going to compile and install it on to the current website to see what happened. We have the compiler. When I compile our component and install it quite simple. We are going to open the component. 00:02:34 When we go to Looks, we'll see there are now Looks Fields and Looks Fields Groups. I'm going to create a group, say New. Let's say in the Title: Really Easy, save and close. We have this group called Really Easy. I'm going to create a field. We are going to make it a text field and call it Simple Field. We are going to add it to the Really Easy group, 00:03:05 save and close. We have a field, if we will go to Looks and click on New. We will see that it has a new tab called Really Easy. We can click Really Easy and it have Simple Field. In Name we can say: The name and for the field you can give it a value, call it Input Value, 00:03:29 save and close. Immediately you have the Input Value stored. You have the name and everything works exactly as expected. It's created a tab. If you've added a field, you can add More Fields to this tab simply by selecting the same group call it More Fields, save and close, we have More Fields. 00:03:57 You can go back to the Look, open it. You'll see that More Fields was also showing up, with more input. That's how the custom field concept works. That is the easy part, adding it to the component. Like I said before, you could add it per Admin View. But usually you would have one view where you at this 00:04:24 in the front-end of this component. You will need to do a little bit more because the way that the fields work, is explained as triggering on specific events on the front-end of the component.
We at JCB have also added the option to add these events to your Site Views. It's a little bit hidden and purposefully that way because we added it to the Dynamic Get area and not in the Site View area. It is because the Dynamic Get is targeting either multiple items or single items. The events are really for single items. It seemed right that we add it there to easily validate and so forth. If we go to Joomla Component 00:05:21 Builder, and go to your Custom or your Dynamic Gets. We want to add it to the Looking because it's a getitem. We will open Looking and you will see that there is this new Content Plugin Events, which you can select. If we go back to the fields area and you open the fields, 00:05:54 you will see that it has Options. It have Automatic Display options: Before Display, After Display, After Title, and Do not automatically display. These options is what is used to display the values that is submitted to the field on the front-end of the site. By default 00:06:25 it is Before Display but you can change that. In your component you will need to target these four events for the user to make use of these fields. They might decide they want to use the fields in a back-end. 00:06:46 It will be related on to this show on. If you do that it will not even show on the back. This is integrative switches.
You will need to target these switches only in your custom code on the front at this point. It's not really that hard to do that. I'll show you why. Back into the Dynamic Get, I'm going to add title, add before display, and add after display, as events. Save and close. That will practically put the code into your component.
Let me first show you the code, how it looks. In the component root folder, I'm going to components and then I'm going to go to demo, go to views and open looking, open the view.html.php file. The events are going to be added to the display function. Currently as you can see there's nothing. 00:08:02 We are going to compile the component and see what changes. A recap, I've added the events to the Dynamic Get. I'm going to the compiler, I'm going to recompile the component and install it to see what those events changes, how it will change the code. If we scroll 00:08:27 down, we will see that it added the dispatcher to the display. Down here it imports the content plugin(see video). It creates a new object called event. 00:08:49 Basically it checks whether your item has parameters. It checks if there is any parameters been passed. That is in your Dynamic Get. You could grab the params column from your items. It's checking if it is there. If it's not there it is going to fall back 00:09:11 unto the Globals. If it's there and if it's a Json it will convert it to an array, and have it there or it will fall back to the Global params. It is going to trigger the onContentAfterTitle, and onContentBeforeDisplay, 00:09:32 and onContentAfterDisplay. It's going to pass the com_name, the actual view value here. We know that this is setting the context of the event.
You could be building a plugin that is targeting Look and not Looking. If you want to change the context of this specific event that has been passed over. To do that we've also added a Context 00:10:12 Field in the Site View. Your Site View can change its Context. Let me show you. We'll open the Site Views, in the Site Views we have that view called Looking. We can open that and we have a new Field called Context. We have Looking selected as our Dynamic Get. Here we can set the Context 00:10:38 to suit the Dynamic Get and not fall back to the main code. If you don't add this Context, it will fall back to this code name. But you could say I want the Context to be Look and not Looking, then save and close. If we compile this again, it will update the Contexts of that specific event. Any other event related to that 00:11:06 Get, that is really what you want. You'll see it's changed it to Look. So it's still pass the component's name, but the correct context in relation to your event.
What's going to happen? Why we want this to be Look? It's because the fields are linked to the Look Admin View. It is stored in the database under Look Context and not under the Context of Looking. You are having both here on the front. So you couldn't use the name and Look again. You have to use another name. The way to have that same Context called on your title, is to change it like I've just done. I know that's a lot of explanation. Maybe some of you don't even understand 00:12:10 what I've just said but those who do will know, this is nice, you can change the Context through the Site View, that you could have the same Context be triggered multiple times as you would have it. It's a little bit of a tweak at the moment. We might bring more automation in, but I know it is a little liberating. You could 00:12:34 really be free how you want to do this. But what is going to happen? These events are being triggered and the values are being stored here(see video). Whatever gets thrown back from the plugins, gets placed into this value here(see video). The only custom code that you need to do after fixing up the events being added to the Dynamic Get, updating the Context to target the corrected 00:13:04 view. I'll show you once again. Why do I want this to be Look? If we go to our Admin View, we'll see if you open Looks and click The Name, you will see at the top, 00:13:24 it says Demo and the View is Look. The Context of these fields(Simple and More Fields) are linked to that 'com_demo' value and that 'look' value. 'com_demo' is always going to be correct. But 'look' could be different and you will need to in your Site View make sure that you are targeting the correct Context of where these fields are.
Passing The ID And Context - Joomla Automatically Retrieve The Values - Place Values Inside The String
You will be passing the ID and the Context and Joomla will automatically retrieve the values of this fields and place those values for you inside of the object or it will create a string as you will see. It implodes the array into the string and places it in here(see video). 00:14:13 All you will need to do is echo out those values in any way you want them to look. You could add it in some diff tags. I'll show you that in a moment. All I wanted to explain is how these events get the field values on the page. 00:14:37 Those field values are loaded into these values respectively of its switches which I showed you earlier in setting up the field.
The Joomla web site currently is not setup to show the Looks. We are going to go to the menu and change that. Go to main menu and I'm going to click on Home. Select Demo, Looks. Save and close. We have Looks on the default page of the website. If we click Joomla Mount it should load and there is The Name. 00:15:29 You will see a list of Looks and The Name. If you click on The Name it shows us The Name and it shows there 1 hid. If we refresh that it shows 2 hid. That all works well, but our custom values which we have submitted is not showing up. The Name value is showing up and we could add some 00:15:55 Description. This is also going to show up if we refresh the page. There's the Description, click The Name, there is the Description. All is showing up, but the real easy values are not showing up. We want them to be showing up on the page. That's what we are going to do for them. By simply using those 00:16:28 event objects. In the code we have the onContentAfterDisplay, onContentBeforeDisplay, and onContentAfterTitle.
If you forget how to use this or how to place the component, you can go to com_content and you can also open its article, view.html.php. You would see something very similar. Scroll down, you will see something, unless they've changed it by the time. But at this time the default of Joomla's implementation is very much the same. It's triggering the content and it's also placing it into these values. That means if you go to its template 00:17:19 default php, you will see places, you could search for it. You could take this afterDisplayTitle, copy that go to the Default and place it in there(see video). You will see the content is generated by the content plugin event on. It echoes it out. You could use this code just like that copy, paste it into your component, after the title. The same goes with the other events. With the before display and after display.
????
Let me do that quickly. I'm going to grab these and place them into our component. I've copied them to a notepad. I'm going to move them to my other screen. Go back to JCB and go to my component, the Site View of a component. 00:18:23 Open Looking, in the component we have a whole lot of things happening. We have a article comment and the title. We want the value 00:18:47 to echo out after the title. We are going to take that first one, which is the event after the title. I'm going to place it between the header and the diff. 00:19:05 The content is generated by it there and it's onContentAfterTitle. This is the title and it is going to show over here(see video). Then we have another one onContentBeforeDisplay. I would like to think it needs to go first before anything. I want to put that there onBeforeAnythingDisplays. That's way at the top. 00:19:39 With content after display I wanna put that obviously at the very end Below everything So that's quite simple We could do more we could wrap it in a diff we could Do all kinds of styles to it But that's the simplest way and I'm just gonna demonstrate that Save and close here And then basically compile it again Install 00:20:08 And now let's go refresh that page Oops I got some errors here I realized I'm using slightly different names then The ones I copied from the content You know the article area Content area let me show you that So They are saying up here in the comment on content before display and here it's before display content 00:20:35 it's like a little bit Different So I'm using exactly the same So just Heads Up Use the the same as What is here in a comment And that's little me that always trying to Keep everything the same 00:20:55 We save that it should work now So here we go simple Fields input value more fields with more input There are those values displayed on the front So if we go back here We can close this out Go back to the fields and let's say with a more fields You wanna change that to display after the title Save And then go back to the front and refresh this So now the one is up here and the other one is after the title 00:21:28 So let's say we want simple field to actually show at the very end of our value go out of more Fields into simple field I will change that to you know After display Save and close So you could move the values Position Simply and everyone will move now you see that simple Field is below everything 00:21:55 And if you realise This whole area here is the block So that's how the custom Fields can come to the front you can also say you know I don't want this Area to show up And you can go to To the field simple field And you could say show label hide label And save And now if you refresh it will only give you the value So 00:22:20 That's the kind of behavioral integration So that's a quick demonstration Of how to now use Joomla custom fields in your components And how to then Model those values into the front end By Simply making use of the events And Wow have fun I'm sure this will Make things even more interesting Thanks for watching
- Home
- Beta Testing
- Custom Code
- PHP Settings
- Demo Component
-
Tutorials
- Hello World JCB
- Intro JCB Guide
- JCB Installation Steps
- Planning Components
- Field Type Overview
- Basic Fields Creation
- Admin View Management
- Advanced Field Usage
- Admin Component Integration
- Component Setting Customization
- Scripting Components
- Component FTP Options
- Dynamic Get Method
- Site View DynamicGet
- Site View Templates
- Template Setup Guide
- Layout Configuration Steps
- Custom Admin Management
- Adding Site Views
- Custom Admin Integration
- MySQL Demo Tweaking
- Global JCB Settings
- Custom Time Field
- User Helper Integration
- Email Helper Usage
- Message Store Email
- List View Unescape
- Export Import Customization
- Overwrite Custom Fields
- List Field Filtering
- Automatic Code Import
- Manual Code Implementation
- Component Export Import
- Custom Admin Buttons
- Translation Management
- Site View Permissions
- Component SQL Updates
- Site Edit Configuration
- JCB Backup System
- Helper Structure Integration
- JCB v2.5 Upgrade
- Tab Setup Guide
- JCB v2.6 Release
- Extended HelloWorld
- Field Rule Validation
- Community Snippets Intro
- Snippet Forking Tutorial
- Pull Request Snippets
- Library Manager Area
- Excel-based Translation
- Dynamic Router Details
- Database Auto Updates
- Subform Quick Demo
- VDM Package Import
- Dynamic File Inclusion
- File Field Upload
- Drag-n-Drop Upload
- Quick HelloWorld JCB
- Non-database Fields
- Dashboard Customization
- Menu Prefix Toggle
- Community JCB Packages
- Collaborative JCB Workflow
- JCB Package Install
- JCB JAB18 Event
- Convenient New Fields
- Component Language Strings
- Library Functionality Anticipation
- Join Field Relations
- License Template Change
- Code Reusability
- Local Dev Environment
- Extended Field Types
- Joomla Custom Fields
- Custom Field Expansion
- Site View Listing
- Run Expansion Method
- Form Site View
- Field URL Update
- Additional Helper Methods
- Field Validation Rules
- New Placeholder Feature
- Component Config Params
- Per-field Default Values