Displaying complex JetEngine dynamic data WITHOUT 'Dynamic Field' element

Has anyone found a method of inserting more advanced dynamic JetEngine values directly into a Bricks “Basic Text” widget?

For example, outputting the Post>Title with context “Related Items from [Relation name]” and filtering it with a callback? (All things which are done easily with a Dynamic Field widget)

The reason I am asking is I am a bit horrified to have discovered that JetEngine’s “Dynamic Field” Bricks element is generating a total of 4 separate HTML elements (3 divs and 1 p) for a single instance of dynamic text. 🥲

For comparison, a single Bricks “Basic Text” element with a dynamic value creates 1 HTML element.

Does anyone have any advice on how to achieve the same complexity of a Dynamic Field without generating all of the extraneous HTML elements?

Example code output for the same dynamic data generated with Dynamic Field widget (JetEngine) vs. Basic Text widget (Bricks):

//From Dynamic Field widget//

<div id="brxe-qiogdk" data-script-id="qiogdk" class="brxe-jet-engine-listing-dynamic-field" data-is-block="jet-engine/dynamic-field" data-jet-inited="true">
<div class="jet-listing jet-listing-dynamic-field display-inline">
<div class="jet-listing-dynamic-field__inline-wrap">
<p class="jet-listing-dynamic-field__content">**Durham, NC**</p>
</div>
</div>
</div>

//From Bricks ‘Simple Text’ widget with data pulled dynamically//

<p class="brxe-text-basic">**Durham, NC**</p>

POSSIBLE SOLUTION (BUT INCOMPLETE):
I can avoid the ‘Dynamic Field’ widget altogether and instead generate the comparable shortcode from the JetEngine > Shortcode Generator.
Then, I can insert it using a ‘Rich Text’ Bricks widget. The Bricks ‘Basic Text’ widget evidently does not support shortcodes, but the ‘Rich Text’ widget does.
With this method, my final output was <div class="brxe-text">Durham, NC</div>.
With this method, however, I cannot modify the HTML tag from the ‘Rich Text’ widget editor and am stuck with

.

You can go to JetEngine dashboard and in Performance tab activate Optimized DOM. After that, Jet widgets will generate only 2 HTML elements (“p” and “div” wrapper).

I think it’s the easiest way

1 Like

Thank you, @Illarion – This does indeed reduce the elements from 4 to 2. Not ideal, but it looks like that is my only practical option so far.
Thanks for your input!!

Btw, in new versions they added a {je_macros} dynamic tag which allows displaying JE data anywhere in Bricks

2 Likes