Appizap
  • Appizap Overview
  • Build Apps
    • On-boarding Flow
    • Ideas to Apps using AI
    • Create a new app
    • App Configuration
      • App Overview
      • General Settings
      • Domain Settings
      • Version Release & Management
      • App Assets
      • Auth Settings
    • UI Builder
      • Module
      • Menu Navigation
      • Version Logs & Restore
      • Keyboard Shortcuts
    • GUI, Themes & Styles
    • Event handlers
    • Write JavaScript
      • JavaScript within {{ }}
      • JavaScript Query
      • Transformers
      • Temporary State
      • Data Responder
      • Built-in JavaScript Functions
      • Use Third-party Libraries
    • How-to-use
      • Welcome to Appizap!
      • FAQ
  • Appizap Dashboard
    • Your Apps
    • Database
    • Workflows
    • Media & Files
    • Query Library
    • Audit Logger
    • Templates
  • Workspaces
    • Workspace Settings
    • User Authentication
    • User Groups
    • Themes
    • Advanced
  • Appizap Concepts
  • Appizap Studio
    • Data Browser
      • Screen, Modules & Navigations
      • Active Components
      • In-App Modals
      • Data Queries in your App
      • Global Data Variables
    • Layers
    • Screen Settings
    • Debugger
    • Data Queries
    • Widget Library
      • Link
      • Icons
      • Steps
      • Button Group
      • Form Button
      • Grid
      • Responsive Grid Layout
      • Drawer
      • Navigation
      • Cascader
      • Comment
      • Mention
      • Collapsible Container
      • Rich Text Editor
      • Input
      • Modal
      • Text Display
      • Number Input
      • Password
      • List View
      • Date
      • Checkbox
      • Radio
      • Switch
      • Multi Select
      • Dropdown
      • File Upload
      • Phone Number Input
      • Download Pdf Button
      • Image
      • Divider
      • Progress Circle
      • Progress
      • Form
      • JSON Schema Form
      • Container
      • Tabbed Container
      • Table
      • Date Range
      • Time
      • Time Range
      • Toggle Button
      • Segmented Control
      • Rating
      • Timeline
      • Slider
      • Range Slider
      • Control Button
      • File Viewer
      • Image Carousel
      • Lottie Animation
      • Tree
      • Tree Select
      • IFrame
      • Calendar
      • Custom Component
      • Auto Complete
      • Chart
      • Graph Chart
      • Treemap Chart
      • Basic Chart
      • Geo Map Charts
      • Funnel Chart
      • Candlestick Chart
      • Select
      • Audio
      • Caller
      • Text Area
      • Responsive Flex Layout
      • Timer
      • Image Editor
      • AI Component
    • Component Specific Actions
  • Database
    • Connect DB
    • Build Internal DB
      • Arrays
      • Indexes
      • Using JSON Type
      • Cascade Delete
      • Data Load and Import
    • Data Sources
      • Connect Data Sources
        • Big Query
        • ClickHouse
        • CouchDB
        • DynamoDB
        • Elasticsearch
        • MariaDB
        • Microsoft SQL Server
        • MongoDB
        • MySQL
        • Oracle
        • PostgreSQL
        • Redis
        • Snowflake
      • Connect APIs
        • REST API
        • GraphQL
        • Google Sheets
        • S3
        • OpenAPI
        • Firebase
        • WooCommerce
        • OpenAI
        • Athena
        • Lambda
    • Query Library
    • Storage
      • Buckets
      • Uploads
      • Objects
  • Appizap Workflow Builder [Pro]
    • Workflows
      • Create a workflow
      • Nodes
      • Connections
      • Sticky Notes
      • Tags
      • Import and Export
      • Templates
      • Sharing
      • Settings
      • History
      • Find Workflow ID
    • Build Flow Logic
      • Conditional Nodes
      • Data Merging
      • Looping
      • Waiting
      • Sub-Workflow
      • Execution Order
    • Data Handling
      • Data Structure
      • Transforming data
      • Use Code
      • Mapping using UI
      • Data Item Linking
      • Data Pinning
      • Data Editing
      • Data Filtering
      • Data Mocking
      • Binary Data
    • Editor UI
    • Credentials
      • Create and Edit
      • Sharing
    • Integrations
      • Node Types
      • Core Nodes
      • Actions
      • Triggers
      • Credentials
      • Custom API Operations
    • Error Handling
      • Errors related to memory
    • Keyboard Shortcuts
  • Security & Compliance
  • Terms & Conditions
  • Privacy Policy
  • User Guide
    • Getting Started
    • Admin Console
    • Data Maintenance
Powered by GitBook
On this page
  • Module basics
  • Create a new module
  • Configure module settings
  • Design module UI
  • Insert module to apps or other modules
  • Module settings
  • Input
  • Demo: A statistics module
  • Output
  • Method
  • Event
  • Permissions
  • Releases and versions
  1. Build Apps
  2. UI Builder

Module

By organizing the app into distinct modules, the users can easily manage and update different aspects of the app without affecting the entire system.

