{"id":40995,"date":"2023-07-17T15:19:08","date_gmt":"2023-07-17T15:19:08","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=article&p=40995"},"modified":"2023-08-02T11:29:37","modified_gmt":"2023-08-02T11:29:37","slug":"creating-dynamic-popups-for-sql-queries","status":"publish","type":"article","link":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/creating-dynamic-popups-for-sql-queries\/","title":{"rendered":"How to Create Dynamic Popup for Listing with the SQL Query Source"},"content":{"rendered":"\n

The JetPopup<\/em> plugin lets pull out the data from JetEngine<\/em> listing templates within a dynamic pop-up<\/strong><\/a>. You can also display the data with the JetEngine<\/em> SQL Query<\/strong><\/a> source.<\/p>\n\n\n\n

As a use-case, I will describe how to display user\u2019s appointments on the user Profile page with the Listing Grid <\/strong>widget or block. Users can see all details of the appointment when they click on the button that opens a dynamic pop-up with more appointment details.<\/p>\n\n\n\n

JetAppointment Setup<\/h2>\n\n\n\n
\n

Before you start, ensure to complete the JetAppointment Wizard Setup<\/strong><\/a>.<\/p>\n\n\n\n

For this use case, you need to make several appointments. Proceed to the  How to Manage Appointments from the WordPress Dashboard<\/strong><\/a> <\/strong>tutorial to add appointments from the backend.<\/p>\n\n\n\n\"add-new-appointment-via-dashboard\"\n<\/div><\/div>\n\n\n\n

Create the SQL Query<\/h2>\n\n\n\n
\n

Follow the JetEngine > Query Builder<\/em><\/strong>path and hit the \u201cAdd New\u201d <\/strong>button.<\/p>\n\n\n\n

In the General Settings <\/strong>section, enter the query Name <\/strong>and select the \u201cSQL\/AI Query\u201d Query Type<\/strong>.<\/p>\n\n\n\n\"SQL\n\n\n\n

In the Custom SQL Query <\/strong>section, pick the \u201cjet_appointments\u201d option in the From table <\/strong>field.<\/p>\n\n\n\n

In the Where (query clauses) <\/strong>tab, hit the \u201cAdd New\u201d <\/strong>button.<\/p>\n\n\n\n

Select the \u201cuser_id\u201d Column<\/strong> and the \u201cEqual (=)\u201d option in the Compare <\/strong>field. In the Value <\/strong>field, click the coin-stack icon <\/strong>and choose the Current User ID <\/strong>macro. Finally, pick the \u201cNumeric\u201d Type<\/strong>. These query settings will narrow results, so a user will see only the appointments they have booked.<\/p>\n\n\n\n\"jet_appointments\n\n\n\n

In the Order & Order By<\/strong> tab, you can add sorting parameters by clicking on the \u201cAdd new sorting parameter\u201d<\/strong> button. There could be several of them for every query.<\/p>\n\n\n\n\"add\n\n\n\n

To learn more about SQL Query Type settings, proceed to this overview<\/strong><\/a>.<\/p>\n\n\n\n\"show\n\n\n\n

When you finish customizing the query, hit the \u201cAdd\/Update Query\u201d <\/strong>button.<\/p>\n<\/div><\/div>\n\n\n\n

Create a Pop-up<\/h2>\n\n\n\n
\n

Go to the JetPopup > Create New Popup <\/em><\/strong>tab. <\/p>\n\n\n\n

Choose the \u201cBlock Editor\u201d or \u201cElementor\u201d Content Type<\/strong>. Also, you can enter the Name <\/strong>and Choose Preset<\/strong>. After that, push the \u201cCreate\u201d<\/strong> button.<\/p>\n\n\n\n\"create\n\n\n\n

The Listing Template <\/strong>we will create later will show a few appointment details (date and service name). All other information will be displayed in the pop-up.<\/p>\n\n\n\n

Place the Dynamic Field <\/strong>widget or block on the editing page. Pick the \u201cPost\/Term\/User\/Object Data\u201d Source<\/strong>. In the Object Field <\/strong>drop-down, you can select any column to display data from. <\/p>\n\n\n\n\"query\n\n\n\n

Use the Customize field output <\/strong>option to add text before and after the value.<\/p>\n\n\n\n\"Customize\n\n\n\n

To display some column values correctly, you need to enable the Filter field output <\/strong>option. For example, to display the date and time, you need to pick the \u201cFormat date\u201d Callback<\/strong>. Without this callback, the widget will show the date and time in timestamp format.<\/p>\n\n\n\n\"format\n\n\n\n

To display the service or provider post title, enable the Filter field output <\/strong>option and pick the \u201cGet post titles from IDs\u201d Callback<\/strong>. Without that, the Dynamic Field<\/strong> will show the post ID.<\/p>\n\n\n\n

To learn more about the Filter field output <\/strong>option, navigate to the Dynamic Field Widget Overview<\/strong><\/a>. <\/p>\n\n\n\n\"get\n\n\n\n

In the Gutenberg editor, the Dynamic Field<\/strong><\/a> block settings are the same.<\/p>\n\n\n\n\"dynamic\n\n\n\n

