Adding custom fields to EventList

One of the sites I was recently building uses EventList Joomla Component by Schlu. Despite it being a great tool, it does not allow (yet) a user-friendly system for adding custom fields, for instance in the venue submission screen or in the user signup page. It is possible however, according to their official forums, that a future release will have the option to add custom fields in easily from the backend.

But right now, from the backend it is not possible.

Google didn’t help me either to find out how to manually create those fields, so I had to study the code in order to figure how could I manage it. I would like to share some information on the subject, as it might be very useful to many who are not experts at coding; it might not be the only way possible to achieve the results and there might also be other and better ways to do it, but this worked and very well.

This is not a 1-2-3 tutorial but rather a practical example on how to modify the code of the component in order to make custom fields. In no way I have more knowledge of the code than the creator of EventList himself, so if he suggests alternative ways to add custom fields they might also work well.

Finally I would like to add that I assume no responsibility for the results of putting into practice the tips I share. Remember tomake backups all the time and to thoroughly test if it works before making the site live.

Oh and one last thing: if you have Community Builder enabled for EventList, the third step will NOT work, as the portions of PHP code to be modified are slightly different (but you can find them thanks to the creator’s comments in the code).

The example

The example works in EventList 1.0RC for Joomla 1.5.

In the example, I created a drop down menu allowing a user to select how many guests (’convidats/invitats’) he intends to bring along to a specific event. This drop down menu will appear in the event detail page, above the signup button.

Custom fields in layout

You can obviously follow the same process to create a text field instead of a drop down menu, because all what changes between them both is the HTML. This is perhaps the easiest part…

At the right side you can see a clipped screenshot of the submission page with the modifications in action: what is covered by the blue layer is custom added, whereas the checkbox and submit button are the default EventList elements with an edited CSS so to integrate them to the color scheme of the site template.

The steps

Basically to create a text field the content of which will be stored in the database the following must be done:

1. Modify the database
2. Modify the submission page layout (frontend)
3. Modify the processing code (namely, the PHP code which stores the data in the database)

I assume that you have a certain knowledge of PHP; otherwise you might indeed be able to complete the example but without understanding how and why it works, therefore not being able to further experiment with EventList’s possibilities. I will not extend myself either to explaining the very basics of coding…

Again I remind you of the importance of backups, especially in step three. Backup the PHP file before modifying the code!

Step one: modifying the database

To do so I used phpMyAdmin because it has a comprehensive and user-friendly interface; however if you’re knowledgeful enough you can use other tools or using the appropriate commands.

Find the Joomla database and then look the tables inside. One of them is called jos_eventlist_register. This table handles the information submitted by users when registering to an event. If you view its structure, it should contain the following columns.

• id
• event
• uid
• uregdate
• uip

It is pretty self-explanatory what information does each column contain. The point here, however, is that in our example we will create an additional column where to store the data submitted in the custom added drop down menu. In my case, the menu allows to choose a number of guests, ranging from 0 to 15, so I created a column as follows, to store the selected value:

• invitats (Type: Integer, 11; NOT NULL)

jos_eventlist_register with a custom added column highlighted in red

Of course instead of 11 I could have selected a smaller number, but I decided it to be like this for possible future modification of the source of the data. If the submitted data is not numeric but variable, then you might select as type “Varchar” or other types depending on the type of data.

You can name the column whatever you want.

Once you created the new column, you can continue to step two.

Step two: modifying the submission page layout (frontend)

I always found modifying the frontend of the page the most fun part, because you can play with the form controls, the styles, etc. and make everything look cool and integrated with the page as a whole.

The page template for the user registration to an event can be found in the following route:

components/com_eventlist/views/details/tmpl/default_attendees.php

Remember to make a backup of the file before making any edits! Just in case.

The HTML code I added to create the drop down menu is as follows:

<select id="invitats" name="invitats" size="1">
<option value="0" default>0</option>
</select>

(… note that I did not include all the 15 option values in the code above).

Basically what is most relevant is the form element name, because it is the reference used when submitting the data and putting it into the right place of the database. For the sake of simplicity, I chose as name of the drop down menu exactly the same name of the database column I previsouly created.

Step three: modify the processing code

It took me a while to understand the whole process of submitting data to the database used by EventList. Not that I now fully understand completely how every aspect of the component works, but at least I managed to find out what was of my interest.

First open:

components/com_eventlist/models/details.php

Notice this file is in the models folder, not in the views. The file contains only PHP code and therefore it is not a page shown in the frontend. Basically it contains some functions which are called from other pages but are all stored together in this single file.

Find the function userregister. In the very end it contains the following:

$obj = new stdClass();
$obj->event     = (int)$event;
$obj->uid       = (int)$uid;
$obj->uregdate     = gmdate('Y-m-d H:i:s');
$obj->invitats  = $invitats;
$obj->uip       = $uip;
$this->_db->insertObject('#__eventlist_register', $obj);

The code in line #5 is the one I added custom. Notice its structure:

$obj->db_column_name = $frontend_form_element_name

As I used for the database column the name “invitats” and for the form drop down menu also “invitats”, the new line looks as follows:

$obj->invitats  = $invitats;

If I didn’t forget anything, that should be all what’s needed. The data introduced by the user in the form element will be submitted together with the rest when the user signs up for the event and stored in the database. You may write further code in order to retrieve the data from the database from other pages and so on.

If you want to retrieve custom data, read part two of this post: Retrieving custom data into EventList.