How to use Joomla 3.7 Custom Fields? - JoomShaper

How to use Joomla 3.7 Custom Fields?

04 May 2017
Hits 28,420
5 min read
How to use Joomla 3.7 Custom Fields?

The new shiny glamor of Joomla 3.7 is Custom Fields. It is an amazing feature that empowers you to integrate numerous elements right into your articles and gives more functionality and design elements. Adding multiple attributes is now quite easy with the new Custom Fields feature of Joomla 3.7. In this article, we are going to describe how you can use Joomla 3.7 Custom Fields and get the maximum output from it.

Let's start by giving huge thanks to the Custom Fields project contributors. Custom fields are the much-awaited feature since the release of Joomla 3. In Joomla 3.7, there are 15 different types of fields options like calendar, lists, checkboxes etc. In articles, the Custom Fields arrive at separate tabs and you can customize it there to show the attribute in your article. Now let’s have a detailed view on Custom Fields. 

Custom Fields can hugely save your time by offering ready-made attributes or information at the fingertips to use repeatedly and effortlessly. 

How to use Custom Fields?

In the Content tab, there are two options “Fields” and “Field Groups”. In the Fields page, you can create the custom fields and on the Field Groups page, you can create a group of fields.

Create a field group

First, we are going to make a field group and then some fields under it. After this, we will try to implement it in articles.

To create a field group, open the Field Groups option under the Content tab. In the upcoming window, click ‘New’ to make a new field group. After that, a new window will pop up.

How to use Custom Fields

Give your field group a title and some description. Then set the status to published. Here we have created a field group named “Mobile Specification”.

Create new fields: General

In the Fields page, click ‘New’ to add new fields. There are a few options you have to fill while adding the new field.

Title: Give your field a title.

Name & Label: You can add them or they will be automatically generated from the title.

Description: Add a short description of your field.

Required: Set the option to 'Yes' if the field information is must in the article.

Type: There are 15 different types of field. Use the required types relevant to the field.

Default Value: You can set a default value for your fields here. 

Filter: Control your content appearance by filtering the input.

Maximum Length: You can define a maximum length of the input.

Create new fields: Options

In this tab, you can add a placeholder, render class, edit class and customize few things. What most important here is the automatic display. You can set the automatic display option of the field after the title, before display, after display or you can set the display to No to add the field manually into your article.

Create new fields: Publishing

Select the field group and categories here. You can set the category to all or just to some specific categories, or just a single one.

Now, let's recall, we have created a field group named “Mobile specification”. Now we are going to add some fields to it.

Field Group: Mobile Specification

Field 1: Technology (text)

Here we just added the title and description and set the type to text.

Field 2: Launch (calendar)

Here we just added the title and description and set the type to the calendar.

Field 3: Memory Card (radio)

What extra you have to do here is that you have to add some radio values. Here we have added two new values 'Yes' and 'No'.

Field 4: Features (list)

Using this field type, you can make a list. Here we've made a list of features. You have to also give them values.

Field 5: Camera (checkboxes)

In this field, what extra you have to do is adding some checkbox values. Here is one done for you.

Field 6: Phone Color (color)

Here we just added the title and description and set the type to color.

Now, so far we have created a field group named “Mobile specification” and six different types of fields inside the field group. Now we are going to use them in our article.

Use of Custom Fields in article

Let's go to the Articles menu and create a new article. Here you can see, in the new article editor box, our created field group 'Mobile Specification' is there in a separate tab.

Now it’s time to put data into our fields. Go to the Mobile Specification tab. There you can see six input fields that we've created earlier. Input your data per the requirements.

Now click the field button in the editor. There is a list of the fields in the Field group. Add them to the article.

Final output

Now see the output in the article.

Wrapping up

In this article, we've tried some of the basic functionalities of Joomla 3.7 Custom Fields. We will publish more articles regarding this awesome feature. Meanwhile, please don't forget to share your thoughts and suggestions with us in the comment section below. Signing off, thanks for reading.

Comments (36)

JK
Jan Kijlstra
This comment was minimized by the moderator on the site

Nice tutorial

Is there a way to download it as a PDF-file?

Arafat Bin Sultan
Arafat Bin Sultan    Jan Kijlstra
This comment was minimized by the moderator on the site

Hi Jan Kijlstra, thanks for reading the tutorial. You can save this webpage as a PDF using Google Chrome 'CTRL+P' print command. Just press CTRL + P, and select 'Save as PDF' from the Destination.

David Podesta
David Podesta
This comment was minimized by the moderator on the site

How can pagebuilder make use of custom fields

Arafat Bin Sultan
Arafat Bin Sultan    David Podesta
This comment was minimized by the moderator on the site

Hi David, you can utilize Custom Fields in your articles to enjoy smoother and faster publishing experience. At the same time, you can beautify your articles using the SP Page Builder. So, the both technologies offer you a richer publishing opportunity together. Thank you!

O
onlinelig
This comment was minimized by the moderator on the site

Great article fox! I really am looking forward new custom fields guides especially about how to change positions of them in the article placements and how to css better and fast, so for example we can have different positions of different fields in the articles for a better article layout etc.

Thanks for sharing, hope to have them coming for more design within Helix3 templates.

Arafat Bin Sultan
Arafat Bin Sultan    onlinelig
This comment was minimized by the moderator on the site

Of course, onlinelig, we'll publish more articles on Custom Fields in coming days. Please stay tuned. Thanks

AFRINIC Webmaster
AFRINIC Webmaster    Arafat Bin Sultan
This comment was minimized by the moderator on the site

Hello any update on the custom fields positioning please?

For example what if I need those those fields to appear on the top right corner of the article?

Can anyone suggest something regarding this. Thanks.

