...

appsmithorg · harshilp24 · Feb 18, 2025 · Jun 25, 2024 · Jun 25, 2024 · Jun 26, 2024
commit eb153dbb8295172db9652ce03173033b8f1a69f5
diff --git a/website/docs/packages/how-to-guides/pass-date-between-modules.md b/website/docs/packages/how-to-guides/pass-date-between-modules.md
@@ -41,18 +41,36 @@
 
 <dd>
 
-*Example:* Suppose you want to display a list of countries in a Select widget. You can create a query to fetch a list of unique countries, like:
+*Example:* If you want to display product details in a chart widget based on the category selected by the user, you can create a SQL query like:
 
+```sql
+SELECT * FROM public."product" 
+WHERE category = `Apparel`;
+```
+
+</dd>
+
+2. Create an **Input** from the right-side property pane to dynamically pass data to the query. 
+
+<dd>
 
+*Example:* To dynamically pass category information to your query, use the `inputs` property as shown below:
 
 ```sql
 SELECT * FROM public."product" 
-WHERE category = 'Apparel';
+WHERE category = {{inputs.category}};
 ```
 
 </dd>
 
-2. Create a JS module to format or transform the data fetched from the query module. 
+
+3. 
+
+<dd>
+
+*Example:* If you want to visualize inventory data in a chart widget, this JavaScript module fetches product details based on the selected category. 
+
+</dd>
 
 <dd>
 
@@ -65,7 +83,7 @@



 *Example*: If you want to transform query data into a format suitable for a Select widget, you can add a JS function like:




diff --git a/website/docs/packages/reference/pass-parameters.md b/website/docs/packages/reference/pass-parameters.md
 This page guides you on how to pass parameters between modules and your Appsmith application.


 ## From App to Modules

 To pass parameters from your Appsmith application to modules, follow these instructions:

 ### App to Query Module

 You can use the **Inputs** property to pass real-time data from your Appsmith application to Query modules.


 <dd>

 *Example*: If you want to add limit and offset as inputs, create two inputs:

 * `limit`, with a default value of `5`
 * `offset`, with a default value of `4`

 <dd>

 *Example*: If you want to pass data from a Table widget, use the following configuration to dynamically set the values:


 * Limit: `{{Table1.pageSize}}`

 </dd>

 ### App to JS Module

 You can use the inputs property to pass data or directly pass data inside a function in the JS module. 




 ## Between Modules

