How to do a button filter for charts, single value and tables

How to
#1

Hi i wanted to ask how to do a filter button (not with the component filter) with the normal button. When you click the button theres a popup where you can choose year, month, week, day and optional a own date range (from-to). When you choose a date the whole page (table, single values, charts, etc.) should be filtered and updated. If you close the app and open again or reload the page it should be resetet.

Where im stuck: So right now i have the popup with the menu to choose year, month, week, date and date range but im stuck at that point that it doesnt filter so it dont work, it says always the same stuff in the table, single value and charts. I know i must use js for this but i tried so much witch the jet.ai and chat gpt and now im hardstuck there (i never coded before!)

I know too that I cant bind the button with the single value and charts only with the table.

So maybe anyone csn help me there for a solution or an easier way to do that, i would be so thankful

#2

Hi, You’re very close to getting this working! Let’s walk through it step by step:

1. Create Variables

At the top of your Jet Admin app, click on “Variables” and add the following variables:

  • selected_year
  • selected_month
  • selected_week
  • selected_day
  • custom_date_from
  • custom_date_to

:blue_book: You can find more detailed steps on how to create variables here:
:point_right: Jet Admin Variables Guide

2. Set Variables from the Popup

In your popup where users choose a filter (like year, month, or date range), use regular component actions (no JavaScript needed!) to set the variable values.

:white_check_mark: Example:
If the user selects a year from a dropdown, use an “onChange” action to:

  • Set variable → selected_year → to the selected value.

Repeat for each option (month, week, day, or custom range).

3. Use Variables to Filter Components

Now that your variables are set, connect them to your components:

  • Go to your table, single value, and chart components.
  • Open the Filters or Data Source settings.
  • Add filter conditions using the variables you created.

You can choose the variables directly from the list.

4. Reset Filters on App Load

To clear filters every time the app is reloaded or reopened:

  1. Go to the App Settings → On Load Actions
  2. Add actions to set your variables to empty values (or defaults)

:point_right: Jet Admin Page Opens Action Guide
This way, your filters will reset every time the user reloads the page or reopens the app.

#3

thank for the reply i did evrything and tried the whole day but nothing works properly. Does it make a difference when i have my goglesheets table and jetadmin (page) in german?