AFRINIC Webmaster
AFRINIC Webmaster    AFRINIC Webmaster
This comment was minimized by the moderator on the site
M
Michael
This comment was minimized by the moderator on the site

Great tut. I'd like to see how much this can be extended.

Arafat Bin Sultan
Arafat Bin Sultan    Michael
This comment was minimized by the moderator on the site

Sure, Michael, we'll explore more goodies in Custom Fields (including other new Joomla 3.7 features). Thanks for being with us.

Arun Sasi
Arun Sasi
This comment was minimized by the moderator on the site

Create a video tutorial

Arafat Bin Sultan
Arafat Bin Sultan    Arun Sasi
This comment was minimized by the moderator on the site

Thanks Arun, for the suggestion. We're also planning this

X
xenium
This comment was minimized by the moderator on the site

Hello

Is it possible that the custom fields are not show in blog view? Or maybe after the title of the article?

Rifat Wahid Alif
Rifat Wahid Alif    xenium
This comment was minimized by the moderator on the site

Hi,
You can overwrite the code for hiding the custom field in te blog view or you can hide it by CSS.

And yes you can show custom fields value after the title. You will get this option while you create or edit custom field group.

- Thanks

SB
Steve Babbitt
This comment was minimized by the moderator on the site

I'm a little confused on two items currently:

1. The output of the "color" field -- is there a way to actually apply the color to an element (background of a div or text color in a span, for example)?
2. How to display field values in a list view, like a table or a grid, similar to what Views does in Drupal ...

Any ideas there?

Shayan Davoodi
Shayan Davoodi
This comment was minimized by the moderator on the site

Oh my God, I should start crying right now Joomla! is super scalable and extendable now! Fantastic and thanks for this nice walk-through Joomshapers.

Rifat Wahid Alif
Rifat Wahid Alif    Shayan Davoodi
This comment was minimized by the moderator on the site

Thanks for supports Joomla!

Georg Klaißner
Georg Klaißner
This comment was minimized by the moderator on the site

For those who (like me) miss the "fields" and "field groups" entries in the content menu after upgrading Joomla from a previous version, dont forget to go to "Extensions -> Manage -> Discover". There is 1 component and so far 18 plugins to install and enable, then this great feature is available

Rifat Wahid Alif
Rifat Wahid Alif    Georg Klaißner
This comment was minimized by the moderator on the site

Thanks for the information. But you are getting default Joomla components or plugins in the Discover?

- Thanks

M
mypenonline
This comment was minimized by the moderator on the site

How to align Fields in right hand side of text in helix 3 template
see the below image for clear idea

<a href="http://pixady.com/image/qjo/"><img src="http://img.pixady.com/2017/05/627551_untitled1_460x240.jpg" alt="" /></a>

M
mypenonline    mypenonline
This comment was minimized by the moderator on the site

[img]http://pixady.com/image/qjo/[/img]

Rifat Wahid Alif
Rifat Wahid Alif    mypenonline
This comment was minimized by the moderator on the site

Hi,
You can write CSS for this, or post in our forum or you can discuss with helix community members from here: https://www.facebook.com/groups/819713448150532/

- Thanks

O
Oğuz
This comment was minimized by the moderator on the site

After upgrading to newest Helix 3 the Article Infos started to dissappear on hover, a previous versions bug started to arise again. Fyi.

Rifat Wahid Alif
Rifat Wahid Alif    Oğuz
This comment was minimized by the moderator on the site

Hi,
Please make sure that Mootools isn't conflicting with tooltips.

- Thanks

O
onlinelig    Rifat Wahid Alif
This comment was minimized by the moderator on the site

Hello Rifat,

How exactyl i can be sure of this ? Thanks in advance. I have the same problem..

A
arie
This comment was minimized by the moderator on the site

Hi
Thanks for the article
Now, there is a possibility do make a filter with those fields? that is, showing for example, only the articles with red color

JP
javad pourshahabadi
This comment was minimized by the moderator on the site

Hi
Is there any way to use this custom fields in sp page builder?
i've integrated joomla article by sp page builder, but the problem is that i can't load these fields in my page(they shows outside the sp page builder area)

Nayem Majhar
Nayem Majhar    javad pourshahabadi
This comment was minimized by the moderator on the site

share your article link us. Thanks

JP
javad pourshahabadi    Nayem Majhar
This comment was minimized by the moderator on the site
JP
javad pourshahabadi    javad pourshahabadi
This comment was minimized by the moderator on the site

SN
Siam Naulak
This comment was minimized by the moderator on the site

By default the Fields are above the article, how do I assign at the bottom as show here https://www.joomshaper.com/images/2017/05/04/final-output.png

SN
Siam Naulak    Siam Naulak
This comment was minimized by the moderator on the site

Sorry... found it

M
markmark
This comment was minimized by the moderator on the site

This would make sense if it were able to appear in a module as well

{fieldgroup 1} and {field 3}


But it is not possible to do so now, so it does not make much sense

MF
Malak Francis
This comment was minimized by the moderator on the site

I wonder if there's a direct way to filter articles based on these added fields?
Thanks

Bulent Turgut
Bulent Turgut
This comment was minimized by the moderator on the site

I want to use more Filed Group in an article, and also I want to see the name of Field Group in article. Because I dont' want to see lots of mixed lines after my article. Last thing; why I see lines of Fields in blog view? Can I close to see it? Thank you so much.

SN
Siam Naulak
This comment was minimized by the moderator on the site

I tried this now, and the Field Group came before the page content. How do I move down to bottom after the content?

Screenshot here...
https://imgur.com/a/CuVAoED

There are no comments posted here yet

Sign up for our newsletter

Don’t miss any updates of our new templates and extensions and all the astonishing offers we bring for you.