The Joomla! Community Magazine™

Site Builders can Build Custom Joomla Components

Written by | Thursday, 01 September 2011 00:00 | Published in 2011 September
If you are a professional site builder, but not a professional developer, then you have likely wished you could quickly build custom Joomla! extensions that would allow you to collect exactly the data needed, presented in the precise manner, as required by your client.
Menu Item Menu Item

Building a Joomla Component can be a very complex undertaking, requiring knowledge of the Joomla API, MVC patterns, MySQL, PHP, error handling, and so on. For that reason, most site builders don’t even entertain the thought of custom component development but instead head to the Joomla Extensions Directory to configure and adapt existing components for their site development needs.

Today, all of that is changing. Tools like JFoobar eliminate the need to master advanced coding skills by automating the component build process and therefore make it feasible for non-developers to deliver components which customize data, parameter, and layout development.

This article will help you get started building custom components so that you can begin to unleash the power of the framework and build high-end custom websites with Joomla.

Install

jfoobar01

To begin, download JFoobar from Github.

jfoobar02

Next, install JFoobar, just as you would any other Joomla Extension.

Create

After installing, select the Menu Option Components-JFoobar Component Builder in the Administrator. You will be presented with instructions on how to proceed.

jfoobar03

Creating a component is very simple. Select a name for your component that allows both a plural and singular form, use those values in the link and paste the URL into the Browser address bar. JFoobar will create your component and take you there.

option=com_jfoobar&singular=cat&plural=cats

Before going further, it’s worth noting that you can create as many components, as desired. When you are done creating components, you can uninstall JFoobar and your components will remain. JFoobar components are like any other Joomla component and can be uninstalled normally.

Review

Okay, so what do you have after you have created a Component using JFoobar? You’ll be happy to know that a fully functioning component is available. JFoobar handles all of the heavy lifting involved in creating Joomla Components.

jfoobar04

A Table is created, named after your component. The Category Editor and Manager are in place. The Title, Icons, Menu, Submenu, Button Bar and Filters are all created for you, as is the Batch process interface. All of the create and edit code has been written and will not need to be changed.

jfoobar05

The Item Editor is also automatically created. You can create and edit items. At the bottom of the page, you will find the ACL grid, already programmed to work with your component.

Make special note of the Custom Fields and Parameter Sliders on the right side of the Editor. That is where the potential of this approach starts to show...you can customize your Custom Fields and Parameters — and those values will automatically appear in these areas.

JFoobar06

The Item Manager list is ready for use. All of the code needed to publish, check-in, archive, trash, move, copy, sort and display, etc., has been written for you. Click on the Options button to see that functionality ready to use.

jfoobar07

Three Site Views (Menu Items) are available. The List, Item, and Form Views are already coded and usable in the Menu Manager. Create a Menu Item for each and view the results from the site. (Make certain you have created a few sample items, first, of course.) The router code is written and the View and Action ACL is functioning, too.

Custom Component

Okay, so how do you make your component collect and display the data you need? This is where the benefits come in. By using Custom Fields, Parameters, and Layouts, you can tailor fit this Component for even the most challenging site engagements.

To get started, make certain you have good tools that allow you to edit PHP files. I recommend an IDE like PhpStorm (reasonably priced) or Eclipse (free). Instructions for how to install and configure those tools are readily available, although you might find instructions are not needed.

Administrator Media

The Joomla Administrator uses an icon for the Menu Item and Component Title area. You can customize the icons used by modifying the values in the media/NAMEOFYOURCOMPONENT area. To change the icons, you might have to change both image files and the CSS.

Component Table

As stated earlier, JFoobar automatically creates a table named after your component. The table has all of the standard fields that Joomla needs, including id, title, catid, state, created, publish up, and so on.

In addition, there are two fields that are used to store customizations: custom_fields and parameters. You will not have to change the table structure or the model code needed to save and display table information. You will only change a single XML file to customize your data.

Custom Fields

In order to create custom fields, you update the XML file named YOURCOMPONENTNAME.xml located at administrator/components/com_YOURCOMPONENTNAME/models/forms/. After making changes, copy the XML file to YOURCOMPONENTNAME.xml located at components/com_YOURCOMPONENTNAME/models/forms/.

jfoobar08

To begin, open the file and scroll down until you find the custom fields section. All of the fields defined after that value and before the following field are “custom fields.” Add and remove fields in that section, as needed.

