As you may know, Custom Fields were introduced in 2017 with the release of Joomla 3.7.

Many of us are aware of their existence, but not everybody has already realised how powerful these are or had the opportunity to exploit them. The idea of this article is to present a few recent projects which have used Custom Fields. Hopefully this will stimulate many of us to give it a try and to start to play with them.

And I think it is really worth it : Custom Fields bring Joomla to another level.

Before starting our examples, we would like to take this opportunity to thank the creator of those Custom Fields, namely Allon Moritz (aka laoneo), who is also involved in many other areas within the Joomla project.

What are Custom Fields ?

At this time, Custom Fields are available in three components of Joomla:

1. Articles
2. User profiles
3. Contact

The present version of Joomla offers 15 types of fields. Here's a screenshot showing the rendering of these 15 fields:

On this screenshot, we see in the backend an example of the following native fields:

Calendar Field	Provides a text box for entry of a date. An icon next to the text box provides a link to a pop-up calendar, which can also be used to enter the date value.
Checkboxes Field	Provides a single checkbox to be checked or unchecked.
Color Field	Provides a color picker when clicking the input box.
Editor Field	Provides a drop down list of the available WYSIWYG editors.
Usergroup Field	Field to load a drop down list of available user groups.
List Field	The list form field type provides a drop down list or a list box of custom-defined entries. If the field has a saved value this is selected when the page is first loaded. If not, the default value (if any) is selected.
List of Images Field	Provides a drop down list of image files.
Textarea Field	Provides a text area for entry of multi-line text.
Text Field	Provides a text box for data entry.
Media Field	Provides modal access to the media manager for insertion of images with upload for users with appropriate permissions.
Integer Field	Provides a drop down list of integers between a minimum (first) and maximum (last) value.
Radio Field	Provides radio buttons to select different options.
Sql Field	Provides a drop down list of entries obtained by running a query on the Joomlaǃ Database. The first results column returned by the query provides the values for the drop down box.
Url Field	Provides a URL text input field.
User Field	Provides a field to select a user from a modal list. This field displays the User Name and stores the User ID.

These 15 native fields allow many possibilities, but it is also possible to:

• Find other custom field options (free or paid) on the Joomla Extension Directory (JED), which has recently added a Category for Custom Fields
  Note : not all developers have added their extension to this category yet, either because it is new and they may not be aware of it, or perhaps because the main purpose of their extension could be something else, even it it compatible with Custom Fields. So be sure to also perform a simple search with the keywords "Custom Field" to find more options.
• Find more custom field examples on Github or other places
  Beware : one should always check the reputation of a Developer before downloading/using an extension, especially if the extension is not on the JED.
  Some possible reputable sources to consider:
  • Custom Fields by Allon Moritz himself
  • This compilation of resources about Custom Fields (note : the article itself is in French, but the vast majority of links are in English)
• Create your own Custom Field as they are in fact "simple plugins".
  (BTW, be there at JoomlaDay Netherlands on 13-14 of April to attend a session about this by Elisa Foltyn)

Some examples of uses of Custom Fields in real life

In early 2018, AFUJ (the French-Speaking Association of Joomla! Users) conducted a survey within its community in order to have an overview of people's knowledge and expectations about Custom Fields. The results showed that 94% of respondents expressed the desire to see real examples of Custom Fields in use.

Following this, we have tried to compile a few interesting cases in different areas in order to illustrate the opportunities offered by Custom Fields and hopefully to give inspiration.

Here are 6 examples:

1. Directory of persons

This Professional Association wanted to show a list of its members.

https://www.bbpo-fbpo.be/fr/trouver-un-professionnel-de-l-organisation

The following compact view shows the list of all members with their main information:

When clicking on one of these members, the detailed view shows even more Custom Fields:

• On the left
  • profile picture
  • logo
  • phone
  • email
  • website
• On the main part
  • the body of the article describing its services

This site has actually used Articles for this, but it would be quite possible to build it:

• With Contacts, with the same rendering and, for example, an associated contact form; or
• With User profiles, if we wanted each member of the Association to modify their own profile.

2. Movie data sheets (film festivals)

We have two examples of Film Festivals.

The first website is for a Short Film Festival.

https://www.lejourlepluscourt.be

Custom fields were used to show for each session:

• Date & time
• Venue
• Trailer
• Introduction
• List of short films for that session

A second site is for a Documentary Film Festival.

https://www.we-doc.be

This website is a little more complex. There are 2 Categories of Articles, having each their own Grouped Custom Fields:

• Films (documentaries)
  • Group "Description"
    • Director
    • Year
    • Trailer
    • …
  • Group "Sessions" : repeated
    • Calendar
    • Price
    • Link to Venue
• Venues
  • Province
  • Website (url)
  • Map
  • Link back to the other Films for that Venue
  • ...

As there are different dates and provinces, a simple filtering tool (1) has been added to make the selection (2) by the visitor more user-friendly.