diff --git a/website/docs/packages/how-to-guides/use-query-inside-js-module.md b/website/docs/packages/how-to-guides/use-query-inside-js-module.md
 };
 ```

 For any future user actions, use the stored access token to access the relevant API endpoint.  If the token has expired, refresh the access token for the user to proceed further. You can use the [Appsmith Object](/write-code/reference) and [Functions](/reference/appsmith-framework/widget-actions) within the JS module code, which can be executed in the App.


 </dd>
diff --git a/website/docs/packages/reference/query-module.md b/website/docs/packages/reference/query-module.md



 When you incorporate a module from the package into your application, you create a module instance. You can create multiple instances of the same package, each with different settings and configurations. Instances are named sequentially (e.g., `productutil1`, `productutil2`), allowing for customized functionalities.

 This page provides information about the module settings and properties available within the app, enabling you to configure the query and JS modules.

diff --git a/website/docs/packages/tutorial/js-module.md b/website/docs/packages/tutorial/js-module.md
 A JavaScript module serves as a reusable code unit, encapsulating specific functionalities to promote an organized code structure. 


 :::tip What will I learn? 📝
 You'll learn how to reuse JavaScript code to format dates within your applications. By the end of this tutorial, you will learn:

 * 🔧 **Basics:** Learn how to create and configure the JS module

 ## Use JS module

 Great job on creating a JS module! Now, let's see how you can reuse it in different apps.


 <div style={{ position: "relative", paddingBottom: "calc(50.520833333333336% + 41px)", height: "0", width: "100%" }}>
diff --git a/website/docs/packages/tutorial/query-module.md b/website/docs/packages/tutorial/query-module.md

 A package is a collection of query and JS modules that can be versioned and distributed across instances. Inside packages, you can create multiple query and JS modules, allowing you to bundle and organize your application logic efficiently.

 :::tip What will I learn? 📝
 You'll create a reusable query module using product inventory data and display that data in a Table widget. By the end of this tutorial, you will learn:

 * 🔧 **Basics:** Learn how to create and configure the query module

 ## Use query module

 Great job on creating a query module! Now, let's see how you can reuse it in different apps.


 <div style={{ position: "relative", paddingBottom: "calc(50.520833333333336% + 41px)", height: "0", width: "100%" }}>
	This page guides you on how to pass parameters between modules and your Appsmith application.


	## From App to Modules
Check warning on line 7 in website/docs/packages/reference/pass-parameters.md GitHub Actions / run_vale `[vale] reported by reviewdog 🐶 [Google.Headings] 'From App to Modules' should use sentence-style capitalization. Raw Output: {"message": "[Google.Headings] 'From App to Modules' should use sentence-style capitalization.", "location": {"path": "website/docs/packages/reference/pass-parameters.md", "range": {"start": {"line": 7, "column": 4}}}, "severity": "WARNING"}`

	To pass parameters from your Appsmith application to modules, follow these instructions:

	### App to Query Module
Check warning on line 11 in website/docs/packages/reference/pass-parameters.md GitHub Actions / run_vale `[vale] reported by reviewdog 🐶 [Google.Headings] 'App to Query Module' should use sentence-style capitalization. Raw Output: {"message": "[Google.Headings] 'App to Query Module' should use sentence-style capitalization.", "location": {"path": "website/docs/packages/reference/pass-parameters.md", "range": {"start": {"line": 11, "column": 5}}}, "severity": "WARNING"}`

	You can use the Inputs property to pass real-time data from your Appsmith application to Query modules.


	<dd>

	Example: If you want to add limit and offset as inputs, create two inputs:
Check warning on line 20 in website/docs/packages/reference/pass-parameters.md GitHub Actions / run_vale `[vale] reported by reviewdog 🐶 [Google.Colons] ': I' should be in lowercase. Raw Output: {"message": "[Google.Colons] ': I' should be in lowercase.", "location": {"path": "website/docs/packages/reference/pass-parameters.md", "range": {"start": {"line": 20, "column": 10}}}, "severity": "WARNING"}`

	* `limit`, with a default value of `5`
	* `offset`, with a default value of `4`

	<dd>

	Example: If you want to pass data from a Table widget, use the following configuration to dynamically set the values:
Check warning on line 43 in website/docs/packages/reference/pass-parameters.md GitHub Actions / run_vale `[vale] reported by reviewdog 🐶 [Google.Colons] ': I' should be in lowercase. Raw Output: {"message": "[Google.Colons] ': I' should be in lowercase.", "location": {"path": "website/docs/packages/reference/pass-parameters.md", "range": {"start": {"line": 43, "column": 10}}}, "severity": "WARNING"}`


	* Limit: `{{Table1.pageSize}}`

	</dd>

	### App to JS Module
Check warning on line 57 in website/docs/packages/reference/pass-parameters.md GitHub Actions / run_vale `[vale] reported by reviewdog 🐶 [Google.Headings] 'App to JS Module' should use sentence-style capitalization. Raw Output: {"message": "[Google.Headings] 'App to JS Module' should use sentence-style capitalization.", "location": {"path": "website/docs/packages/reference/pass-parameters.md", "range": {"start": {"line": 57, "column": 5}}}, "severity": "WARNING"}`

	You can use the inputs property to pass data or directly pass data inside a function in the JS module.




	## Between Modules
Check warning on line 107 in website/docs/packages/reference/pass-parameters.md GitHub Actions / run_vale `[vale] reported by reviewdog 🐶 [Google.Headings] 'Between Modules' should use sentence-style capitalization. Raw Output: {"message": "[Google.Headings] 'Between Modules' should use sentence-style capitalization.", "location": {"path": "website/docs/packages/reference/pass-parameters.md", "range": {"start": {"line": 107, "column": 4}}}, "severity": "WARNING"}`
	};
	```

	For any future user actions, use the stored access token to access the relevant API endpoint. If the token has expired, refresh the access token for the user to proceed further. You can use the [Appsmith Object](/write-code/reference) and [Functions](/reference/appsmith-framework/widget-actions) within the JS module code, which can be executed in the App.
