..

appsmithorg · harshilp24 · Feb 18, 2025 · Jun 25, 2024 · Jun 25, 2024 · Jun 26, 2024
commit 5fbc0deb4f4b0a155670af0673f115ded4a6418e
diff --git a/website/docs/packages/reference/query-module.md b/website/docs/packages/reference/query-module.md
@@ -2,11 +2,19 @@



 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.
 
 
+<ZoomImage
+  src="/img/modules-diagram.png" 
+  alt=""
+  caption=""
+/>
+
+
+
 ## Query module
 
 When you integrate the query module into the app, you can access and modify the parameters that have been set up for the query module using the query editor. You have the option to include multiple query modules, whether they're from the same package or different ones, and supply parameters to each module according to your specific needs.

diff --git a/website/static/img/modules-diagram.png b/website/static/img/modules-diagram.png
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/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/pass-date-between-modules.md b/website/docs/packages/how-to-guides/pass-date-between-modules.md



 *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/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

 3. Click the **New Module** button located at the center of the screen. Choose **Query Module** and proceed to create a **new datasource** by selecting PostgreSQL.

 4. Enter the following details in the connection parameter fields. For this tutorial, we will use a product inventory database as an example to create queries and display data.

 <dd>


 ## 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%" }}>
diff --git a/website/docs/packages/tutorial/js-module.md b/website/docs/packages/tutorial/js-module.md

 ## 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%" }}>
	};
	```

	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>
	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"}`



	Example: If you want to transform query data into a format suitable for a Select widget, you can add a JS function like:
Check warning on line 69 in website/docs/packages/how-to-guides/pass-date-between-modules.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/how-to-guides/pass-date-between-modules.md", "range": {"start": {"line": 69, "column": 10}}}, "severity": "WARNING"}`

	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

	3. Click the New Module button located at the center of the screen. Choose Query Module and proceed to create a new datasource by selecting PostgreSQL.

	4. Enter the following details in the connection parameter fields. For this tutorial, we will use a product inventory database as an example to create queries and display data.
Check warning on line 55 in website/docs/packages/tutorial/query-module.md GitHub Actions / run_vale `[vale] reported by reviewdog 🐶 [Google.We] Try to avoid using first-person plural like 'we'. Raw Output: {"message": "[Google.We] Try to avoid using first-person plural like 'we'.", "location": {"path": "website/docs/packages/tutorial/query-module.md", "range": {"start": {"line": 55, "column": 87}}}, "severity": "WARNING"}`

	<dd>


	## 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"}` Check warning on line 125 in website/docs/packages/tutorial/query-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/query-module.md", "range": {"start": {"line": 125, "column": 44}}}, "severity": "WARNING"}`


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

	## 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"}`


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