Back to contents

JetEngine: Dynamic Field Widget Overview

 

In this tutorial, you’ll have a glance at the functionality of the Dynamic Field widget from the JetEngine plugin.

Dynamic Field widget of JetEngine plugin helps you to display the content from meta fields. This widget pulls the data from the specified source and displays it using the set style and content settings. Here are the types of meta fields that can be displayed by the Dynamic Field widget:

  • Text;
  • Date and Time;
  • Checkboxes;
  • Radio;
  • Select;
  • Switcher;
  • Gallery;
  • Number;
  • Iconpicker;
  • Posts.

And now let’s go through the widget’s features.

Dynamic Field Content section settings

dynamic field widget

Drag and drop the Dynamic Field widget on the page and let’s look through the content settings.

Content settings
  • Source. Here in the dropdown, you can see a list of available sources where the data will be pulled out from. If you choose Post/Term/User/Object Data, the content will be pulled from the default meta fields of the post, term, user, or object. The field can be specified in Object Field select. Meta Data option will take the content from one of the meta field created by you using the JetEngine plugin’s functionality. A concrete field you will be able to select in the Meta Field drop-down menu or define typing in the Custom meta field/repeater key. The Options variant allows you to choose one of the options you created. And if you will choose the Relation Hierarchy option, the data will be taken from the fields of the posts that are related to the current one. You will be able to choose what type of post to Get and select the type in From Post Type drop-down list;
  • Field Icon. If you want to add an icon to the field, here you can choose it from the library or download as an SVG file;
  • HTML Tag. This drop-down menu allows you to choose the HTML tags in which the field will be wrapped in. DIV is a tag which is used to define containers, H1-H6 turns the field into a headline, P defines the field as a paragraph and SPAN marked it as an inline part of the document;
  • Hide if value is empty. Turn this option on in case you want to hide the field if it’s not filled;
  • Fallback. If you don’t want to hide the empty field, in this text area you can define what text to show to the user instead;
  • Filter field output. This one needs extra attention, so we’ll describe it lower;
  • Customize field output. Turn this toggle on in order to add the text before and after the value that is pulled from the meta field;
    %s stands for the value that is pulled, just add some content before and after it to add some text before and after the value.
  • Context. This field helps you to specify the source of the field even further and works in collaboration with the Source. If you have chosen “Title” in the Object Field, and “Default Object” in Context – the title of the current post will be shown. And if you choose “Current User” in the Context field – the user’s name will be shown.
field output customization
  • Context.

Filter field output overview

This feature needs a little more detailed description. Enabling the Filter field output option allows you to display different types of data. Dynamic Field widget can be used to show the data from, for example, Сheckboxes-type meta field. To display it correctly you need to use this filter.

Filter field output options
  • Use the Format date callback to show the date pulled from the database using Date or Time meta fields. In the Format field you can set the date’s format;
  • Format date (localized) is the same as the previous but shows the date that is already localized to the language of the website;
  • Format number. If you want to display the data from the Number-type meta field, you can set its format using this callback. You can choose how the Decimal point and Thousands separator will look like and set how many numbers will be shown after the decimal point;
  • Get post/page title. If in the Object Field select you have chosen the Post ID option, this callback will display the title of the post or page;
  • Get post/page link (only URL). If you will choose one of the ID options in the Object Field drop-down menu, this callback will display the post’s URL;
  • Get post/page link (linked title). This callback will also show the posts URL but in the form of a title with a link;
  • Get term link. This option can be used only if you selected the term or taxonomy ID in the Meta Field select. In this case, it will display the term’s URL;
  • Embed URL. If you have a meta field that will contain a URL and you want to embed it to the page, use this callback. For example, it will work if you want to embed a video from YouTube;
  • Make clickable. If you have a field with a URL in it, normally it will be shown as plain text. And this callback will make it a clickable link;
  • Embed icon from Iconpicker. This callback is for the Iconpicker-type field and allows you to show the icon, not its ID;
  • Multiple select field values. This one is used for the Select-type fields. It will allow you to showcase several selected options. Don’t forget to specify the Delimiter afterward;
  • Checkbox field values. If you want to display the values, chosen in a Checkbox-type field, this callback will help you display them in a line, separated by Delimiter;
  • Checked values list. This callback is also used with the Checkbox-type meta field but shows the data as a list. You can choose the number of columns and separator between them;
  • Switcher field values. With the help of this callback you can display the values of the Switcher-type meta field;
  • ACF Checkbox field values. This one allows you to display the values of the Checkbox-type meta fields created by ACF plugin functionality;
  • Get post titles from IDs. It can be used with the Posts-type meta field. When enabled, this callback displays the titles of the posts you have chosen in the field;
  • Related posts list. This callback also works with the Posts-type meta field but displays the titles of the posts in a list instead of a row;
  • Field values count. Another callback for Posts-type meta field. It shows the number of posts you have chosen in the field;
  • Get Image by ID. This callback option displays the image from the database instead of its number value when using the Media meta field;
  • Do shortcodes. If in some of the fields you added a shortcode, normally it will be displayed as plain text. And when this callback is enabled, the shortcode in the field will be processed and shown correctly;
  • Human readable time difference. This callback works with Date-type meta fields. It shows the difference between the date you put into the meta field and the current date. The difference is displayed in days;
  • Add paragraph tabs (wpautop). If you have chosen the Textarea-type meta field in the Meta Field select – this callback will add paragraphs to the text;
  • Zeroise (add leading zeroes). When this callback is enabled, it adds zeroes before the value of the Number-type meta field;
  • Get child element from object/array. This callback works with Checkbox and Select-type meta fields. It shows the value of the option, chosen in the checkbox of select. For example, if you ticked the “2” option of the checkbox and have chosen the “2” option for the callback – it will display the “true” value;
  • Get labels by glossary data. It allows you to display the labels of the glossary items list in the listing. This callback works with the Radio, Select, and Checkbox meta fields;
  • Images Gallery Grid callback option allows you to display gallery added using Gallery-type meta field. This option appears in the list after you enable the Grid Gallery for Dynamic Field widget toggle in JetEngine > JetEngine Dashboard > Modules tab;
  • Images Gallery Slider. This one is used whenever you need to display the images added using the Gallery meta field in a slider. This option appears in the list after you enable the Slider Gallery for Dynamic Field widget toggle in JetEngine > JetEngine Dashboard > Modules tab;
  • QR Code. Enable this callback, set the size, and it will convert the value of the field into a QR code.

Now you are a professional when it comes to the Dynamic Field widget! Well done!