Although XML looks intimidating, it’s really not that complicated. Using the following example, you can get a good understanding for what a field definition involves: the name field will be used to display the form and to display the field contents in the layout.

<field
name="image1"
type="media"
hide_none="1"
label="COM_CATS_FIELD_IMAGE1_LABEL"
description="COM_CATS_FIELD_IMAGE1_DESC"
/>

This example field has a media field type. That means a text field to hold the file name and a button to present a file dialog box will appear on the form for this field.

Each fieldtype is different. Joomla core has 40 field types defined on the Joomla Documentation Wiki. You can copy the Wiki examples into the XML file and make the minor changes needed. You can even create a custom field type, if necessary.

Add a few fields and then see how the “Custom Fields” portion of the Form Editor automatically reflects your changes. Simple, huh?

Language Files

The other notable set of attributes are the label and description attributes. The values for those attributes are expressed as language strings and are stored in the language files found in administrator/components/com_YOURCOMPONENTNAME/language/xx-XX/ files.

You can change those language strings so the information is exactly what you need displayed on the forms for your client.

Parameters

Parameters can be used in your Layouts to make decisions on how you want to display your data. If you add matching parameters to the Component Options and the Menu Item XML, then the Global defaults will be available. Likely, you will find your need for parameters is greatly reduced since you can customize the component to fit your specific needs.

In order to create parameters, you update the same XML file where you defined your custom fields. This time, look for the Parameters section. All the fields following, before the end fields tag are part of the “parameters” field.

<fields name="parameters">
<fieldset
name="jbasic"
label="COM_CATS_FIELD_PARAMETERS_LABEL"
>
<field
name="cat_layout"
type="componentlayout"
label="COM_CATS_FIELD_ALT_LAYOUT_LABEL"
description="COM_CATS_FIELD_ALT_LAYOUT_DESC"
extension="com_cats"
view="cat"
useglobal="true"
/>
</fieldset>
</fields>

Use the same approaches with parameters as was described for custom fields.The Parameter Slider in the form editor automatically reflectd changes you make.

If you want to change the Parameters for the Component, update the config.xml file in the root of your Administrator Component.

To change the Menu Item Parameters, update the site tmpl/layout.xml file in your site component.

To ensure these three sets of values work together, get into a habit of changing the XML file above and then copying the parameter section to the other two locations.

Customize Layouts

jfoobar09

Once you have customized the data you want to collect and the parameters you need for decision making, the last step is to customize the layouts.

If you have used layout overrides before, then this work will be familiar. Just look at the layout files in the site component and adapt those files, as needed. Although Template layout overrides work with JFoobar components, you will likely find you won’t need to use that approach since you can customize the component layouts instead.

In the layouts, there are lines of code that you can un-comment out in order to review the names of columns available. Also, the iteration process (looping) is already in place for the list view. Just focus on getting the HTML the way you need and then inserting the data elements. Experiment, you can always throw away your component and quickly create a new one. The more you try things out, the more productive you will become, and the better able you will be to craft the output exactly as your design requires.

Closing

When I started learning how to code, I began to see first hand that the Joomla framework holds a great deal of promise. I started calling it the creamy inside of the chocolate Joomla cookie. Making it easier for those who do not code to also be able to customize components is a goal I have had for a long time. If you are a site builder, I encourage you to trust yourself to learn new skills, like those described in this article. In doing so, you will find flexibility needed to customize Joomla for high-end, beautiful and functional site development.

If you have questions or find issues with JFoobar, please use the Issues resource. You are encouraged to fork JFoobar, fix bugs and add features, and then issue a pull request to share those improvements with others. 

Happy Birthday, Joomla! Smile

Read 71088 times
Tagged under Developers
Amy Stephen

Amy Stephen

Long time community member who has worked on the Communications Team, Bug Squad, Magazine, and early on, in the forums. Founded All Together, As A Whole, a fun hang out for Joomla! developers and site builders, part of the JoomStew Radio team with Robert Vining, where we are focusing on Joomla! and The Art of Community by Jono Bacon and very talented guests from the Joomla! community.

avatar
One of the best and most useful JCM articles I have read! I sent the link twice on Skype before even finishing the article. Kudos Amy!

Kind regards,
Nick
VOTES:2
avatar
Great article Amy.
VOTES:1
avatar
Really interesting article there Amy.