Check failure on line 114 in website/docs/packages/how-to-guides/use-query-inside-js-module.md GitHub Actions / run_vale `[vale] reported by reviewdog 🐶 [Google.Spacing] 't. I' should have one space. Raw Output: {"message": "[Google.Spacing] 't. I' should have one space.", "location": {"path": "website/docs/packages/how-to-guides/use-query-inside-js-module.md", "range": {"start": {"line": 114, "column": 92}}}, "severity": "ERROR"}`


	</dd>



	When you incorporate a module from the package into your application, you create a module instance. You can create multiple instances of the same package, each with different settings and configurations. Instances are named sequentially (e.g., `productutil1`, `productutil2`), allowing for customized functionalities.
Check failure on line 5 in website/docs/packages/reference/query-module.md GitHub Actions / run_vale `[vale] reported by reviewdog 🐶 [Google.Latin] Use 'for example' instead of 'e.g.,'. Raw Output: {"message": "[Google.Latin] Use 'for example' instead of 'e.g.,'.", "location": {"path": "website/docs/packages/reference/query-module.md", "range": {"start": {"line": 5, "column": 239}}}, "severity": "ERROR"}`

	This page provides information about the module settings and properties available within the app, enabling you to configure the query and JS modules.
	A JavaScript module serves as a reusable code unit, encapsulating specific functionalities to promote an organized code structure.


	:::tip What will I learn? 📝
Check warning on line 27 in website/docs/packages/tutorial/js-module.md GitHub Actions / run_vale `[vale] reported by reviewdog 🐶 [Google.FirstPerson] Avoid first-person pronouns such as ' I '. Raw Output: {"message": "[Google.FirstPerson] Avoid first-person pronouns such as ' I '.", "location": {"path": "website/docs/packages/tutorial/js-module.md", "range": {"start": {"line": 27, "column": 17}}}, "severity": "WARNING"}`
	You'll learn how to reuse JavaScript code to format dates within your applications. By the end of this tutorial, you will learn:

	* 🔧 Basics: Learn how to create and configure the JS module

	## Use JS module

	Great job on creating a JS module! Now, let's see how you can reuse it in different apps.
Check failure on line 90 in website/docs/packages/tutorial/js-module.md GitHub Actions / run_vale `[vale] reported by reviewdog 🐶 [Google.Exclamation] Don't use exclamation points in text. Raw Output: {"message": "[Google.Exclamation] Don't use exclamation points in text.", "location": {"path": "website/docs/packages/tutorial/js-module.md", "range": {"start": {"line": 90, "column": 33}}}, "severity": "ERROR"}` Check warning on line 90 in website/docs/packages/tutorial/js-module.md GitHub Actions / run_vale `[vale] reported by reviewdog 🐶 [Google.We] Try to avoid using first-person plural like 'let's'. Raw Output: {"message": "[Google.We] Try to avoid using first-person plural like 'let's'.", "location": {"path": "website/docs/packages/tutorial/js-module.md", "range": {"start": {"line": 90, "column": 41}}}, "severity": "WARNING"}`


	<div style={{ position: "relative", paddingBottom: "calc(50.520833333333336% + 41px)", height: "0", width: "100%" }}>

	A package is a collection of query and JS modules that can be versioned and distributed across instances. Inside packages, you can create multiple query and JS modules, allowing you to bundle and organize your application logic efficiently.

	:::tip What will I learn? 📝
Check warning on line 23 in website/docs/packages/tutorial/query-module.md GitHub Actions / run_vale `[vale] reported by reviewdog 🐶 [Google.FirstPerson] Avoid first-person pronouns such as ' I '. Raw Output: {"message": "[Google.FirstPerson] Avoid first-person pronouns such as ' I '.", "location": {"path": "website/docs/packages/tutorial/query-module.md", "range": {"start": {"line": 23, "column": 17}}}, "severity": "WARNING"}`
	You'll create a reusable query module using product inventory data and display that data in a Table widget. By the end of this tutorial, you will learn:

	* 🔧 Basics: Learn how to create and configure the query module

	## Use query module

	Great job on creating a query module! Now, let's see how you can reuse it in different apps.
Check failure on line 125 in website/docs/packages/tutorial/query-module.md GitHub Actions / run_vale `[vale] reported by reviewdog 🐶 [Google.Exclamation] Don't use exclamation points in text. Raw Output: {"message": "[Google.Exclamation] Don't use exclamation points in text.", "location": {"path": "website/docs/packages/tutorial/query-module.md", "range": {"start": {"line": 125, "column": 36}}}, "severity": "ERROR"}`


	<div style={{ position: "relative", paddingBottom: "calc(50.520833333333336% + 41px)", height: "0", width: "100%" }}>