{"id":40734,"date":"2023-07-10T07:30:09","date_gmt":"2023-07-10T07:30:09","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=article&p=40734"},"modified":"2023-07-28T13:44:27","modified_gmt":"2023-07-28T13:44:27","slug":"how-to-create-visual-filter-based-on-sql-query-with-open-ai","status":"publish","type":"article","link":"https:\/\/crocoblock.com\/knowledge-base\/jetsmartfilters\/how-to-create-visual-filter-based-on-sql-query-with-open-ai\/","title":{"rendered":"How to Create Visual Filter Based on SQL Query with Open AI"},"content":{"rendered":"\n

Add Meta Fields to Post Type<\/h2>\n\n\n\n
\n

Before getting into creating the custom query, let us see which meta fields can be used. In the described example, two meta fields were created, one is the \u2018mediaaa\u2019 meta field of the \u201cMedia\u201d Field type<\/strong>, from which an image is pulled to show a list of options in the filter, and the \u2018textarea-pages\u2019 meta field, by which the filtering is to be performed.<\/p>\n\n\n\n\"completed\n<\/div><\/div>\n\n\n\n

Create Custom SQL Query with AI<\/h2>\n\n\n\n
\n

Once the meta fields are added to a post type and filled in posts, move to WordPress Dashboard > JetEngine > Query Builder<\/strong><\/em>.<\/p>\n\n\n\n

Create a new query, complete the Name <\/strong>of the query, and select \u201cSQL\/AI Query\u201d Query Type <\/strong>in the General Settings <\/strong>section.<\/p>\n\n\n\n

Head to the Custom SQL Query<\/strong> and switch on the Advanced\/AI mode <\/strong>feature.<\/p>\n\n\n\n\"sql\n\n\n\n

Click the \u201cGenerate query with AI<\/strong>\u201d button to get to the prompts. The idea is that we need to tell the AI that there are two fields with specific names from which we need unique values to be retrieved, so we will work on writing a prompt for this request. You can write the prompt according to how you want the posts, terms, CCT items, etc., to be queried.<\/p>\n\n\n\n\"generate\n\n\n\n

Here are the examples of prompts we used to create an SQL query:<\/p>\n\n\n\n

Post has fields 'textarea-pages' and 'mediaaa'. Return distinct values from 'textarea-pages' and values from 'mediaaa'.<\/code><\/pre>\n\n\n\n\"first\n\n\n\n
In this query, we should have mentioned that these meta fields are from the same post.<\/p>\n\n\n\n\"second\n\n\n\n
Now we got this SQL query which is not exactly what is needed:<\/p>\n\n\n\n
SELECT DISTINCT meta_value FROM {prefix}postmeta WHERE meta_key = 'textarea-pages'\nUNION\nSELECT meta_value FROM {prefix}postmeta WHERE meta_key = 'mediaaa'\n<\/code><\/pre>\n\n\n\n
So here is another version of the prompt:<\/p>\n\n\n\n
Post has meta fields 'textarea-pages' and 'mediaaa'. Return distinct values from  'textarea-pages' and values from 'mediaaa' for each post.<\/code><\/pre>\n\n\n\n
This request generates the following query:<\/p>\n\n\n\n
SELECT DISTINCT {prefix}postmeta.meta_value AS textarea_pages, {prefix}postmeta2.meta_value AS mediaaa\nFROM {prefix}posts\nINNER JOIN {prefix}postmeta ON {prefix}posts.ID = {prefix}postmeta.post_id AND {prefix}postmeta.meta_key = 'textarea-pages'\nINNER JOIN {prefix}postmeta AS {prefix}postmeta2 ON {prefix}posts.ID = {prefix}postmeta2.post_id AND {prefix}postmeta2.meta_key = 'mediaaa'\n<\/code><\/pre>\n\n\n\n
This query is correct, but the info that the  ‘textarea-pages’ meta field must not be empty should also be mentioned.  <\/p>\n\n\n\n
So here is another one:<\/p>\n\n\n\n
Post has meta fields 'textarea-pages' and 'mediaaa'. Return distinct values from  'textarea-pages' and values from 'mediaaa' for each post.  'textarea-pages' field must not be empty.<\/code><\/pre>\n\n\n\n
This request generates this query:<\/p>\n\n\n\n
SELECT DISTINCT {prefix}postmeta.meta_value AS textarea_pages, {prefix}postmeta2.meta_value AS mediaaa\nFROM {prefix}posts\nINNER JOIN {prefix}postmeta ON {prefix}posts.ID = {prefix}postmeta.post_id AND {prefix}postmeta.meta_key = 'textarea-pages' AND {prefix}postmeta.meta_value != ''\nLEFT JOIN {prefix}postmeta AS {prefix}postmeta2 ON {prefix}posts.ID = {prefix}postmeta2.post_id AND {prefix}postmeta2.meta_key = 'mediaaa'\nWHERE {prefix}posts.post_type = 'post' AND {prefix}posts.post_status = 'publish'<\/code><\/pre>\n\n\n\n
In this case, OpenAI decided that we query a ‘post’ post type, which is why it is better to specify from which post type the posts are pulled.<\/p>\n\n\n\n
So here is the final version:<\/p>\n\n\n\n
Post type 'page' has meta fields 'textarea-pages' and 'mediaaa'. Return distinct values from  'textarea-pages' and values from 'mediaaa' for each post.  'textarea-pages' field must not be empty.\n<\/code><\/pre>\n\n\n\n
SELECT DISTINCT {prefix}postmeta.meta_value AS textarea_pages, {prefix}postmeta2.meta_value AS mediaaa\nFROM {prefix}posts\nINNER JOIN {prefix}postmeta ON {prefix}posts.ID = {prefix}postmeta.post_id AND {prefix}postmeta.meta_key = 'textarea-pages'\nINNER JOIN {prefix}postmeta AS {prefix}postmeta2 ON {prefix}posts.ID = {prefix}postmeta2.post_id AND {prefix}postmeta2.meta_key = 'mediaaa'\nWHERE {prefix}posts.post_type = 'page' AND {prefix}posts.post_status = 'publish' AND {prefix}postmeta.meta_value != ''\nORDER BY {prefix}posts.ID ASC;<\/code><\/pre>\n\n\n\n
The result is:<\/p>\n\n\n\n
At this point, the query matches the idea. Besides, you can add final edits to the query. For instance, change the order.<\/p>\n\n\n\n
By the way, the ‘distinct’ word used in the query prompts comes from SQL’s vocabulary, but OpenAI will understand the word ‘unique’ instead of it.<\/p>\n\n\n\n
Now press the \u201cUse this query<\/strong>\u201d button.<\/p>\n\n\n\n\"use\n\n\n\n
Optionally, you can activate the \u201cPreview results<\/strong>\u201d toggle to ensure the query provides the values according to the request.<\/p>\n\n\n\n\"preview\n<\/div><\/div>\n\n\n\n
Create Visual Filter<\/h2>\n\n\n\n
\n
After the custom query is saved, create a new filter in WordPress Dashboard > Smart Filters > Add New<\/em><\/strong>. Select the \u201cVisual\u201d Filter type<\/strong>. Data Source<\/strong> should be set to \u201cJetEngine Query Builder,\u201d in the Select Query<\/strong> field, you should pick the custom query that has just been created using AI.<\/p>\n\n\n\n\"visual\n\n\n\n
Complete the rest of the fields.<\/p>\n\n\n\n\"visual\n\n\n\n
The Property to get Value from <\/strong>field, is completed with the \u2018textarea_pages\u2019 value to filter by the values from this meta field.<\/p>\n\n\n\n
You can also use the same value in the Property to get Label from <\/strong>field in case you want to show the values from this field as a Label <\/strong>of the filter\u2019s option. An \u201cImage\u201d option has been selected in the Type <\/strong>field, so we can specify the field’s name from which to get the image.<\/p>\n\n\n\n\"fields\n\n\n\n
Lastly, you can select the Behavior <\/strong>of the Visual Filter<\/strong>, \u201cCheckbox\u201d or \u201cRadio,\u201d to define whether the user can check multiple options in the filter or just one.<\/p>\n\n\n\n
Then, insert the Query Variable<\/strong> name. It should be the field name by which the filtering will be done.<\/p>\n\n\n\n
Press the \u201cUpdate<\/strong>\u201d button to save the filter.<\/p>\n\n\n\n\"query\n<\/div><\/div>\n\n\n\n
Set Up Visual Filter on the Front End<\/h2>\n\n\n\n
\n
Let us set up the filter for the Listing Grid<\/strong> widget\/block on the front end.<\/p>\n\n\n\n
Gutenberg editor<\/h3>\n\n\n\n
Add a Visual <\/strong>block to the page, and select the Visual filter you created. You can use a \u201cListing Grid\u201d <\/strong>block as a provider in This filter for<\/strong> setting.<\/p>\n\n\n\n\"visual\n\n\n\n
Then add the Listing Grid<\/strong><\/a> block to the page, and select a Listing <\/strong>template for the post type in which posts need to be filtered.<\/p>\n\n\n\n\"listing\n\n\n\n
On the front end, you can see that the posts in the listing are filtered using the Visual Filter<\/strong>.<\/p>\n\n\n\n\"visual\n\n\n\n
Elementor editor<\/h3>\n\n\n\n
Add the Visual Filter<\/strong> widget to the page, and select the Visual Filter you have just created. In This filter for <\/strong>setting, you can use the \u201cJetEngine\u201d widget as a provider.<\/p>\n\n\n\n\"visual\n\n\n\n
Then add the Listing Grid<\/strong><\/a> widget to the page, and select a Listing <\/strong>template for the post type in which posts need to be filtered.<\/p>\n\n\n\n\"listing\n\n\n\n
After saving the page, you can check the result on the front end.<\/p>\n\n\n\n
Once the option is selected in the Visual Filter<\/strong>, the post with the selected value in the \u2018textarea_pages\u2019 meta field is filtered accordingly.<\/p>\n\n\n\n\"listing\n<\/div><\/div>\n\n\n\n
Now you know how to bring more AI into building JetSmartFilters <\/em>Visual Filter <\/strong>based on SQL query in the Query Builder of the JetEngine <\/em>plugin.<\/p>\n","protected":false},"excerpt":{"rendered":"
Learn how to use AI to create a custom query in JetEngine\u2019s Query Builder and create a JetSmartFilters filter based on it.<\/p>\n","protected":false},"author":9,"featured_media":0,"template":"","format":"standard","builder-category":[],"article-category":[535,405],"yoast_head":"\nHow to Create Visual Filter Based on SQL Query with Open AI \u2014 JetSmartFilters | Crocoblock<\/title>\n<meta name=\"description\" content=\"Find out how to create a Visual filter based on SQL Query with Open AI, JetSmartFilters, and JetEngine plugins.\" \/>\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\/jetsmartfilters\/how-to-create-visual-filter-based-on-sql-query-with-open-ai\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Create Visual Filter Based on SQL Query with Open AI \u2014 JetSmartFilters | Crocoblock\" \/>\n<meta property=\"og:description\" content=\"Find out how to create a Visual filter based on SQL Query with Open AI, JetSmartFilters, and JetEngine plugins.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/crocoblock.com\/knowledge-base\/jetsmartfilters\/how-to-create-visual-filter-based-on-sql-query-with-open-ai\/\" \/>\n<meta property=\"og:site_name\" content=\"Help Center\" \/>\n<meta property=\"article:modified_time\" content=\"2023-07-28T13:44:27+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/07\/Screenshot_1.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=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetsmartfilters\/how-to-create-visual-filter-based-on-sql-query-with-open-ai\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/jetsmartfilters\/how-to-create-visual-filter-based-on-sql-query-with-open-ai\/\",\"name\":\"How to Create Visual Filter Based on SQL Query with Open AI \u2014 JetSmartFilters | Crocoblock\",\"isPartOf\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\"},\"datePublished\":\"2023-07-10T07:30:09+00:00\",\"dateModified\":\"2023-07-28T13:44:27+00:00\",\"description\":\"Find out how to create a Visual filter based on SQL Query with Open AI, JetSmartFilters, and JetEngine plugins.\",\"breadcrumb\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetsmartfilters\/how-to-create-visual-filter-based-on-sql-query-with-open-ai\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/crocoblock.com\/knowledge-base\/jetsmartfilters\/how-to-create-visual-filter-based-on-sql-query-with-open-ai\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetsmartfilters\/how-to-create-visual-filter-based-on-sql-query-with-open-ai\/#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 Visual Filter Based on SQL Query with Open AI\"}]},{\"@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 Visual Filter Based on SQL Query with Open AI \u2014 JetSmartFilters | Crocoblock","description":"Find out how to create a Visual filter based on SQL Query with Open AI, JetSmartFilters, and JetEngine plugins.","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\/jetsmartfilters\/how-to-create-visual-filter-based-on-sql-query-with-open-ai\/","og_locale":"en_US","og_type":"article","og_title":"How to Create Visual Filter Based on SQL Query with Open AI \u2014 JetSmartFilters | Crocoblock","og_description":"Find out how to create a Visual filter based on SQL Query with Open AI, JetSmartFilters, and JetEngine plugins.","og_url":"https:\/\/crocoblock.com\/knowledge-base\/jetsmartfilters\/how-to-create-visual-filter-based-on-sql-query-with-open-ai\/","og_site_name":"Help Center","article_modified_time":"2023-07-28T13:44:27+00:00","og_image":[{"url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/07\/Screenshot_1.png"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetsmartfilters\/how-to-create-visual-filter-based-on-sql-query-with-open-ai\/","url":"https:\/\/crocoblock.com\/knowledge-base\/jetsmartfilters\/how-to-create-visual-filter-based-on-sql-query-with-open-ai\/","name":"How to Create Visual Filter Based on SQL Query with Open AI \u2014 JetSmartFilters | Crocoblock","isPartOf":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#website"},"datePublished":"2023-07-10T07:30:09+00:00","dateModified":"2023-07-28T13:44:27+00:00","description":"Find out how to create a Visual filter based on SQL Query with Open AI, JetSmartFilters, and JetEngine plugins.","breadcrumb":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/jetsmartfilters\/how-to-create-visual-filter-based-on-sql-query-with-open-ai\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/crocoblock.com\/knowledge-base\/jetsmartfilters\/how-to-create-visual-filter-based-on-sql-query-with-open-ai\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetsmartfilters\/how-to-create-visual-filter-based-on-sql-query-with-open-ai\/#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 Visual Filter Based on SQL Query with Open AI"}]},{"@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\/40734"}],"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\/9"}],"wp:attachment":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/media?parent=40734"}],"wp:term":[{"taxonomy":"builder-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/builder-category?post=40734"},{"taxonomy":"article-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article-category?post=40734"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}