Custom Fields

Custom Fields are at the heart of JReviews' structured data functionality for creating and displaying content. There are many types of fields and options for customizating their data-entry in forms and their output via templates.

Overview

Custom fields offer a lot of functionality for data entry and output display in templates. Continue reading to learn more about the different field types available and how to take advantage of the features available to make them work for you.

If you are looking for more information on how to structure your content, create and setup fields, this is covered in more detail in:

More custom field-driven functionality and features can be found in these articles:

Field Types

  • Banner

    Output-only field that doesn't show up in forms. Use the field's description to output a static message, which is the same for all listings, or use the available tags to combine the output of multiple fields.

  • Checkbox, Select Multiple

    Uses pre-defined options and allows choosing more than one option. You can set maximum select option limit and the option ordering (A-Z or admin defined).

    Autocomplete UI can be enabled for Select Multiple and allows looking up values with autosuggest. Useful for long lists. After more than one option is selected, the tags can be dragged and dropped into the desired order.

  • Code

    Allows storing javascript code, so only admins should be granted write access to this field. Can be used to paste widget code provided by 3rd parties.

  • Date

    Shows a calendar widget to select a date.

  • Decimal, Integer

    Limits inputs to decimal and integers respectively.

  • Email

    Text input requires entering a valid email address.

  • FormBuilder

    Learn more about the uses for the FormBuilder Custom Field.

  • Select, Radiobutton

    Uses pre-defined options and only allows choosing one option. You can set the option ordering (A-Z or admin defined).

    Autocomplete UI can be enabled for select lists and allows looking up values with autosuggest. Useful for long lists.

  • Related Listing

    Learn more about the uses for the Related Listings Custom Field

  • Text

    Your standard text input field.

  • Textarea

    Your standard textarea input field. You can turn own HTML support and a simple WYSIWYG editor using the field's settings.

  • Website

    Text input requires entering a valid website URL.

Output Format

The output format setting is quite versatile without the need to write any code. In cases where you need to do more, you always have the option of using the PHP Output Format.

There are several pre-defined curly-brace tags you can use in the output format. These include: {listing_id}, {title}, {alias}, {category}, {fieldtext}, {fieldtitle}, {jr_fieldname}.

The default output format is the {fieldtext} tag, and you can use that, together with custom HTML and the above tags to build things like affiliate links, clickable links and buttons, embed a video player, and more.

You can find some examples below:

Combine Output of Multiple Fields

It's possible to combine the output of multiple fields into one field. This is also a feature of the banner custom field, but it can also be used on other fields that support this.

For example, if you have multiple address fields (e.g. street address, city, state and postal code) it can be a bit verbose to output all of those separately. Instead you can choose one field (e.g. the adddress field) and bring in the output of the others.

<div>{fieldtext}</div>
<div>{jr_city}, {jr_state} {jr_postalcode}</div>

In the above code {fieldtext} will show the output of the current field (e.g. address). When using this feature, it's important to:

  • Make all fields required so you don't have hanging commas or too many spaces when some fields are not filled out
  • Hide the other fields from view (e.g. listview, detailview), but leave them published

Beautify Contact Phone Number

If you have a text field for a contact phone number, you can use the output format to add a link so it opens the phone application when clicked on a mobile phone, and also include a phone icon, in this case via an SVG icon:

<a href="tel:{fieldtext}" class="fwd-relative fwd-w-0 fwd-flex-1 fwd-inline-flex fwd-items-center fwd-justify-center fwd-py-4 fwd-text-sm fwd-leading-5 fwd-text-gray-700">
  <svg class="fwd-w-5 fwd-h-5 fwd-text-gray-400" viewBox="0 0 20 20" fill="currentColor">
    <path d="M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z"></path>
  </svg>
  <span class="fwd-ml-3">{fieldtext}</span>
</a>

The above example uses CSS class names available in JReviews.

Change Anchor Text for Website Field

To change the website field anchor text to a custom text use this output format:

<a href="{fieldtext}">Visit Website</a>

To show the link as a button

<a href="{fieldtext}" class="jrButton jrBlue">Visit Website</a>

If you are writing product reviews and want to include affiliate links, for example to Amazon.com, it's not necessary to copy the entire URL into the affiliate website field every time. Instead, you can use a text custom field where you enter the product code/number and then use that in the output format to build the complete URL:

<a href="https://www.amazon.com/dp/{fieldtext}?tag=AFFILIATE-ID">
  Buy this product
</a>

You can also add an image as the anchor text:

<a href="https://www.amazon.com/dp/{fieldtext}?tag=AFFILIATE-ID">
	<img src="/path/to/image.jpg" />
</a>

Embed Media

The same approach can be used to embed any type of media. JReviews already comes an easy way to import and embed videos, but you may have media from other sources that you wish to embed. Using a YouTube example you can use either a website or a text custom field. In this example, we use a text field so all we need to add to the field is the YouTube ID.

<iframe width="560" height="315" 
        src="https://www.youtube.com/embed/{fieldtext}" 
        frameborder="0" 
        allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
        allowfullscreen>
</iframe>

Cannot Create New Fields

If you are creating a lot of custom fields, at some point this may stop working. The reason is an inherent limit in databases for the number of columns in a table. To maximize the number of custom fields, there's a couple of things you can do:

  1. Change number of Maximum Characters

  2. Change the column data type from VARCHAR to TEXT

Maximum Characters

Most field types use VARCHAR for the column data type, making it possible to add indexes and improve performance, especially for fields enabled for Click2Search.

When you create a custom field, it will default to a maximum of 255 characters. Most likely some of your custom fields don't need that many characters and reducing the maximum character setting will free-up space for new fields.

Go to the Fields Manager, click on a field, and click the Max. Data Length button to adjust the number of maximum characters. There are two numbers here. One is the current value set for maximum characters. And the other is the actual character length currently in use within this field.

For example, in a City custom field, the longest citiy name option could have 15 characters, while the maximum characters is set to 30, just in case longer values will be necessary later.

The maximum characters value should always be greater or equal to the actual used value. However, for Multiple Select and Checkboxes, the math is different because the required length will depend on the number of options chosen for the field. The storage format for these fields looks like this:

*option-1*option-2*option-3*

All values in a single string wrapped in asterisks. So the maximum characters set needs to account for this and shouldn't be set too low if you expect a field to have any number of options selected/checked.

Column Data Type

If reducing the number of characters doesn't help, you can try changing the column data type of some of the text, radio, select, multiselect and checkbox custom fields from VARCHAR to TEXT.

This can be done through any database client, the most common one being phpMyAdmin.

Find the #__jreviews_content table and click on the structure tab. Then find the table columns that correspond to the fields you want to modify and choose TEXT for the data type.