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
  • Access data
  • Access data in an object
  • Access data in an array
  • Transform data
  • Restrictions
  • View data
  • View query result
  • View data in Data Browser
  • Real-time view
  1. Build Apps
  2. Write JavaScript

JavaScript within {{ }}

Appizap offers developers the flexibility to leverage JavaScript for accessing and transforming data in their apps, empowering them to create unique and dynamic modules and apps.

When building apps in Appizap, you can use JavaScript (JS) to access and transform data from objects, including components, queries, and global parameters. When writing JavaScript inside SQL editor, component property's input box, table column settings, etc., always remember to enclose all your JS code inside double curly braces, such as {{'hello, ' + currentUser.name}}.

Access data

Objects have globally unique names, such as input1, query1, and table1. You can refer to the properties of the objects in your app by JS code.

Access data in an object

Appizap supports you accessing the data in an object using dot notation (objectName.keyName). For example,{{userInfo.selectedRow.userName}} accesses the userName value in the currently selected row of Table userInfo.

When writing JS in {{ }} to access values in an object, add a . after the object name to trigger an autosuggest menu in case you are not sure about objects' built-in properties or methods.

Access data in an array

You can access the values in an array by index. The index always starts at 0, so you can use array[0] to access the first element of the array.

Transform data

You can leverage built-in JS functions and third-party libraries in {{ }} to transform data, such as filter(), map() and reduce() operations.

Examples

Lowercase a string.

{{input1.value.toLowerCase()}}

Change date format.

{{dayjs(table1.selectedRow.date_column).format('YYYY-MM-DD')}}

Return name from query results.

{{query1.data.map(i => i.name)}}. 

Restrictions

The JS code in {{ }} should be a single-line code, such as .map() or .reduce() combined with an arrow function or a ternary operator.

Examples

{{query1.data.id.length}} // ✅ to reference a value
{{query1.data.map(row => row.id)}} // ✅ .map() + arrow function
{{ num1 > num2 ? num1 : num2 }} // ✅ ternary

The following JS code examples are illegal in {{ }}.

{{ 
    // ❌ you can't write code like this in {{ }}
    const array = query1.data;
    const filterArray = array.filter(it => it.value > 10);
    return filterArray; 
}}
// codes inside a transformer
if (select.value === "1") {  
    return "Option 1";
}
if (select.value === "2") {
    return "Option 2";
}
return "Option 3"; 

View data

Data from queries can be complicated and nested in real cases. Viewing data provides you with the detailed structure of data in objects and helps you understand your data better. Before accessing or transforming data, you may need to view the data and its structure first. Appizap offers three ways to view data.

View query result

By selecting the Run button located in the query editor, the user can initiate the execution of a query.

View data in Data Browser

Data browser located in the left pane displays all of the data inside your app. You can click on the node to expand and view the data structure.

Real-time view

When setting up properties or writing JS code inside an editor, you can view the evaluated result in real-time in a box below your editor.

PreviousWrite JavaScriptNextJavaScript Query

Last updated 4 months ago

If you wish to orchestrate multiple lines of JavaScript, Appizap supports you writing such code in .

transformers