This will change quite a bit of focus on how I build sites if I can get it working the way I want it to work.

Regards,

Peter
VOTES:2
avatar
BRILLIANT, simply BRILLIANT!
Once again, Amy, you have advanced the frontiers of the Joomla landscape. Kudos on an excellent, thorough article and what already looks like a great tools for those ad hoc requests that keep us up at night!

Thank you!
VOTES:2
avatar
good post. Has anyone heard of not webdesigns Joomla component builder kinda the same thing.
VOTES:3
avatar
Thanks to each of you for your kind words. I pulled this together for Joomla 1.7 because of a job I am working on -- needed to create a ton of custom components rather quickly and it saved me. Was able to back port some Molajo code for the installer so felt very good about that since our overall goal is to improve Joomla.

Edgar - developers will find this helpful as it gives you a good 80% of what you need to get any Component going.

All - please share improvements -- maybe we can get a tool like this into the core installer.
VOTES:1
avatar
hello amy . i have got a job offer to build joomla component. but i don't know how. i want to learn it quick. please tell me the fastest way to learn it. i don't know php. i have been using joomla with readymade templates and extensions since few years.
VOTES:1
avatar
the installation is not working...
VOTES:1
avatar
Wow. Simply wow. Look at how far Joomla has come. I dare not think about the amount of time I would have had available for other things had this tool existed a few years ago. This is a brilliant component that will benefit many, many site developers.

Thanks for sharing this Amy, you rock!
VOTES:1
avatar
Hey gaurav -

Would you please add an issue report to clarify what the problem is that you are having?

github.com/niambie/jfoobar/issues?sort=c...esc&state=closed

Definitely will help you get rolling! Thanks!
VOTES:1
avatar
Hello

Thanks alot for this tutorial, but can we have the jfoobar updated to work with joomla 3
VOTES:0
avatar
Very impressive.

This article only touches on the goodness inside I strongly recommend you install it and check it out
VOTES:1
avatar
nice article amy.......... thanks
VOTES:1
avatar
Truly impressed,

Looks like a real time saving tool.

Possible UI improvement will be a simple form with 2 text input fields for the views names and a submit/create button.

Good work Amy.
VOTES:1
avatar
Wow Amy! great article :) really helpful for my Android Jommla admin app.
VOTES:1
avatar
Amy - Is there an easy way to re-package the components that you create. After creating a new component it would be great if I could zip it back into an installable package.

Great tool!

Brian
VOTES:1
avatar
Hey Brian - added instructions for how to package a component in the README file. Look for &quot;IV. Create an Installable Component&quot; -- hope that helps!
VOTES:1
avatar
Hi, good day

I need help, I can´t install jFoobar.zip
Data:
- Joomla 1.5.23
- Message error:
Error! Could not find a Joomla! XML setup file in the package.
Unable to find install package
- Host: Pc windows xp, localhost
****

Regards, Arturo
VOTES:1
avatar
Arturo - I am so sorry I did not make this clear in the article, but JFoobar only works with Joomla 1.7. Might be a good chance to try the new release!
VOTES:2
avatar
Fantastic article Amy, great work!
VOTES:1
avatar
Amy,
Excellent article. I have to say, I was surprised to see that this is possible with Joomla.

I've been getting deeply into using Seblod for creating Joomla apps, front-end data capturing, and custom page layouts.

Is the functionality you describe here similar to what can be done in Seblod?

Thanks,
Matthew
VOTES:2
avatar
Amy,

First...Great Article...and came at the right moment.
Question for you or any reader....any good reference for a good article (I already followed Mark's article from Joomla docs DEV ) about the integration between Eclipse and Joomla?

Thanks,
EFREN
VOTES:1
avatar
Thanks, Amy! Wanting to build a large new component in Joomla! 1.7 from scratch, Ive gone through all the "tutorials", read throught the APIs, poured through com_contact, com_content, com_users and com_weblinks, all to find out how to create the magic.

JFoobar simplifies everything beautifully (although I'm still not sure how to do away with categories if they're not needed).

Thanks for your work on this and all the other projects with which you're connected.

Where on earth do you find the time?!
VOTES:0
avatar
Hey Scott - good question! To get rid of the link to categories, you need to:

1. Remove required=&quot;true&quot; from the catid definition in administrator/components/com_XXX/models/forms/XXX.xml

2. Remove these lines:

form-&gt;getLabel('catid'); ?&gt;
form-&gt;getInput('catid'); ?&gt;

from administrator/components/com_XXX/views/SINGULAR/tmpl/edit_publishing.php

3. Remove the category list:

getLayout() !== 'modal') {
$this-&gt;addToolbar();
}

