How do I run queries based on the options inside a select widget?

[Dameats]

Hello everyone ,

I am a super Noob in development and really appsmitht has been great on fueling my passion for learning stuff .

I want advice on how to proceed in the development of the app I am working on . ( I apologize if this is not the correct space for asking advice)

I have some queries and i want my users ( lol me ) to be able to select only the ones i need to run for specific cases.

my idea was through a couple of select widgets . To do this I created a Jsobject defining the queries .

like this ( did i mention i am super noob)

export default {
Queries: [
{
label: ‘green’,
value: ‘{{querie1}}’
},
{
label: ‘blue’,
value: ‘{{querie2}}’
},
{
label: ‘red’,
value: ‘{{querie3}}’
},
{
label: ‘yellow’,
value: ‘{{querie4}}’
}
]
}

and now the select widget is showing me the options to select . My question is now i wanna create the button that when i click on it runs the selected Querie in the select widged , how do i do that ?
can anybody please stir me in the right direction ?

thank you so much

[vihar]

Hey @Dameats, this is possible in Appsmith using the onOptionChange property from the select widget. On the JSObjects, you could write a simple if-else condition or a switch statement to handle queries. Here’s an example:

I have two APIs – API1 and API2

On my JS Object, I’ve created a function with a simple if-else statement.

export default {
	myFun1: () => {
		if(Select1.selectedOptionValue === "Api1"){
			let data = Api1.data;
			storeValue("APICALL", data);
			return "Call from API1"
		}
		else{
			let data = Api2.data;
			storeValue("APICALL", data);
			return "Call from API2"
		}
	},
}

Here, based on the selected value, I’m storing an overriding local appsmith variable (named APICALL) with the storeValue function.

I call this function whenever the selected option changes, so in my onOptionChange property I use this:

{{JSObject1.myFun1()}}

I’m printing the output on the text-widget for reference:

Please note that this could be more well written with a switch statement if you have multiple queries.

[Laguna]

Hey @Dameats! You could use a switch statement or maybe an object to do this. My example is set up to display the selected query results in a table.

This example lets you run a query by name (case sensitive) and also stores the resulting value in the appsmith store.

export default {
	runQuery: async (queryName) => {
		const queries = {
		"Query1": Query1,
		"Query2": Query2
		}
		await queries[queryName]?.run();
		await storeValue('tableData', queries[queryName].data)
	}
}

My buttons onClick looks like this : {{JSObject1.runQuery(Select1.selectedOptionValue)}}.
You could also place this directly in the select widgets onOptionChange event as well

These are my dropdown options:

[
  {
    "label": "Query1",
    "value": "Query1"
  },
  {
    "label": "Query2",
    "value": "Query2"
  }
]

[Dameats]

@Laguna Thank you so much , this is exactly what i was looking for my exact case

[Dameats]

Thank you so much , it worked well , improved my learning curve .