You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: website/docs/packages/overview.md
+17-5Lines changed: 17 additions & 5 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -18,31 +18,43 @@ tags={[
18
18
19
19
<!-- vale on -->
20
20
21
-
Reusability is an integral part of application development, offering various advantages like speeding up the development process, centralizing business logic, and introducing standardization into applications. Appsmith enhances reusability by providing a feature set, which allows you to reuse widgets, queries, and JS logic across your applications.
21
+
In modern application development, reusability is key to building efficiently and maintaining high standards. Appsmith empowers you to embrace reusability through Packages, a powerful feature set designed to help you create, share, and manage reusable logic and UI components across your applications.
22
+
23
+
Whether you need to standardize backend operations or ensure a consistent user interface, Packages provide the tools to build faster, reduce redundancy, and improve the overall quality of your Appsmith applications.
24
+
22
25
23
26
:::info
24
27
For Appsmith version v1.57 or earlier, refer to the legacy documentation for the packages. For more information, see [Package Legacy Documentation](https://appsmith-docs-git-packages-v156-get-appsmith.vercel.app/packages/overview).
25
28
:::
26
29
27
30
## Packages
28
31
29
-
A package is a collection of JS and Query modules that can be shared across apps within the same workspace. With packages, developers can create, update, and share specific modules independently, making code more reusable and easier to maintain.
32
+
A **Package** is a reusable bundle that can be shared across apps in the same workspace. There are two types of packages in Appsmith:
30
33
31
34
<ZoomImage
32
35
src="/img/modules-landing.png"
33
36
alt="Modules image"
34
37
caption=""
35
38
/>
36
39
37
-
### Modules
40
+
### Code Packages
38
41
39
-
Modules are part of Package. There are two types of modules, query and JS, that can be used in multiple applications within the same workspace.
42
+
Code Packages are reusable bundles that group multiple logic-based modules, which can be shared across applications within the same workspace.
43
+
44
+
Inside a Code Package, you can create two types of modules—Query Modules and JavaScript Modules. These modules allow you to encapsulate backend logic in a reusable, version-controlled way, helping you standardize how data is fetched and processed across your apps.
40
45
41
46
***Query Modules:** Reusable datasource queries that can be used across different apps and pages. You can pass dynamic inputs to the query module, which allows you to change query parameters based on user input or widget actions. They are deployment-independent, meaning updates affect only applications in edit mode and not the deployed version.
42
47
43
48
***JavaScript Modules:** Reusable objects containing JavaScript functions and logic, enabling efficient data manipulation and standardized handling. It allows you to pass data between query and JS modules, ensuring smooth integration and reuse across different applications.
44
49
45
-
***UI Modules (Coming Soon):** Reusable widgets and UI components designed to enhance modularity and reusability in the user interface, streamlining the development and maintenance of consistent UI elements across multiple applications.
50
+
### UI Packages
51
+
52
+
53
+
UI Packages allow you to create and distribute reusable UI components across multiple applications in the same workspace.
54
+
55
+
Inside a UI Package, you can create UI Modules—self-contained user interface components that bundle widgets, logic, and internal queries into a configurable unit. These modules are designed to enhance consistency, simplify UI development, and promote reuse across your apps.
56
+
57
+
***UI Modules:** Reusable widgets and UI components designed to enhance modularity and reusability in the user interface, streamlining the development and maintenance of consistent UI elements across multiple applications.
Modules in Appsmith are integral components of a Package tailored. They are reusable components containing queries and JSObjects that can yield results across multiple applications within the same workspace.
When you add a UI Module from a package into your application, you create a UI Module Instance. Each instance acts as a reusable, self-contained UI component that can be configured dynamically without modifying the internal structure of the module.
@@ -29,13 +49,18 @@ Inputs enable you to dynamically populate widget properties, run queries, or exe
29
49
You can bind static values, widget outputs, query results, or app/user data into Inputs using JavaScript bindings.
30
50
31
51
32
-
*Example:* If you want to pass customer details fetched from a query into the module, you can set Inputs using the query response fields.
52
+
*Example:* If you want to pass customer details fetched from a query into the module, you can bind the input like:
33
53
34
-
```js
35
-
//inputCustomerName
54
+
```javascript
36
55
{{getCustomerDetails.data.name}}
37
56
```
38
57
58
+
Then inside the module, the corresponding widget (e.g., `Input1`) can use:
59
+
60
+
```javascript
61
+
{{inputs.customerName}}
62
+
```
63
+
39
64
40
65
</dd>
41
66
@@ -47,12 +72,11 @@ Allows you to access dynamic values from the UI Module Instance in your parent a
47
72
48
73
Outputs enable you to retrieve internal module state, computed values, or processing results without needing to understand the module's internal implementation.
49
74
50
-
**Accessing Module Outputs**
75
+
You can access outputs using the module instance name followed by .`outputs.outputName`:
51
76
52
-
Module outputs can be accessed directly using the module instance name:
53
77
54
78
```javascript
55
-
{{ModuleInstanceName.outputName}}
79
+
{{ModuleInstanceName.outputs.outputName}}
56
80
```
57
81
58
82
*Example:* If you want to display data from a module in a Table widget on your application:
A UI Module is a reusable container that groups widgets, queries, and JavaScript logic into a single unit. It is created inside a UI Package and is designed for reuse across multiple applications.
4
23
@@ -19,41 +38,33 @@ Content properties control the functional behavior of the UI Module container an
19
38
20
39
21
40
Inputs allow you to pass dynamic values from the application into the UI Module.
22
-
They act as a bridge between the app and the widgets, queries, or JS logic inside the module.
41
+
They act as a bridge between the app and the widgets, queries, or JS logic inside the UI module.
23
42
24
43
You can create multiple Inputs when designing the module. Each Input has:
25
44
26
45
-**Name:** Used to reference the value inside the module.
27
46
28
47
-**Default value (optional):** Used if no value is passed from the application at runtime.
29
48
30
-
Inputs help you dynamically configure the behavior of widgets inside the UI Module without modifying the module itself.
31
-
32
-
**Accessing Inputs**
33
-
34
-
Inputs can be accessed using the same syntax across widgets, queries, and JavaScript functions within the module:
49
+
You can access input values using:
35
50
36
51
```javascript
37
52
{{inputs.inputName}}
38
53
```
39
54
55
+
*Example 1:* If you want to show dynamic data in a widget, bind the property like:
40
56
41
-
-**Widget**: Use `{{inputs.inputName}}` inside widget properties such as Default Text, Label, Data, or Options.
42
-
43
-
*Example:* If you want to prefill a customer profile form with the user's email, create an input named `inputemail` and set the Input widget’s Default Text property to `{{inputs.inputemail}}`, passing `{{appsmith.user.email}}` from the application.
57
+
```js
58
+
{{inputs.ordersData}}
59
+
```
44
60
45
-
-**Query**: Use `{{inputs.inputName}}` inside the query body to dynamically inject input values at runtime.
61
+
*Example 2:* If you want to filter a query using an input value, use:
46
62
47
-
*Example:* If you want to fetch customer addresses based on the selected country, create a query that uses:
48
-
49
-
```js
50
-
SELECT*FROM addresses WHERE country = {{inputs.inputCountry}}
51
-
```
63
+
```js
64
+
SELECT*FROM addresses WHERE country = {{inputs.inputCountry}}
65
+
```
52
66
53
-
-**JavaScript**: Use `inputs.inputName` directly inside JavaScript Object functions to dynamically operate based on input values.
54
67
55
-
*Example:* If you want to adjust available shipping options based on country, create a function that checks `inputs.inputCountry` and returns different options accordingly.
56
-
57
68
58
69
</dd>
59
70
@@ -68,15 +79,23 @@ Each Output has:
68
79
-**Name:** Used to reference the value in the parent application.
69
80
-**Value:** The internal module data, state, or computed result you want to expose.
70
81
71
-
**Accessing Outputs**
72
-
73
-
When a UI Module is added to an application, its outputs become available through the module instance name:
82
+
You can access output values using the module instance name from the application:
74
83
75
84
```javascript
76
-
{{ModuleName.outputName}}
85
+
{{ModuleInstanceName.outputs.outputName}}
86
+
```
87
+
88
+
:::note
89
+
Outputs are only accessible in the parent app, not inside the module itself.
90
+
:::
91
+
92
+
*Example:* If you want to filter a query using a value generated inside the module (e.g., customerId),
93
+
create an output in the module and access it in your app query:
94
+
95
+
```sql
96
+
SELECT*FROM orders WHERE customer_id = {{CustomerModule1.outputs.customerId}}
77
97
```
78
98
79
-
*Example:* If you have a login module that generates an authentication token, you can access it in the parent app using `{{LoginModule.authToken}}` for subsequent API calls.
This page provides information about versioning and tagging in Packages. You can connect a Package to any Git remote repository, similar to applications. When a Package is Git-connected, you can commit changes, merge branches, and create tagged releases.
A UI Module is a reusable, self-contained component built using widgets, queries, and JS Objects. It allows you to group UI elements, logic, and data interactions into a single unit that can be reused across multiple applications.
4
23
@@ -87,7 +106,7 @@ These widgets will display user details such as the user's name, email, ID, and
87
106
To bind an input value to a widget, use the following syntax:
0 commit comments