When you create the pop-up layout in the Elementor editor, click the Settings<\/strong> icon in the lower-left corner. <\/p>\n\n\n\n\"pop-up\n\n\n\n

Here, you need to enable the Loading content with Ajax<\/strong> and Force Loading <\/strong>toggles.<\/p>\n\n\n\n\"jetpopup\n\n\n\n

To open the JetPopup settings in the Gutenberg editor, click the JetPopup<\/strong> icon in the right-upper corner. Enable the Loading content with Ajax<\/strong> and Force Loading <\/strong>toggles.<\/p>\n\n\n\n\"jetpopup\n\n\n\n

To learn more about the pop-up creation process, proceed to the How to Create a New Popup Template in Elementor<\/strong><\/a> or How to Create Popup in Gutenberg<\/strong><\/a> tutorials.<\/p>\n\n\n\n

You can also check the Popup Style Settings Overview in Elementor<\/strong><\/a> or Popup Style Settings Overview in Gutenberg<\/strong><\/a>.<\/p>\n\n\n\n

When you finish customizing the pop-up, hit the \u201cUpdate\u201d <\/strong>button.<\/p>\n<\/div><\/div>\n\n\n\n

Create a Listing<\/h2>\n\n\n\n
\n

Proceed to the JetEngine > Listing <\/em><\/strong>tab and hit the \u201cAdd New\u201d <\/strong>button.<\/p>\n\n\n\n

In the Setup Listing Item <\/strong>pop-up, select the \u201cQuery Builder\u201d Listing source<\/strong>, choose the recently created Query<\/strong>, enter the Listing item name<\/strong>, and pick the \u201cElementor\u201d or \u201cBlocks (Gutenberg)\u201d Listing view<\/strong>. Then, hit the \u201cCreate Listing Item\u201d <\/strong>button.<\/p>\n\n\n\n\"setup\n\n\n\n

The majority of appointment details we displayed in the pop-up. Now, I placed two Dynamic Field <\/strong>widgets to display the appointment data and service name. Also, I used the Customize field output<\/strong> to add the text to the value. With the Filter field output <\/strong>option and \u201cFormat date\u201d and \u201cGet post titles from IDs\u201d Callbacks<\/strong>, I displayed the date and the service post title.<\/p>\n\n\n\n\"dynamic\n\n\n\n

The same process is in the Gutenberg editor.<\/p>\n\n\n\n\"dynamic\n\n\n\n

Drag-n-drop any button widget or block to the editing page. It can be the default WordPress Button<\/strong> or the Button<\/strong><\/a> from the JetElements<\/em><\/a> plugin (for Elementor only). Customize and style it according to your needs.<\/p>\n\n\n\n

Elementor view:<\/p>\n\n\n\n\"button\n\n\n\n

Gutenberg view:<\/p>\n\n\n\n\"button\n\n\n\n

Then, in the Elementor editor, open the Advanced <\/strong>settings tab and unfold the JetPopup <\/strong>tab.<\/p>\n\n\n\n

Set the recently created pop-up in the Attached Popup <\/strong>field, pick the \u201cClick on Button\u201d Trigger Type<\/strong><\/a>, and enable the Jet Engine Listing popup <\/strong>option.<\/p>\n\n\n\n\"attached\n\n\n\n

In the Gutenberg editor, unfold the Advanced <\/strong>settings tab, set the recently created pop-up in the Attached Popup <\/strong>field, pick the \u201cClick\u201d Trigger Type<\/strong><\/a>, and enable the JetEngine Listing popup <\/strong>toggle.<\/p>\n\n\n\n\"attached\n\n\n\n

Finally, press the \u201cUpdate\u201d <\/strong>button.<\/p>\n<\/div><\/div>\n\n\n\n

Displaying Appointments on the Profile Page<\/h2>\n\n\n\n
\n

Discover the Profile Builder dashboard settings from the Profile Builder Overview<\/strong><\/a>.<\/p>\n\n\n\n

Navigate to the JetEngine > Profile Builder <\/em><\/strong>tab and make sure to enable the Single user page <\/strong>toggle and set the Single User Page<\/strong>.<\/p>\n\n\n\n\"single\n\n\n\n

After changing the settings, hit the \u201cSave\u201d <\/strong>button.<\/p>\n\n\n\n

Open the Page <\/strong>tab on the WordPress Dashboard and click to edit the Profile page in the Elementor or Gutenberg editor.<\/p>\n\n\n\n\"user\n\n\n\n

In the Elementor editor, drag-n-drop the Listing Grid<\/strong><\/a> widget and select the recently created Listing<\/strong>.<\/p>\n\n\n\n\"listing\n\n\n\n

In the Gutenberg editor, place the Listing Grid<\/strong><\/a> block and choose the needed Listing<\/strong>. <\/p>\n\n\n\n\"listing\n\n\n\n

After finishing customizing the Profile page, click the \u201cUpdate\u201d <\/strong>button.<\/p>\n\n\n\n

Open the Profile page on the front end.<\/p>\n\n\n\n\"profile\n\n\n\n

