Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Modules #2344

Merged
merged 42 commits into from
Feb 18, 2025
Merged
Changes from 1 commit
Commits
Show all changes
42 commits
Select commit Hold shift + click to select a range
5f87ca3
feat: Modules
harshilp24 Jun 25, 2024
7e3381d
..
harshilp24 Jun 25, 2024
11a8449
user-test-fixes
harshilp24 Jun 26, 2024
977322e
...
harshilp24 Jun 27, 2024
e93a601
..
harshilp24 Jul 2, 2024
e979cde
...
harshilp24 Jul 3, 2024
e54214c
...
harshilp24 Jul 4, 2024
f7b538a
..
harshilp24 Jul 4, 2024
72714e7
..
harshilp24 Jul 4, 2024
d25e62b
...
harshilp24 Jul 4, 2024
d2d0a5e
...
harshilp24 Jul 4, 2024
b24a3b1
..
harshilp24 Jul 8, 2024
9a2be93
...
harshilp24 Jul 9, 2024
e92d8ac
...
harshilp24 Jul 9, 2024
c878729
custom-login
harshilp24 Jul 11, 2024
c65f920
..
harshilp24 Jul 11, 2024
4a19340
..
harshilp24 Jul 11, 2024
9dd6319
..
harshilp24 Jul 11, 2024
6d76292
..
harshilp24 Jul 11, 2024
865046c
...
harshilp24 Jul 11, 2024
440e79d
..
harshilp24 Jul 12, 2024
9b09195
..
harshilp24 Jul 16, 2024
94d962d
...
harshilp24 Jul 16, 2024
5fbc0de
..
harshilp24 Jul 16, 2024
993ceed
...
harshilp24 Jul 16, 2024
abd71b1
custom-auth
harshilp24 Jul 16, 2024
d81aef6
..
harshilp24 Jul 16, 2024
f23de01
..
harshilp24 Jul 16, 2024
eb153db
...
harshilp24 Jul 22, 2024
d1da14d
..
harshilp24 Jul 22, 2024
8e367a2
..
harshilp24 Jul 22, 2024
7c50c7f
..
harshilp24 Jul 23, 2024
688b36c
...
harshilp24 Jul 24, 2024
ac1cad4
overview
harshilp24 Jul 24, 2024
fe7d53c
..
harshilp24 Jul 24, 2024
a975fae
...
harshilp24 Jul 28, 2024
d66b5c3
...
harshilp24 Jul 28, 2024
4349a3c
..
harshilp24 Aug 5, 2024
e6be569
callout
harshilp24 Jan 20, 2025
e2acb14
Merge branch 'main' into new-package-2
harshilp24 Jan 20, 2025
de545a0
..
harshilp24 Jan 20, 2025
afcc645
..
harshilp24 Jan 20, 2025
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
..
harshilp24 committed Jul 16, 2024

Verified

This commit was signed with the committer’s verified signature.
rgomezcasas Rafa Gómez
commit 5fbc0deb4f4b0a155670af0673f115ded4a6418e
8 changes: 8 additions & 0 deletions website/docs/packages/reference/query-module.md
Original file line number Diff line number Diff line change
@@ -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.

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.


<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.
Binary file added website/static/img/modules-diagram.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

Unchanged files with check annotations Beta

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