Joomla! Documentation™

Joomla! 

4.x

Tutorial
Custom Fields - Creating a URL Field

Introduction

The URL Field provides a field for Content Writers to input a URL into content that will be output as a link on the Frontend.

It allows them to enter data that will be output in a consistent way, in whatever way it is used.

Creating the field

In this example we will create a URL Field to output a link to information related to an article.

From the Sidebar Menu in the Backend choose Content then Fields.

Before clicking the New button, check the dropdown list below the New button is set to Article - this is the default setting for use in the Article view.

NOTE: Although this tutorial covers creating a URL field to create a link for use in an article, the following steps are the same if you were creating one for use in the Contacts Component (remember to set the view before clicking new) or for use in the Users Component.

Click New.

The Field Editor will open on the General tab.

Enter a Title. This should be specific to the purpose of the new field. Avoid generic titles in case you want to use other checkbox fields in other places. In this example we have entered Aircraft Information.

On the Type field choose URL.

The Name field will be filled in automatically on saving the field but you can enter a different one. It should be lowercase and separated by hyphens where necessary.

The Label field is automatically set to be the same as the Custom Field Title but you can enter whatever you want. The value you enter is output on the Frontend if you choose to show the Label.

Add a Description if it will be useful. It is not required.

Set the Required Field to Yes or No with the toggle button. Setting to Yes will make the field a required one that cannot be skipped or forgotten.

The Only Use In Subform only needs to be set to Yes if you want to make it available as a Subform field.

The Default Value allows you to set a default value - in this case it is not required.

At Schemes you can set what type of link you will outputting which can be HTTP, HTTPS, FTP, FTPS, FILE or MAILTO. By doing this you can control the type that needs to be input by the Content Writer. For example, if you do nothing as the Content Writer tries to enter just joomla.org a message will prompt to add a scheme type and show a list of options. If you set the Scheme to HTTPS the message will just state you need to add HTTPS to the front of, for example, joomla.org.

Relative URLs is for if the URLS will be to pages on your website and you can choose whether they should be Relative URLS: about/mypage or absolute URLs: https://www.mysite/about/mypage.

Restricting availability of the Custom Field

In the example shown we have set a Field Group of Aircraft. This means the Custom Field will be available via a tab named Aircraft in the Article Editor.

The Custom Field has also been set to use the Aircraft category. This means the Custom Field will only be available in articles set to the Aircraft category.

At this point you have entered sufficient information to create the Custom Field and make it available for use.

URL Field Options

Form Options

Options for using the Custom Field Form.

Placeholder - You can add a placeholder to guide Content Writers. This is particularly useful to show the expected URL format (scheme).

Field Class - You can add a class used in your CSS style sheet to style the field.

Label Class (Form) - You can add a class used in your CSS style sheet to style the label in the form.

Editable In - Set for Frontend Editing, Backend Editing or both.

Showon Attribute - used if you want to show the field dependent on the value of another field. This is typically for more advanced usage in plugins, modules, overrides, layouts etc. An example might be where a Custom Field type List is being used; a value assigned to one of the list items can be used as the Showon Attribute. Think of it as a filter setting - only show the output where the attribute matches the value used in, for example a list field. So, for example, if a list contained aircraft manufacturers, you might want to output a link to the manufacturer website if the manufacturer was selected from the list.

Display Options

Options for the display of the Custom Field Output on the Frontend.

Display Class - You can add a class that is used in your style sheet to target the container that holds or wraps the field.

Value Class - You can add a class that is used in your style sheet to target the styling of the field.

Label - Show or hide the Custom Field Label.

Label Class (Output) - You can add a class that is used in your style sheet to target the the styling of the Custom Field Label that is output.

Automatic Display - This is closely linked to the Component Output.

• After Title places the field output after the Component Title (after the article title, contact title or user title)

• Before Display Content (above the article, contact, or user content)

• After Display Content (below the article, contact, or user contact)

Note that these 3 settings assume default Joomla! output and could look different with other templates or if Custom Overrides are in use.

• Do not automatically display will only display the output where you choose to display it by using Joomla's Insert Field function or your custom overrides if you use them.

Prefix You can add a Prefix to be output before the Custom Field output.

Suffix You can add a Suffix to be output after the Custom Field output.

Layout If they are used, you can select an alternative layout for the Custom Field.

Display when Read-Only If you need to hide the field - this relates to user access control levels (ACL).

Save the Custom Field

Click Save & Close and the Custom Field is available to use.

Using the field in the Backend

In the Article Editor select the Custom Fields tab to access the Custom Field. In the this example we have a Field Group named Aircraft that was assigned to the Category Aircraft. As the Article is assigned to the Aircraft category, the Aircraft tab is available that will contain one or more Custom Fields assigned to that Field Group. If you are not using Field Groups look for a tab named Fields.

In this example we created a URL field called Aircraft Information. This field is now available for all our articles in the Aircraft Category and in the Field Group Aircraft.

Entering a URL will render the value as a link on the Frontend once the Article is saved.

Frontend Output of the URL Custom Field

In the Frontend, you can see the field as you see in the following image. The option in Automatic display is responsible for the position of the field and your template is responsible for the layout of the field.

Fields are only displayed in the Frontend if you have filled them with data in the article. Setting filds as required is a good way to ensure they are not skipped or overlooked.

Note that the output is displayed with a bullet point - this is the default layout and may look different dependent on your template.

It is possible to change the layout or to apply some styling using your CSS style sheet.

When you create a Custom Field a style class is added based upon the field name when the Custom Field was saved. If you are familiar with your browser developer tools you can use the Inspector to see the class and use it in your stylesheet.