jlleblanc.com - Joomla Component Tabbed Interface For Backend

Learning Joomla! for the first time? Buy the Joomla! 1.5 Essential training CD-ROM or watch it on Lynda.com.

Welcome! First time visitors will find the Daily Message Component Tutorial to be helpful. (Daily Message for Joomla 1.0 is also available, as well as many other tutorials based around it). In addition to the tutorials, there are articles covering conceptual topics, such as the oft-asked question "What is the difference between a component and a module?" To receive alerts for new tutorials and articles, choose a newsfeed at the right appropriate for your newsreader.

Joomla Component Tabbed Interface For Backend

Many popular Joomla components have tabbed interfaces for the administrative backend, providing logical divisions for otherwise large forms. The code for these tabs are a part of the Joomla core, ready and waiting to be a part of your next project!

(Please note: the information in this tutorial was written for an early copy of Mambo and is now out of date. It will eventually be replaced with up to date code. JLL)

Let's go back to the Daily Message component tutorial...

Daily Message has a configuration screen, which is called by setting the 'act' variable to 'configure'. The admin.dailymessage.php file sees this and tells the HTML_joeDailyMessage class to execute the listConfiguration() function, which generates the HTML displaying all of the configuration options.

Although the original layout is nice and clean, we will assume that I am completely obsessed with tabs and wish to use them for this administrative screen. Despite being overkill in this instance, we can easily implement a tabbed interface based on the original code:

function listConfiguration($option, &$rows)

{

$row = $rows[0];

<tr><td>Italic</td><td><? echo mosHTML::yesnoSelectList( "italic", "", $row->italic ); ?></td></tr>

<tr><td>Underline</td><td><? echo mosHTML::yesnoSelectList( "underline", "", $row->underline ); ?></td></tr>

<tr><td>Show Date</td><td><? echo mosHTML::yesnoSelectList( "showdate", "", $row->showdate ); ?></td></tr>

</table>

<input type="hidden" name="configid" value=<? echo $row->configid ?> />

</form>

}

You can go back to the admin.dailymessage.html.php file in the Daily Message Component Tutorial for an explanation of how this code interacts with the rest of Joomla. Now we are ready to add tabs..

function listConfiguration($option, &$rows)

{

First, we need to add the JavaScript that runs the tabbed effects. This is included with the Joomla core and does most of the work for us.

$row = $rows[0];

<tr>

<td id="tab2" class="offtab" onClick="dhtml.cycleTab(this.id)">Italic</td>

<td id="tab3" class="offtab" onClick="dhtml.cycleTab(this.id)">Underline</td>

</tr>

</table>

After getting the row for the results of the query on the configuration table (again, refer back to the Daily Message tutorial), we build the tabs at the top of the form using a table. The "id" property in each table cell is set to 'tabx', where x corresponds to the tab position in the table, starting from position number 1. A small cell at the beginning ensures that the tabs do not begin flush left on the screen. The last cell prevents all of the other cells from stretching to fill towards the right side of the screen. Although the width is set to 90%, it will rarely take up that much space.

</div>

We begin the actual from and start by adding the contents of the first tab. Using the same tab naming scheme as above, we name the contents of each tab matching the previously defined tabs ('page1', 'page2', etc...). This will allow the pre-built JavaScript to do all of the work, allowing us to concentrate on our interface.

<center>Italic: <? echo mosHTML::yesnoSelectList( "italic", "", $row->italic ); ?></center>

</div>

<center>Underline: <? echo mosHTML::yesnoSelectList( "underline", "", $row->underline ); ?></center>

</div>

<center>Show Date: <? echo mosHTML::yesnoSelectList( "showdate", "", $row->showdate ); ?></center>

</div>

These other four examples are pretty much repeats of the first one. Completeness is a good thing, even though it may seem redundant. I am doing this because I know that if I do otherwise, I will get an e-mail from somebody saying "Joe, help! I entered your code just as it is on your website and I only get the first page and a bunch of JavaScript errors whenever I click on something else!" So here you see the actual code instead of a few lines with ellipsis the way manuals often do.

<input type="hidden" name="configid" value=<? echo $row->configid ?> />

</form>

Now we slide in the hidden variables that make the Joomla backend work. These are straight from the original Daily Message tutorial, so you can go back and look there to see how they work, if you wish. If you are rather observant, you will notice that we also just closed the <form> tag. Consequently, all four of these elements are on the form named 'adminForm.' This could be a blessing or a curse, depending on the effect you wish to achieve. If you wanted to have a list on each page using Joomla's convenient JavaScript driven toolbars, you are unfortunately out of luck. The problem is that all of the scripts are set to interact with 'adminForm' and nothing else. If you try to label multiple forms 'adminForm,' the script will become confused and will stall. However, if you have a large configuration screen where all of the variables are ultimately headed for the same database table, using the built in tabs can help organize options neatly (or in this case, unnecessarily divide them).

}

You thought we were finished, right? Well, we still have to tell Joomla which tab we wish to load. Although this may seem unnecessary at first, it gives you slightly more flexibility in your interface design. Suppose elsewhere in your component's administrative interface, you wanted to forward the user to a particular group of settings. You can pass a variable through HTTP and replace the code above with a switch() or if() statement displaying the appropriate tab on load.

So there it is. An elegant, simple interface made complicated through the use of Joomla's DHTML tab code. It's very helpful for interfaces where you have 2-3 screens of elements on the same form, but can get in your way if you do not plan ahead. Use judiciously!

Oh, and here is a copy of the component with tabs, which will not interfere with the original Daily Message component. Click here to download it.