PreviousUI BuilderNextMenu Navigation

Last updated 4 months ago

When developing an application, it is essential to streamline the process by reusing components and queries across multiple applications. This can be achieved through the use of modules, which are a combination of components and queries. These modules can be easily integrated into various applications or other modules, which are referred to as external applications in the context of this discussion.

Refer to for more information on how to create new modules.

By incorporating a module into an application or other modules, it can operate seamlessly as a single component within the overall framework.

Module basics

Create a new module

Configure module settings

You can configure a module's settings in the Settings tab of data browser:

  • Input: parameters passed into the current module from external apps.

  • Output: data exposed to external apps.

  • Method: methods exposed to external apps. For example, you can define a module with a resetTitle method, so that external apps can call it to reset the module's title.

  • Event: module events can be handled by external apps. For example, you can define an event named dataChanged, so that external apps can add event handlers to it once the dataChanged event is fired by the module.

Design module UI

The other areas of the module editor are similar to those of the web app editor. Insert components and create queries the same way as your app-building process. In the module editor, you can resize a module by dragging the bottom-right corner to the desirable default size. Toggle the button in the Properties panel to control whether the component height scales with the container.

This only works for the fixed-height components within the module.

Insert module to apps or other modules

When editing an app or module, select Insert > Extensions > Modules to display the modules that you have access to.

Then drag and drop the module onto the canvas, and set input parameters, change styles inside the module's Properties panel.

Inspect the data exposed by the module in the data browser.

Module settings

Input

Module inputs are parameters passed to the module from external apps. The supported input types are data, string, number, array, boolean, and query. The first five are data types. Choose data to not restrict it to a specific data type. When choosing the type of query, you can pass in a query from external apps and trigger it inside the module, then you can reference a module input parameter by its name.

Demo: A statistics module

This section guides you through the steps to build a statistics module and reuse it in an app.

  1. Create module inputs:

    In the Settings tab, click + Add to create a new module input, and then set its name, type, default value (optional) and tooltip (optional). In this example, three module inputs are added: two string inputs title, imageUrl, and a number input count:

  2. Design the module UI:

    1. Insert a container into the module.

    2. Add two text components and an image component to the container.

    3. Adjust their properties, such as the layout, height, and style.

  3. Bind the components' value to the module inputs. For example, the Image source of the image is bound to input parameter imageUrl.value.

  4. Insert the newly built module into an external app or module, and you can pass in values to configure its properties.

  5. Reuse the module multiple times by passing different input values.

Input Test

To quickly test the effectiveness of input parameters during editing a module, you can use the Input Test function. In the module editor, select the whole module to conduct tests with simulated input data in the Properties panel. In the example previously mentioned, you can set the test values for the three module inputs: title, imageUrl, and count, as shown below:

Output

Module outputs are the data exposed to an app or other modules. You can inspect the outputs of a module in the data browser and access them via JavaScript code in {{ }}.The following example shows the outputs in a user-filtering module.

Then you can check out and reference the outputs of a module in apps or other modules using it.

select * from public.users
where phone like {{’%’ + userFilterModule.tel + ‘%’}}

Method

Add a new method

In the Settings tab, click + Add to create a new module method. Click the method to rename it and select an action. In the following example, the method clearAll is designed to clear the content in both input boxes. To achieve this, select Run JavaScript as the action, and write JS code to call the clearValue method of both two input components.

When creating a method for a module, you cannot create input parameters for the method and can only reference parameters within the scope of the current module.

Call a method

When using modules, you can call a module method in two ways:

  • In event handlers, select Action > Control component, and then select the component and method.

  • Use dot notation in JavaScript queries. For example, module1.clearAll() calls the method clearAll() of module1.

Method Test

You can simulate testing method calling in the Method Test function.

Event

Events are used to transfer signals from a module to external apps, such as defining orderPlaced OrderModified events for an order management module. You can add and fire events within a module, and deal with them using Event handlers externally.

Add a new event

In the Settings tab, click + Add to create a new module event. Click the event to set its name.

Trigger an event

In the following example, the event contentChange is triggered when the content in any input box changes. You can trigger it in two ways:

  • In Event handlers of both input components, click + Add, select Change as the component event and Trigger module event as the action, and finally select the module event contentChange.

  • Use dot notation in JavaScript queries: contentChange.trigger().

Event handlers

When an app uses a module, you can configure how the current app reacts to the module's events. For example, in Event handlers of module1, click + Add, and select the module event contentChangeand the action Show notification.

Permissions

Users are given access to different modules within applications based on their permissions. As an editor, in order to utilize modules in external applications, you must have at least the viewer role for that specific module. This ensures that users have the appropriate level of access to view and interact with the necessary modules.

Releases and versions

For an unpublished module, the apps and modules use its latest version; while for a published one, you need to publish it again to sync your latest changes.

For more details, check out chapter .

Appizap stores the history versions of your modules for your references. Click Preview > Publish at the top right. The release management of a module is identical to that of an app. For detailed information, see

Module settings
Your Modules
Build a
Reuse this module anywhere
statistics module
Release management