Custom Fields - Episode 2 : how to manage your Custom Fields

Written by | 04 May 2018 | Published in 2018 May
Do you have a project idea where Custom Fields would be useful ? Excellent, in this second article (Episode) in a series on Joomla Custom Fields, we show you how to manage and display your own Custom Fields.     

The article "How far can we go with Joomla! and Custom Fields", published in the last edition of the Joomla Community Magazine had many views, illustrating the interest around this. The topic was also presented at JoomlaDay Netherlands in mid-April.

Obviously, the most frequent reaction on this series of examples of real websites implementing Custom Fields was "OK, great. Now that I see what can be achieved, I also want to play with Custom Fields. But how does it work in the backend... and how do I display my own in the frontend ?"

Actually, the good news is that Marc Studer has taken the initiative to coordinate a series of articles about Custom Fields to be published on the French Joomla! Portal, namely www.joomla.fr/actualites.

So our goal is to translate all these articles into English for the JCM so that everybody can enjoy.

Hopefully this can also create some sort of emulation. Please, send us your website making use of Custom Fields in the Comments below. And even better : be proud and publish them on showcase.joomla.org :)

This article will indeed explain the basics to manage and display your own Custom Fields.

Manage your Custom Fields

Custom Fields can be natively added to Articles, Contacts and Users. So the backend now has new submenus allowing you to manage them:

In the Article Manager (in the backend, menu "Content > Articles"), there are two new submenus on the left :

  • Fields : allowing management of your Custom Fields
  • Fields Groups : allowing grouping of those fields so that they will appear on different Tabs when you edit, for example an Article

 

In this article, we will first show how to add a Text field showing the Director for all articles of the Category Movies.

 

When you click on the Fields submenu item, you access the Custom Fields Manager. There you can create a new Custom Field:

  1. click on New
  2. type a Title
  3. select a Type of field according to your need : text, calendar, list, ...
  4. give a Name to that field (optional : if empty the system will just use the Title as Name, just like an alias is derived from a Title)
  5. give a Label which will be displayed before the Field when editing
  6. type a Description which will appear in the label Tooltip
  7. choose whether the field is mandatory or not with the option Required
  8. fill in a Default Value if you want the field to be prefilled
  9. For certain types of field, a Filter option is available. In the case of a Text field, you can choose between raw, safe html, text, alpha numeric, integer, ...
  10. Maximum Length : the maximum number of characters that can be entered

Please note : some options can vary according to the selected Field Type. In this example, the Options are those of the Text Field

FForm of a new custom field

 On the right, you can also choose

  1. the Field State : Published, Unpublished, ...
  2. the Field Group (this option will be explained in more details in Episode 3)
  3. the Category, allowing you to limit the use of that particular Field to the Articles (/Contacts/Users) of certain Categories
  4. the Access, allowing you to limit that field to certain groups of visitors
  5. the Language, allowing you to limit the use of that field to a given language (useful for multilingual websites)
  6. a Note, being a memo for yourself about that field

 

The tab Options will be explained in more details in Episode 3. Only the last 3 options are detailed in the Present episode :

  • Show label : Yes/No
  • Show on : should the Field be shown only in the backend, only in the frontend or in both
  • Automatic display : defines how the Custom Fields should be integrated in your content (Article / User / Contact) 
    • After Title: obviously after the Title (but before the informations such as Date / Author / ...)
    • Before Display: just before the Article content (and after the informations such as Date / Author / ...)
    • After Display: after the Article content
    • Do not automatically display: the field will not be displayed. This is what you want to choose
      • if you want to use the shortcode like {field xxx} in order to insert your Field manually somewhere in your Content (xxx being the ID of the field)
      • if you make a Layout Override in order to have your own layout for example for all Articles or for all Articles of a given Category (this technique will be detailed in Episode 6)

Options for a Custom Field

 Once this is done, you can Save your new Field. From now on, that field will be available for the Articles (/ Contact / Users).

 

What if your Joomla instance doesn't offer Custom Fields ?

Custom Fields were introduced in 2017 with Joomla 3.7. The first thing to do is of course check that your Joomla instance is up to date.

By default, Custom Fields are enabled. So if you still don't see them (or if you want to disable them), you can play with Joomla's options.

 

In order to enable / disable Custom Fields for Articles / Contacts / Users, go respectively to the Articles / Contacts / Users Manager and click on the button Options (in the top-right corner of the interface).

Enabling Custom Field

 

Note : if you don't see this Options button in the Articles / Contacts / Users Manager then it means that you probably don't have enough Administration rights. In that case, please contact your website Administrator.

 

In these Options, go to tab Integration > Enable Custom Fields and select Yes: 

Enabling Custom Field

 

Note : Joomla is very powerful. Just like Joomla's native system of Categories can be used by third-party extensions, Custom Fields can also be easily integrated by third-party extensions. Some extensions already support Custom Fields so that you can customise further. This topic will be tackled in an another Episode.

 

 As soon as Custom Fields are enabled for Articles / Contacts / Users, the two above-mentioned submenus do appear in the Articles / Contacts / Users Manager, namely :

  • Fields
  • Fields Groups

 

Editing a Custom Field in an Article

In our example we have created a Field Director which will only be available for the articles of the Category Movies.

 

