..

Author: harshilp24

website/docs/packages/reference/ui-module-instance.md

@@ -1,16 +1,15 @@
 # UI Module Instance
 
 
-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.
+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.
 
 You can create multiple instances of the same UI Module with different input values and settings.
-Instances are named sequentially (e.g., customerProfile1, customerProfile2) for easier identification.
+Instances are named sequentially (e.g., `customerProfile1`, `customerProfile2`) for easier identification.
 
 This page provides information about the settings and properties available for configuring a UI Module Instance.
 
 
+ <ZoomImage src="/img/uimod.drawio.png" alt="" caption="" />
 
 
 

website/docs/packages/reference/ui-module.md

@@ -2,11 +2,7 @@
 
 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.
 
-- You can add different types of widgets inside the module container. The entire container is rendered together when the module is used in an application.
-
-- Widgets inside the module cannot be edited directly from the application. All configurations must be done through defined Inputs.
-
-- UI Modules allow dynamic values to be passed from the application into the module using Inputs. Each module instance can receive different values based on application requirements.
+You can add different types of widgets inside the module container. The entire container is rendered together when the module is used in an application. Widgets inside the module cannot be edited directly from the application. All configurations must be done through defined Inputs.
 
 This page provides information about the properties, content settings, and style configurations available for UI Modules.
 
@@ -18,6 +14,10 @@ Content properties control the functional behavior of the UI Module container an
 
 <dd>
 
+ <ZoomImage src="/img/uimod.png" alt="" caption="" />
+
+
+
 Inputs allow you to pass dynamic values from the application into the UI Module.
 They act as a bridge between the app and the widgets, queries, or JavaScript logic inside the module.
 
@@ -110,7 +110,6 @@ Background Color is JavaScript configurable and can also be dynamically controll
 
 Sets the color of the border around the UI Module container. Accepts a hex code, RGB value, or color name.
 
-*Example:* If you want the container to have a grey border, set the Border Color to `#E0E0E0`.
 
 </dd>
 
@@ -122,7 +121,6 @@ Sets the color of the border around the UI Module container. Accepts a hex code,
 Sets the thickness of the border around the UI Module container.
 Default value is `1`.
 
-*Example:* If you want a thicker border for emphasis, set the Border Width to `2`.
 
 </dd>
 

website/docs/packages/tutorial/ui-module.md

@@ -1,11 +1,14 @@
 # UI Module 
 
+
+A UI Module is a reusable, self-contained component built using widgets, queries, and JS Objects.
+It enables you to package visual elements, business logic, and data integrations into a module that can be easily reused across applications.
+
 In this tutorial, you will learn how to create a reusable UI Module that accepts dynamic inputs from an application.
-UI Modules can be built using widgets, private queries, and private JS Objects, enabling you to encapsulate visual elements, data fetching, and logic within a self-contained component.
 
 
 :::tip What will I learn? 📝
-In this tutorial, you will create a reusable User Profile Card UI Module that displays basic user details dynamically.
+In this tutorial, you will create a reusable **User Profile Card** UI Module that displays basic user details dynamically.
 
 - 🔧 **Basics**: Learn how to create and configure a UI Module.
 - 🔄 **Dynamic Data**: Learn how to pass data from an application into the UI Module.
@@ -24,7 +27,7 @@ Before you start, make sure you have the following:
 
 
 
-:::note
+:::info
 The ability to use query modules or JS modules directly inside UI Modules is not currently supported. This functionality will be available in a future release.
 :::
 
@@ -43,15 +46,15 @@ The ability to use query modules or JS modules directly inside UI Modules is not
 </div>
 
 
-1. Open your workspace and click **Create New** in the top-right corner. Select Package and choose **UI Package** as the package type.
+1. Open your workspace and click **Create New** in the top-right corner. Select **Package** and choose **UI Package** as the package type.
 
 <dd>
 
 A UI Package is a collection of UI Modules that contain reusable widgets, queries, and JS Objects. These modules can be dynamically configured and reused across multiple applications within the same workspace.
 
 </dd>
 
-2. Click on the Module Container. The module container represents the overall layout for the UI Module, where you define inputs and configure widgets.
+2. Click on the **Module Container**. The module container represents the overall layout for the UI Module, where you define inputs and configure widgets.
 
 
 3. From the right-side property pane of the Module Container, you can configure **Inputs**. 
@@ -60,7 +63,7 @@ A UI Package is a collection of UI Modules that contain reusable widgets, querie
 <dd>
 
 Inputs allow you to dynamically set widget values inside the module.
-These values are passed from the application into the UI Module at 
+These values are passed from the application into the UI Module at runtime.
 
 Create the following inputs for the module:
 
@@ -74,7 +77,7 @@ Create the following inputs for the module:
 
 </dd>
 
-4. Drag three Text widgets and one Image widget onto the canvas to create a simple user profile UI.
+4. Drag three **Text** widgets and one **Image** widget onto the canvas to create a simple user profile UI.
 These widgets will display user details such as the user's name, email, ID, and profile photo, using the input values passed from the application.
 
 5. Once the widgets are added to the canvas, configure each widget to display values passed through the module’s inputs.
@@ -102,21 +105,16 @@ Set the widget properties as follows:
 6. Publish the UI Module from the top-right corner.
 This allows the module and its changes to reflect on the application side for reuse.
 
-<dd>
 
-If the package is git-connected, you also need to release a new version for the changes to be available. For more details, refer to [Package Version Control](/packages/reference/versioning).
 
-</dd>
-
-
-7. Navigate back to the workspace homepage and create a new application.
+7. Navigate back to the workspace and create a new application.
 
 8. Inside the application, click on the **UI** tab and select Add **New UI Element**. Click on **Module** to view all the UI Modules that are published within the same workspace.
 
 
 9. Drag the `UserProfileCard` module onto the canvas. This creates an instance of the UI Module that you can configure inside the application.
 
-10. To pass dynamic data into the module, drag a Table widget onto the canvas.Click **Connect Data** and select the **Sample Users** datasource.
+10. To pass dynamic user data into the module, drag a Table widget onto the canvas. Click **Connect Data** and select the **Sample Users** datasource.
 Then, select the **public.users** table to connect the Table widget to sample user data.
 
 11. Click on the `UserProfileCard` module instance added to the canvas.
@@ -137,9 +135,7 @@ Use the following bindings:
 
 </dd>
 
-:::tip
-🎉 Great Job!
-
+:::tip 🎉 Great Job!
 You have successfully created a reusable UI Module that dynamically displays user details based on application data.
 
 By using inputs, you can easily reuse this User Profile Card across different applications and pass parameters at runtime, without rebuilding the UI each time.