Toggle API using button and storeValue function

How do I do X?
1

How do you toggle data on the table widget using the button widget and storeValue function?

2

You could toggle table data by utilising the storeValue function.

Say you have two queries named genderQuery and nameEmailQuery, and you want to display data on a table when toggling buttons.

First, we’ll need two buttons, and their onClick JS properties are set to the following:

Button1:

{{
storeValue("flag", 1);
utils.switchAPI();
}}

Button2:

{{
storeValue("flag", 0);
utils.switchAPI();
}}

The idea is simple, we update the flag variable using the storeValue function and run the switchAPI function where we toggle the data based on the value in the flag variable.

Here’s the switchAPI function written in a JS object (renamed as utlis) to toggle APIs.

export default {
  // function starts
  switchAPI: () => {
    if (appsmith.store.flag == 1) {
      return genderQuery.data;
    } else {
      return nameEmailQuery.data;
    }
  },
  // function ends
}

Lastly, we simply call the {{utils.switchAPI()}} on the Table Data property.

The following question is also discussed on How Do I Do X on Appsmith Session on our community call. Watch it here: How Do I Do X? - YouTube

4

Appsmith Forkable App: Appsmith

This app demonstrates toggling APIs from a switch widget.