..

appsmithorg · harshilp24 · Feb 18, 2025 · Jun 25, 2024 · Jun 25, 2024 · Jun 26, 2024
commit 9dd631970acf1441f9c86efc3fb41f95a49f5dd3
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
@@ -111,7 +111,7 @@
 };
 ```

 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>
@@ -126,30 +126,34 @@
 Follow these steps to use the login authentication module within your application:
 
 
+<div style={{ position: "relative", paddingBottom: "calc(50.520833333333336% + 41px)", height: "0", width: "100%" }}>
+  <iframe src="https://demo.arcade.software/iOLfuhd6zlqPbgP7iSW2?embed" frameborder="0" loading="lazy" webkitallowfullscreen mozallowfullscreen allowfullscreen style={{ position: "absolute", top: "0", left: "0", width: "100%", height: "100%", colorScheme: "light" }} title="Appsmith | Connect Data">
+  </iframe>
+</div>
 
 1. Open your **App** from the homepage and ensure that both the app and modules share the same workspace.
 
 2. Create a simple login form using widgets such as Text and Input fields, tailored to meet your specific requirements.
 
-3. Select the JS tab on the Entity Explorer, add the **Login JS module**, and pass login form data into function parameters for authentication:
+3. Select the JS tab on the Entity Explorer, add the **Login JS module**, and pass login form data into function parameters for authentication. To pass data from the **App to a JS module**, you can set **Inputs** parameters or pass it by calling the respective function with parameters. 
 
 
-<dd>
 
-To pass data from the **App to a JS module**, you can set **Inputs** parameters or pass it by calling the respective function with parameters, like `login([email protected], password@123)`.
+<dd>
 
-<ZoomImage
-  src="/img/inputs-js1.png" 
-  alt="Inputs image"
-  caption=""
-/>
 
 </dd>
 
 4. Set the **onClick** event of the Submit/Login button to run the JS function.
 
 <dd>
 
+
+```js
+{{auth_module1.signin(email_input.text, pasword_input.text)}}
+```
+
+
 When the button is clicked, the JS module verifies whether the user's email exists in the database. If the email and password match, it redirects the user to a new page.
 
 

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/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
 With this, you don't need to create multiple same queries for different pages or applications. You can reuse this same query module in various contexts, such as:

 - Displaying the entire inventory data in a Table widget.
 - Displaying low stock data (e.g., `< 50`) in a List widget on a different page.
 - Displaying stock data in a chart widget, and more.

 </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%" }}>
	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 68 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": 68, "column": 10}}}, "severity": "WARNING"}`
	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
	With this, you don't need to create multiple same queries for different pages or applications. You can reuse this same query module in various contexts, such as:

	- Displaying the entire inventory data in a Table widget.
	- Displaying low stock data (e.g., `< 50`) in a List widget on a different page.
Check failure on line 86 in website/docs/packages/tutorial/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/tutorial/query-module.md", "range": {"start": {"line": 86, "column": 30}}}, "severity": "ERROR"}`
	- Displaying stock data in a chart widget, and more.

	</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 126 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": 126, "column": 36}}}, "severity": "ERROR"}`


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