Stand with Ukraine. Fight for freedom and democracy

Donate
Knowledge Base
/
JetEngine: Glossaries Functionality Overview
Back to contents

JetEngine: Glossaries Functionality Overview

From this tutorial, you will learn how to create Glossaries – lists of items with labels and values that can be used for various purposes. This JetEngine functionality can be used not only for its forms and meta fields but also for ACF plugin meta fields and JetSmartFilters sorting options.

If you choose manual input, the list of options in the Radio, Select, and Checkbox meta fields takes some time. You have to type in the label and the value for every item. The same story is for Radio, Select, and Checkboxes form fields. If you need to create that list just once and it doesn’t have many items, that won’t take an enormous amount of time. However, if you have to create the same list several times, it could be annoying.

That is what Glossaries are for. This functionality allows you to create a list of items with labels and values and use it as many times as you need. You won’t have to type in the same values on and on – the created list can be used for different multi-choice fields and forms. Moreover, you can use glossaries in the meta fields created with the ACF plugin and in filters of the JetSmartFilters plugin.

How to create a Glossary?

First of all, let’s create a glossary. Open your website’s dashboard, go to JetEngine > JetEngine Dashboard > Glossaries and press the “New Glossary” button.

new glossary button

Insert the name of the glossary into the Name bar. To add the item, click on the “New Field” button.

creating a new glossary

Every item you add has three features:

  • Field Value. Into this field, you have to put the value of the item. That value will be stored in the database and used for calculations if necessary;
  • Field Label. This is the name of the item that will be shown to the users;
  • Is Checked. Sometimes you may need to make some of the items checked by default. The user will be able to choose another option but you can offer her one of the variants. If you enable this toggle, this option will be “checked”. However, be aware that in the Select and Radio fields only one option can be chosen at the same time.
adding items to the glossary

You can add as many fields as you need, there are no limitations. When you are done, hit the “Save” button. You now have a ready-made glossary, so let’s take a look at how it could be used.

Using glossary in JetEngine meta fields

Go to the JetEngine > Post Types and open the post type where you would like to add the Radio, Select, or Checkbox meta field. Scroll to the Meta Fields section, unfold it, and click on the “New Meta Field” button.

adding a new mwta field

Give that field a name in the Label field, choose the “Radio” (or “Select”, or “Checkbox”) option in the Field Type drop-down menu, and enable the Get options from the glossary toggle. In the Glossary drop-down, select the glossary list you’ve created. 

radio meta field

Afterward, press the “Update Post Type” button. Now, let’s have a look how the meta field will look like in the post editing window. In the dashboard, go to the post type menu tab and open one of the posts. As you can see, the list of items was successfully used in the meta field. 

glossary meta field in the post

Using glossary in JetEngine Form fields

Proceed to the JetEngine > Forms menu tab and find the form where you need to add the Radio, Select, or Checkbox field. Open it, click the “Add Field” button and the editing button with a pencil-shaped icon on it.

form radio field

In the Type drop-down list, choose the “Radio”, “Select”, or “Checkbox” option. Define the Name and Label, and choose the “Glossary” option in the Fill Options From menu. The needed glossary can be chosen in the Select Glossary field. When you are done, click the “Apply Changes” and “Update” buttons. 

Now, go to the page where you would like to place the form and open it in Elementor page builder or Gutenberg editor. Find the Form widget or block and place it on the page.

In Elementor, it will look like that:

form with glossary field in elementor

And this is how it will look like in Gutenberg Editor:

form with glossary field in gutenberg

See, the list was successfully shown in both editors.

Using glossary in filters of JetSmartFilters plugin

So far, you can read how to create and assign filters to the page properly in our filter creating tutorial. Here, if you have the JetSmartFilters plugin installed, open the dashboard and go to Smart Filters > Add New.

glossary radio filter

Give this new filter a name, define Labels and choose the “Radio”, “Select”, or “Checkbox” option in the Filter Type drop-down. Select the “JetEngine Glossary” option in the Data Source field and the glossary you created in the Select glossary drop-down. Put the name of the meta field where you used the same glossary to the Query Variable bar and select the Comparison Operator. Afterward, click on the “Publish” button.

Now it is time to place the filter on the page and apply it to the Listing Grid. Let’s assume that you have a Custom Post Type with a Radio meta field where you also used the same glossary. To filter the items according to that meta field, you will have to create a listing template that contains the radio meta field and use it for the Listing Grid.

Smart Filters work both in the Elementor page builder and Gutenberg editor. Go to the page with the Listing Grid and open it either in Elementor or Gutenberg. Find the Radio Field widget or block and place it next to the Grid. In the Select filter drop-down, choose the filter you’ve just created and select the “JetEngine” option (“Listing Grid” in Gutenberg editor) in the This filter for feature.

In the Elementor, it will look like that:

glossary filter in elementor

And here’s how it will be displayed in Gutenberg:

glossary filter in gutenberg

The glossary will be displayed without any issues, when you go to the frontend, the filter will work correctly, sorting the items according to the list created in the glossary.

Using glossary in ACF meta fields

The ACF plugin is compatible with the JetEngine plugin, and you can display the ACF meta fields in the listing templates and Listing Grids of JetEngine. However, this way you can only show the values of the Select, Checkbox, and Radio fields, not the labels. To fix that issue, you can use the glossary.

The algorithm is simple:

  1. Create an ACF Radio, Select, or Checkbox field;
  2. Create a glossary that will have the same values and labels as the ACF field;
  3. Add the ACF meta field to the listing template via Dynamic Field widget or block;
acf glossary field in elementor

4. In the Source drop-down menu, choose the “ACF” option and specify the field in the ACF Field feature. Enable the Filter field output toggle and select the “Get labels by glossary data” option in the Callback drop-down list. Specify the glossary in the Select glossary field and choose the delimiter.

In Elementor, the result will look like that:

acf field example

This is all about the Glossaries functionality usage. You now know how to create various lists and arrange them in different places. Enjoy!