When I click the button, it triggers the dynamic pop-up with other appointment details.<\/p>\n\n\n\n\"open\n\n\n\n

When I hit the button from the second listing item, the dynamic pop-up shows the details of the corresponding appointment.<\/p>\n\n\n\n\"dynamic\n<\/div><\/div>\n\n\n\n

That\u2019s all. Now you know how to create a dynamic pop-up for JetEngine<\/em> Listing templates with the SQL Query Source and display the appointments on the WordPress User Profile page.<\/p>\n","protected":false},"excerpt":{"rendered":"

This tutorial will describe how to create a dynamic pop-up for listing templates with the SQL Query Source.<\/p>\n","protected":false},"author":8,"featured_media":0,"template":"","format":"standard","builder-category":[],"article-category":[486,405],"yoast_head":"\nHow to Create Dynamic Popup for Listing with the SQL Query Source | Crocoblock<\/title>\n<meta name=\"description\" content=\"This tutorial describes how to create a dynamic pop-up for the JetEngine Listing templates with the SQL Query Source. Display the appointments on the WordPress User Profile page.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/creating-dynamic-popups-for-sql-queries\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Create Dynamic Popup for Listing with the SQL Query Source | Crocoblock\" \/>\n<meta property=\"og:description\" content=\"This tutorial describes how to create a dynamic pop-up for the JetEngine Listing templates with the SQL Query Source. Display the appointments on the WordPress User Profile page.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/creating-dynamic-popups-for-sql-queries\/\" \/>\n<meta property=\"og:site_name\" content=\"Help Center\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-02T11:29:37+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/07\/add-new-appointment-via-dashboard2.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"11 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/creating-dynamic-popups-for-sql-queries\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/creating-dynamic-popups-for-sql-queries\/\",\"name\":\"How to Create Dynamic Popup for Listing with the SQL Query Source | Crocoblock\",\"isPartOf\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\"},\"datePublished\":\"2023-07-17T15:19:08+00:00\",\"dateModified\":\"2023-08-02T11:29:37+00:00\",\"description\":\"This tutorial describes how to create a dynamic pop-up for the JetEngine Listing templates with the SQL Query Source. Display the appointments on the WordPress User Profile page.\",\"breadcrumb\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/creating-dynamic-popups-for-sql-queries\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/creating-dynamic-popups-for-sql-queries\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/creating-dynamic-popups-for-sql-queries\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Articles\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/articles\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to Create Dynamic Popup for Listing with the SQL Query Source\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"name\":\"Help Center\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\",\"name\":\"Help Center\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"contentUrl\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"caption\":\"Help Center\"},\"image\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Create Dynamic Popup for Listing with the SQL Query Source | Crocoblock","description":"This tutorial describes how to create a dynamic pop-up for the JetEngine Listing templates with the SQL Query Source. Display the appointments on the WordPress User Profile page.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/creating-dynamic-popups-for-sql-queries\/","og_locale":"en_US","og_type":"article","og_title":"How to Create Dynamic Popup for Listing with the SQL Query Source | Crocoblock","og_description":"This tutorial describes how to create a dynamic pop-up for the JetEngine Listing templates with the SQL Query Source. Display the appointments on the WordPress User Profile page.","og_url":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/creating-dynamic-popups-for-sql-queries\/","og_site_name":"Help Center","article_modified_time":"2023-08-02T11:29:37+00:00","og_image":[{"url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/07\/add-new-appointment-via-dashboard2.png"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"11 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/creating-dynamic-popups-for-sql-queries\/","url":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/creating-dynamic-popups-for-sql-queries\/","name":"How to Create Dynamic Popup for Listing with the SQL Query Source | Crocoblock","isPartOf":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#website"},"datePublished":"2023-07-17T15:19:08+00:00","dateModified":"2023-08-02T11:29:37+00:00","description":"This tutorial describes how to create a dynamic pop-up for the JetEngine Listing templates with the SQL Query Source. Display the appointments on the WordPress User Profile page.","breadcrumb":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/creating-dynamic-popups-for-sql-queries\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/crocoblock.com\/knowledge-base\/jetengine\/creating-dynamic-popups-for-sql-queries\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/creating-dynamic-popups-for-sql-queries\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/crocoblock.com\/knowledge-base\/"},{"@type":"ListItem","position":2,"name":"Articles","item":"https:\/\/crocoblock.com\/knowledge-base\/articles\/"},{"@type":"ListItem","position":3,"name":"How to Create Dynamic Popup for Listing with the SQL Query Source"}]},{"@type":"WebSite","@id":"https:\/\/crocoblock.com\/knowledge-base\/#website","url":"https:\/\/crocoblock.com\/knowledge-base\/","name":"Help Center","description":"","publisher":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization","name":"Help Center","url":"https:\/\/crocoblock.com\/knowledge-base\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/","url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","contentUrl":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","caption":"Help Center"},"image":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article\/40995"}],"collection":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/types\/article"}],"author":[{"embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/users\/8"}],"wp:attachment":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/media?parent=40995"}],"wp:term":[{"taxonomy":"builder-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/builder-category?post=40995"},{"taxonomy":"article-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article-category?post=40995"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}