administrator/components/com_XXX/views/MULTIPLE/view.php


Everyone - as Scott is saying, JFoobar gets you started. Don't be afraid to dig in and change the code. Removing Category is a great way to start learning about Joomla Components - and if you mess it up - just uninstall and try again!

Thanks to all for your kind comments. Please keep reporting issues as you find them - and fork it and make it better for others.
VOTES:0
avatar
I don't see any difference between using this way then using CCK. In spite of using CCK by builder and even by novice developer may create a nice 'simple' like component, it would never access to real complex things. I just face something that someone build with CCK instead developing custom component and the result are horribles!
VOTES:0
avatar
Hi Barny -

I agree that CCK's can present problems.

What most CCK's do is store a primary key, a field name, and a value as a row in a table. If you add 10 custom fields then each content item joins to 10 custom fields. Naturally, this will start to slow your website down, especially if you are retrieving many rows.

But, JFoobar does not do that. It uses one row per content item. Custom fields are json encoded and stored in a single column.

Now, if those custom fields are important selectors or are needed to order the results, it would be best to adapt the table and model to store those custom fields as &quot;real&quot; fields.

In any event, JFoobar still gives you a huge head start towards building a custom component allowing you to adapt, rather than completely build. all of the code needed for an extension.

Thanks for raising an important consideration.
VOTES:0
avatar
Amy,
Still not clear how this method compares to using a good CCK like Seblod, which ties into com_content and links to other extensions through custom templates.

But this area of work is really interesting to me. Unfortunately, I'm not a coder, so I need to ask these kinds of questions to learn!

I'd be interested in seeing if anyone has done a comparison between the JFoobar method and the CCK method for building such elements.

Thanks,
Matthew
VOTES:-1
avatar
Simply put:

By creating a custom Joomla extension (with JFoobar or any other means), the data you need to collect can be stored in the same row - and the layouts you need to create can be customized.

By using a CCK, you start with an existing extension, and then add data in a related table that joins to the primary table. Layouts are generally adapted as Template overrides.

The native approach should be better performance wise -- but tends to take more skill (JFoobar type solutions should help with that.)

The CCK approaches will have a performance hit -- but they tend to be easier for less technical people to use. CCK's also can come with a lot of nice add-ons, like spam protection or image galleries, that can help site builders quickly build impressive sites.
VOTES:0
avatar
Thank you very much for the great article, Amy!

Is it possible to save the collected data as a standard joomla article with this method?

Perhaps with some hacks / workarounds?
VOTES:0
avatar
Hey Sadik - might I ask why you would want to do so? Provided the standard Joomla content events are used (which this components does use), then custom components can be integrated with any Joomla plugin. That's what really matters, unless maybe there is another issue which I am not considering? Thanks for sharing!
VOTES:0
avatar
Suppose that we have a site with some product portfolio, for instance CNC Machines / Drilling Machines etc. as our categoeries

All these categories have some items, CNC Type A, CNC Type B under CNC Category.

CNC Type A is a specific CNC machine of Type A and is saved as a standard joomla article (also in front page).

If the feature of this type is known, we can define the parameters to be collected via jfoobar and define some layout, and then save the collected data as joomla article. Our client must only fill some form (price, technical capabilities, picture etc..) -which we create via jfoobar- and can create such an item very easily, if we could save the collected as joomla article.

It is some sort of light weight CCK, without complicated software add on´s.

Our client does need need to have any html \ CSS knowledge.

Sadik
VOTES:0
avatar
Different data collection needs, such as that which you are describing, could easily be accommodated using something like JFoobar.

A few ideas of how you could do that:

A) Make a component for each of those different types (meaning one for CNC Type A, and one for CNC Type B, etc.) and then pull all of that information together in a module which is displayed on your home page. The component driving the home page might be nothing more than a single article view that is either hidden or used for the page &quot;description.&quot;

B) If you have development skill, then I might suggest adding a &quot;content_type&quot; field to the record and within the interface. That way, you can display only those custom fields and parameters that are needed for that content type.