Note : when you first create a new article, no Custom Field is shown ! That is normal : unless a Field is assigned to All Categories, Joomla waits for you to select the article Category in order to display the Custom Fields which are assigned to that very Category!

 

Once you have selected the Category, a new tab "Fields" does appear. It contains all fields assigned to the selected Category.

Each field is displayed :

  • with its Label
  • followed by the field itself
  • if you have mentioned a Default Value when creating the Field, that Value will prefilled
  • if you have set Required to Yes then of course you cannot Save the Article until you have typed a value for that field

Saisir un Champ Personnalisé dans un article

When hovering the Label, a tooltip shows the Description of that field

The Description of the Label appears in a Tooltip

 

Display the content and the fields on the frontend

On the frontend, the Custom Fields will be displayed in the position that you selected for each field, namely (see above for details):

  • after title
  • before display
  • after display

Positions of Custom Fields in frontend

 If you want to have a specific display (for example your Content on the left and the Custom Fields on the right), then you will need to make a Layout Override (this will be explained in Episode 6).

 

Displaying fields in the text of an Article

Next to the 3 predefined positions, it is also possible to insert any field anywhere in the body of the Article by using the Field Content Plugin. In practice, there is a new button in your Editor called Field. When clicking on that Field button, the list of available Fields appears in a modal window. Just select the desired field. The modal window closes and the following tag is automatically inserted in your text : {field xxx} where xxx is the Field ID.

Insert a Custom Field within an article

 

 The tags {field xxx} are automatically replaced by their respective values in the frontend:

View of a Custom Field within an article

The label before the value of the Field can be displayed or not according to the corresponding Field option.

 

Searching on the content of the fields

By default, the Search does also cover Custom Fields. For example, if you search for the word "Spielberg" in the Joomla Search Engine, you will find any Article or Contact having that word in their Custom Fields (you will not find Users because they are not in the scope of search results).

Search on Custom Fields

 Note : if the word is found in the body of an article, it is typically highlighted but if the word is found in a Custom Field, there will be no highlighting as (for now) the Custom Fields are not displayed on the Search Engine Result Page.

 

New section : other examples of websites using Custom Fields ?

The present Episode is finished, but following the feedback of the first Episode we wanted to share new examples of interesting websites making use of Custom Fields. So every month we will try to showcase one of them.

This month, we will quickly show what has been achieved on a Hiking website made by Pascal Conreaux.

Hiking website

This multilingual website (FR, DE, EN) promotes hiking in Norwegian islands.

https://www.rando-lofoten.net/fr/randonnees-lofoten

Each Hike Sheet is built with Custom Fields:

  • duration
  • distance
  • island
  • difficulty
  • type

Certain information is represented by icons.

Multiple filters on Custom Fields

The specificity of this website is the use of an extension allowing multiple filters being also compatible with Custom Fields (NDLR : there is also another extension out there allowing you to not only add Filters but also to customize the Layout with a visual interface. And no doubt even more extensions are coming ! Regularly check extensions.joomla.org/tags/custom-fields and in particular the new section dedicated to Custom Fields extensions.joomla.org/category/authoring-a-content/custom-fields).

Those filtering possibilities of course allow us to go "one step further".

 

For the Detailed View of a Hike, a Layout Override has been made in order to get the following result  :

Custom Fields used on a Hiking website

Those techniques of Layout Override will be discussed here in a future Episode but also at JoomlaDay Paris on 18-19 May 2018.

 

On his Blog (in French) Pascal gives some tips & tricks about the implementation of Custom Fields on this project.

 

 

And now ?

So that is it for the second Episode. Hopefully you now have the basics in order to start using Custom Fields. But here is the program for the coming months :)

  • Episode 3 : Custom Fields Options in more details
  • Episode 4 : using Fields Groups
  • Episode 5 : Tips & Tricks for Custom Fields
  • Episode 6 : Layout Override for Custom Fields
  • Episode 7 : Going further with Custom Fields
  • ...
Read 2806 times
Marc Dechèvre

Marc Dechèvre

Marc Dechèvre makes his very first website in 1994, when the web was still quite confidential.

In 2008, he discovers Joomla. Quickly, he perceives its great qualities and the force of its Community. That Community gave him a lot... so in return he is very pleased to try to give back.

So that is why he turns out to be a regular speaker (in French / English / Dutch) at

  • international conferences like :
    • JoomlaDay FR
    • JoomlaDay NL
    • Joomla World Conference
    • CMS Africa Summit
  • meetings of several Joomla User Groups :
    • JUG Wallonie (French-speaking Belgium), being co-organizer
    • JUG Vlaanderen (Dutch-speaking Belgium)
    • JUG Ouagadougou (Burkina Faso, West Africa), that he founds after having lived there a few years

In addition, he regularly publishes articles, available a.o. on 

  • cinnk.com
  • www.slideshare.net/woluweb
  • slides.woluweb.be

En 2016, he is the 1st French-speaking person to get the Joomla Certification. Since then, he is involved in the Certification Working Group of joomla.org, in particular in order to help having the FR version.

In 2017, he enters the Board of AFUJ (Association Francophone des Utilisateurs de Joomla), the French-Speaking Association of Joomla Users.