The wall with all the films would appear as follows. When hovering a film (3), all sessions of that film are shown. By clicking on a film (4), the detailed view of that film is displayed.

3. Content rendering

Custom Fields can be used to structure content (Articles, Contacts or Users) ... but not only that! They can also be used only for design purposes.

Here's a demo of several "experiments" made by Christian Bardin.

http://www.greendog.fr/experimentations

In particular, the 6th experiment uses the Custom Field "color" in order to assign an overlay color to each item. This color is not displayed in the article itself, but used in the override (of the Latest News module) which retrieves each color and puts it as background for each item of the module. Very smart and very nice effect.

Want to know more about Layout Overrides and Custom Fields?

Be there at JoomlaDay FR in Paris on 18-19 May as there will be a session on Overrides Layout (FR).

4. Knowledge Base

As its name suggests, this multilingual website explains how to clear the cache for all Platforms and all Browsers:

https://clear-my-cache.com/

https://browser-cache-leeren.de/

https://vider-mon-cache.fr/

The information is structured on 4 tabs on the right of each page:

• Image Instructions with a gallery of screenshots
• Video with a tutorial
• Plugins with some more instructions
• Icon displaying the main icon of the browser

5. Products Catalog

This company wanted to have an online catalog.

https://www.axmo.fr

The Product page uses Custom Fields to show picture / brand / description / characteristics / dimensions / models (1).

A contact button (2) displays a contact Form This form automatically integrates the Custom Fields of the product in the email which is then generated.

Finally, by using Joomla native Tags (3) the visitor can directly access all the products of the same brand in the catalog.

6. Event website

Last but not least, a nice example of what can be achieved with Custom Fields is the brand new website for the JoomlaDay Paris.

The whole idea of this revamped website was precisely to show how far you can go with the core of Joomla. So it is basically exclusively based on Custom Fields, without any additional big extensions!

https://www.joomladay.fr

The site uses Articles to display 3 different types of data:

• Conferences
• Speakers
• Meeting rooms

Each Conference is linked to its Speaker(s) and its Meeting room. Even this link is managed… by a Custom Field. It could have been a native SQL Custom Field, but to make it easier and more flexible, we used a dedicated Custom Field.

You will also note that:

• One speaker can have multiple conferences
• One conference can have multiple speakers
• And obviously each meeting room can have multiple conferences

Of course, before starting to develop the website, you need to think twice about all the Fields you will need. In order to limit the number of Custom Fields, whenever possible we also used the traditional Article fields like Title / Description / Intro Image / Full Image.

So for each Category, we first made a list of traditional and of Custom Fields we needed, making Groups so that each Group would automatically appear on a distinct Tab when editing the Articles.

The resulting website can be seen on the following screenshots.

For a given conference you would see:

• in the orange section on top of the article
  • the pitch in one phrase
  • the date + start/end time
  • the meeting room (with a link)
• in the white section :
  • The "traditional"  Title and Description of the conference
  • The related speaker (picture + name with a link)

The Schedule view gives an overview of all conferences by making a layout override of Latest News Module, where the different Custom Fields are called:

• Start/end time of sessions
• Meeting room
• Pitch
• Speaker (related article)

This is not the end

Of course, with these 6 examples we do not pretend to have covered all that can be achieved with Custom Fields. As previously stated, the objective of this article is simply to give a flavour of how powerful and easy Joomla can be when using Custom Fields.

The only limit now... is your imagination! And we would be very pleased if, in turn, you could share your cases/experiences/feedbacks/suggestions/... with the Community :)

Want to know more ?

Do you want to know more about Custom Fields?

Here are some useful references:

• Let's start with the first place you always want to look at : docs.jooma.org of course
  https://docs.joomla.org/J3.x:Adding_custom_fields.
• During JoomlaDay NL 2017, Sander Potjer made an excellent introduction to Custom Fields.
  • His article was published in the Webdesigner Magazine 94 NL
  • We have provided a FR translation of it :
    https://cinnk.com/magazine/juillet-2017/977-les-champs-personnalises-dans-joomla
• We have also compiled a collection of resources about Custom Fields in this blog post (the text is in FR, but the vast majority of links are in EN)
  https://cinnk.com/magazine/juillet-2017/960-custom-fields-bonus

But even better than reading... is meeting.

Joomla has a great Community and we have several opportunities to meet in a near future at JoomlaDays with sessions dedicated to Custom Fields:

• JoomlaDay NL in Eindehoven, 13 & 14 April 2018
  • Custom Fields : how far can you go ? (EN)
  • Create your own Custom Fields plugin (EN)
• JoomlaDay FR in Paris, 18 & 19 May 2018 (so if you are hanging around in Europe after J&Beyond in Cologne, 11-13 May 2018, why not enjoy Paris afterwards ?)
  • Layout overrides (FR) - very useful to customise the display of your Custom Fields
  • Custom Fields : how far can you go ? (FR)

---

The authors : this article was written together by Christian Bardin (aka Greendog), Marc Dechèvre (aka Woluweb) and Marc Studer (aka Garstud)