Back to contents

JetEngine: How to Use Filter Field Output in Dynamic Field Widget

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

Dynamic Field widget of JetEngine plugin helps you to display the content either from meta fields or the post/term data, for posts and taxonomies listing templates. This widget pulls the data from the specified source and displays it using the set style and content settings.

Customizing Dynamic Field widget

Step 1 – Drag and drop the Dynamic Field widget on the needed page and let’s look through the content settings in the Elementor panel.

Dynamic Field widget

Step 2 – First, navigate to the Content accordion block and look at the Source option. Here in the dropdown, you can see a list of available sources where the date will be pulled out from (Post/Term Data or Meta Data).

Content settings of Dynamic Field widget

Step 3 – The Object Field allows you to select the field which you need to pull information from. You can also enter the ID of a certain meta field in the Or enter meta field key text area if you have chosen the Meta Data option in Step 2.

In the Content > Source dropdown menu you can choose the Post/Term Data and below in the Object Field you can select the Excerpt option. Enable Automatically generated excerpt and it would mean, that there will appear the excerpt from the description field from the WP Dashboard and will contain the first 55 words of the post.

Step 4 – Go to the Field Icon drop-down, where you can select the icon to be displayed next to this field.

Step 5 – Specify the HTML tag in the corresponding field for the meta field.

Step 6 – Toggle the Hide if value is empty option to Yes in case you want to hide the field if it’s not filled.

While deciding whether to enable this option the or not, there is an opportunity to add the value which will appear in case the meta field or other source is empty or even doesn’t exist at all.
This value will show the website visitors that information will be completed as soon as possible. Also, it’s a great possibility to set the same value for almost all items inside the listing at once.

Fallback value

Step 7 – Enable the Filter field output option to display the data directly from the database. It happens that the content can’t be displayed without any filters (e.g., to display the date you’ll need Format Data callback, to display an image you’ll need to use Get Image by ID callback, etc).

Step 8 – There are 8 callback types which we’ll look through.

  • Use the Format date callback to show the date pulled from the database using Date or Time meta fields.
  • Format date calllback
  • The Get post/page link callback allows you to pull the link to the post or the page in the event that you have added the term ID in the Text meta field.
  • Get post page link callback
  • Select the Get term link option in order to set the displaying for the term link in case you’ve added the term ID in the Text meta field.
  • Get term link callback
  • If you select the Embed URL callback, you are able to embed the URL link (e.g. if you want to embed a video from youTube, etc.).
  • Embed URL callback
  • Choose the Multiple select field values so that you are able to showcase several selected option when you’re using Select meta field. Don’t forget to specify the delimiter afterward.
  • Multiple select field values callback
  • Get Image by ID callback option displays the image from the database instead of its number value when using Media meta field.
  • Get Image by ID callback
  • Use the Images Gallery Grid callback option to display gallery added using Gallery meta field.
  • Images Gallery Grid callback
  • The last callback is Images Gallery Slider which you can use whenever you need to display the images slider added using Gallery meta field. Note, that you should enable Grid and Slider gallery option in JetEngine > Modules Manager first.
Images Gallery Slider callback

Step 9 – If we have the meta field, which is empty or even doesn’t exist at all for several items, then the text from the fallback will appear. It will be the same for each item in the current listing.

fallback option

Step 10 – Proceed to the Customize field input option and toggle it to Yes in order to add the text before and after the value that is pulled from the meta field.

Customize field input option

Step 11 – Open the Style tab in the Elementor panel and customize your widget with the help of the basic styling options.

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