C) You could do something as simple as adding a custom field for content_type -- then use your language files and sequence of custom fields to clearly document data collection needs by content type.

There are lots of ways you can customize the code as you need it. There really is not any reason it would have to be a Joomla article. What is important is that the component data is treated like normal Joomla content. JFoobar is very inline with standard Joomla 1.7 architecture.

The more you play with customizing components, the better you will get. For most, simply getting over the fear factor is the hardest part. I encourage everyone to push yourself to explore and learn -- the framework is very powerful when you learn to use it.

Cheers!
VOTES:1
avatar
Hi, Amy

thank you very much for your detailed explanation :-)

I know that I can achieve the tasks that I described before over jboobar data collection -&gt; content display via module etc. without touching joomla articles.

But I was interested in looking for a way to feed/automate joomla articles with some simple parameter and layout definitions.

Thanks
Sadik
VOTES:0
avatar
Maybe one thing to try if you want to stick to com_content would be to use the User Profile Plugin in Core 1.7 as a model for com_content.

That's more of a CCK-like approach and easily adapted to com_content.

That way, you can customize the data capture -- use template layout overrides for layouts -- but stick to articles.

All the best!
VOTES:0
avatar
A long, but very useful article. More of these please, and I will also start to build components :)
VOTES:0
avatar
Amy:

Thanks for the tip on the categories!
VOTES:0
avatar
Great Article! Thank you Amy!
VOTES:-1
avatar
Saved this to my favorites!

Amy, I think I love you ;)
VOTES:0
avatar
Hello,

I have this new component in minds to develop, want to ensure I can do it with JFoobar before start using it.

1. What to Achieve.
I have created 4 new tables in the Joomla database. The data inside the 4 new tables mostly updated using SMS through their mobilephones.

I want to allow the mobilephone users who submitted the data to see their data in nice view (Graphs &amp; Analysis) from the website.

1.(a) Technically

Using Joomla, they have to create standard Joomla login registration. Once successful, they will presented with the custom component link menu. Here, they will be ask to insert their mobilephone number &amp; registration code (sent to their mobilephone). This will link between Joomla login ID &amp; mobilephone number in the new table created.

Once the link (Joomla ID &amp; Mobilephone) successfully done, they can view their data in nice view (Graph &amp; Analysis) using another menu link of the new custom component developed.

If this can be done using JFoobar, I will commit myself to the fun exploring this solution.

Thanks
Sopian
VOTES:0
avatar
Hans Peter Betzler Monday, 24 October 2011
Hi Amy,

all I can say is: [size=medium]Thank you!![/size]

Thanks to you my headaches, trying to build components have suddenly disappeared!!

It's a stunning peace of component!

Kind regards,
Hans Peter Betzler
VOTES:0
avatar
I wish someone would do a tutorial on this. I have followed the README instructions and I fail at 3f. The component is created ok, The three menu items get created, item, List but 'form' is type 'create article' and fails with HTTP 500 error when selected from the front end.... I guess I am not doing something right but a tutorial building a component would have been great. I find several sites describing this component but they are all saying the same thing but no one has provided a working example.
VOTES:0
VOTES:0
VOTES:0
avatar
Hi Amy,
I've been getting more into custom fields and trying to figure out how to do better CRUD operations in Joomla, while tying entries into the Joomla article system.

It seems Foobar has power here.

But I cannot seem to find information about this beyond your blog post. Are there any sites, discussion groups... anything devoted to Foobar that we can look at?

Thanks,
Matthew
VOTES:0
avatar
Thanks Amy!! You're amazing :)
VOTES:0
avatar
Excellent read Amy. Any chance this wonderful project will continue on with Joomla 2.5 or even 3.0 when it comes out?
VOTES:0
avatar
What a great article. Thank you Amy for your time and knowledge, this has actually inspired me.

Edward
VOTES:0
avatar
Coding is a very difficult thing to do when you do not have any knowledge of it. I have tried to learn how to code but on the way i got stuck and frustrated. I spent a lot of money to programmers. I thank God for this great development.
VOTES:0
avatar
good tutorial
VOTES:0
avatar
Amazing component - thanks Amy.

Just one thing I'm stuck on; how do you edit a row from your custom table on the FRONT end ?

Any pointers GREATLY appreciated.
VOTES:0