Lowcoder Documentation
  • Lowcoder overview
    • The "Hello World" walk
  • 🆕Setup and run
    • Cloud & Private Cloud
    • Self-hosting
      • Google Cloud Platform
      • Easypanel
      • Heroku
      • Raspberry Pi
      • Access local database or API
      • Update MongoDB Versions
      • Lowcoder Version Update
      • Traefik loadbalancer
      • SMTP Server
      • Migration from Openblocks
    • Security
  • 🏨Workspaces & Teamwork
    • Workspaces
      • Multi-Workspace Mode
      • Single Workspace Mode
    • Members and Groups
    • Permissions for Resources
    • OAuth
      • KeyCloak
      • Google
      • GitHub
      • Generic OAuth Provider
    • Query library
    • Lowcoder Marketplace
  • ✨Build Applications
    • Create a new App
      • App(s) Navigation
      • Modules
      • Version and Release Management
    • App Editor
      • Query & Editing Roundtrips
      • Bulk Editing
      • Keyboard shortcuts
      • Data selection & Javascript
      • Layers
      • Visual Components
        • Common Component Settings
        • Messages / Toast
        • Dashboard & Reporting
          • Table
          • Charts and graphs
            • Bar Chart
            • Line Chart
            • Pie Chart
            • Scatter Chart
            • CandleStick Chart
            • Funnel Chart
            • Gauge Chart
            • Graph Chart
            • Heatmap Chart
            • Radar Chart
            • Sankey Chart
            • Suburst Chart
            • Theme River Chart
            • Tree Chart
            • Treemap Chart
            • Mermaid Chart
          • Google Maps
        • Layout & Navigation
          • List View
          • Drawer
          • Modal
          • Navigation
          • Cascader
          • Tree / Tree Select
          • Link
          • Floating Button
          • Text
          • Step Control
          • Page Layout
          • Content Card
          • Tabbed Container
        • Data Collection & Forms
          • Form
          • Input Field Types
          • JSON Schema Form
        • Meeting & Collaboration
        • Project Management
        • Calendar & Scheduling
          • Calendar
          • Date & Date Range
          • Time & Time Range
        • Document & File Management
          • File upload
        • Item & Signature Handling
        • Multimedia & Animation
          • Image
        • Integration & Extension
        • Legacy & Deprecated
      • Option lists
      • Date handling
      • Use Markdown
    • App Interaction
      • Event handlers
    • Themes & Styling
      • Design an efficient and user-friendly form
      • Customize Styles
      • Component Styling Possibilities
    • Video Calls in Lowcoder
  • 🚀Connect your Data
    • Data source basics
      • Configure IP allowlists
    • Data sources in Lowcoder
      • APIs as Datasource
        • REST API
        • GraphQL
        • Google Sheets
      • SQL Databases
        • MySQL
        • MariaDB
        • Supabase
          • Supabase PostgreSQL
          • Supabase Assets API
          • Supabase RealTime
          • Supabase OAuth
        • PostgreSQL
        • Microsoft SQL Server
        • Oracle
      • NoSQL Databases
        • MongoDB
        • CouchDB
        • DynamoDB
      • InMemory Databases
        • Redis
      • File Storages
        • S3 File Storage
      • BigData & OLAP
        • Big Query
        • Snowflake
        • ClickHouse
        • Elasticsearch
      • Websocket Datasource
    • Query basics
      • Bind Query Data to Components
      • Query library
  • 🪄Workflows
    • n8n Integration
  • 💫Business Logic in Apps
    • Write JavaScript
      • JavaScript query
      • Temporary state
      • Transformers
      • Data responder
      • Built-in JS functions
  • 🙌Publish Apps
    • Share an App
    • Publish an App
    • Embed an App
      • Embed App in HTML Pages
      • Embed App in WordPress Pages
      • Embed Apps in React
      • Embed Apps in NEXT.JS
      • Native embed SDK
        • Build the SDK from Source
  • 🔥Lowcoder Extension
    • Opensource Contribution
      • Develop UI components for Apps
      • Develop Data Source Plugins
    • Use third-party libraries in Apps
      • Day.js Date handling
      • Import your own JavaScript Library
    • Custom component
    • Lowcoder Open REST API
  • Lowcoder for Enterprise
    • Custom branding
Powered by GitBook
LogoLogo

More to try...

  • Lowcoder Website
  • Free Cloud Platform
  • Github
  • Discord

© Lowcoder Software LTD

On this page
  • utils - utility functions
  • utils.openUrl()
  • utils.openApp()
  • utils.downloadFile()
  • utils.copyToClipboard()
  • utils.logoutUser()
  • message - global notification
  • localStorage
  • localStorage.values
  • localStorage.setItem()
  • localStorage.removeItem()
  • localStorage.clear()
  • Responsiveness / Screen information
  • screenInfo.deviceType
  • screenInfo.height
  • screenInfo.width
  • screenInfo.isDesktop
  • screenInfo.isTablet
  • screenInfo.isMobile

Was this helpful?

  1. Business Logic in Apps
  2. Write JavaScript

Built-in JS functions

utils - utility functions

utils.openUrl()

Open a URL.

// Syntax
utils.openUrl( url: string, options?: { newTab:  boolean = true } )
Parameter
Description

url

Required. A String value that specifies the URL to open. It must start with http:// or https://.

newTab

Optional. Boolean value that, when True, specifies the url is to open in a new tab. The default value is True.

// Example: Open google.com in a new tab.
utils.openUrl("https://www.google.com", { newTab: true })

utils.openApp()

Open an Lowcoder app.

// Syntax
utils.openApp( applicationId: string, options?: { queryParams?: {"key":"value"}, hashParams?: {"key":"value"}, newTab: true } )
Parameter
Description

appId

Required. A String value that specifies the ID of the app to open.

queryParams: {'key1':'value1',key2:'value2',...}

Optional. An Object that specifies query parameters to pass into the app. The query parameters are added to the app URL in the form of ?key1=value1&key2=value2&...

hashParams:{'key1':'value1',key2:'value2',...}

Optional. An Object that specifies hash parameters to pass into the app. The hash parameters are added to the app URL in the form of #key1=value1&key2=value2&...

newTab

Optional. A Boolean value that, when True, specifies the url is to open in a new tab. The default value is True.

// Example: Open an Lowcoder app in a new tab.
utils.openApp("632bddc33bb9722fb888f6c0", { newTab: true })

// Example: Open an Lowcoder app and pass in "id" parameter.
utils.openApp("632bddc33bb9722fb888f6c0", {
  queryParams: { "id": table1.selectedRow.id },
} )

utils.downloadFile()

Download a file containing the specified data.

// Syntax
utils.downloadFile(data: any, fileName: string, options?: {
  fileType?: string, 
  dataType?: "url" | "base64"
} )
Parameter
Description

data

Required. A String or Object that specifies the data to download from queries, components, transformers, etc.

fileName

Required. A String value that specifies the name of the file to download.

fileType

dataType

Optional. A String value that specifies the type of the data: "url" or "base64".

// Example: Download the base64 data from a file component as a PNG file named users-data.
utils.downloadFile(file1.value[0], "users-data", {
  fileType: "png",
  dataType: "base64",
})


// Example: Download the results of query1 as a XLXS file named users-data.
utils.downloadFile(query1.data, "users-data", { fileType: "xlsx" })
// or in this way:
utils.downloadFile(query1.data, "users-data.xlsx")

// Example: Download the results of query1 as a XLXS file named users-data.
utils.downloadFile(restApiQuery.data, "users-data", {
  fileType: "pdf",
  dataType: "base64",
})

utils.copyToClipboard()

Copy a string to clipboard.

// Syntax
utils.copyToClipboard( text: string )
Parameter
Description

text

Required. A String value that specifies the content to copy.

// Example: Copy the content of input component to clipboard.
utils.copyToClipboard( input1.value )

utils.logoutUser()

Logout a User from the current Session.

// Syntax
utils.logOut()

message - global notification

Use message methods to send a global alert notification, which displays at the top of the screen and lasts for 3 seconds by default. Each of the following four methods supports a unique display style.

// message.info( text: string, options?: {duration: number = 3 } )
message.info("Please confirm your information", { duration: 10 })
// message.success( text: string, options?: {duration: number = 3 } )
message.success("Query runs successfully", { duration: 10 })
// message.warn( text: string, options?: {duration: number = 3 } )
message.warn("Warning", { duration: 10 })
// message.error( text: string, options?: {duration: number = 3 } )
message.error("Query runs with error", { duration: 10 })

localStorage

Use localStorage methods to store and manage key-value pair data locally, which is not reset when the app refreshes, and can be accessed in any app within the workspace using localStorage.values.

Method
Description

setItem(key: string, value: any)

Store a key-value pair.

removeItem(key: string)

Delete a key-value pair.

clear()

Clear all data in localStorage.

localStorage.values

You can access any key-value pair in local storage using localStorage.values. in JavaScript queries.

Inspect the data in localStorage in Globals in the data browser.

localStorage.setItem()

Store a key-value pair.

// Syntax
localStorage.setItem(key: string, value: any)

// Example
localStorage.setItem("order", select1.value)

localStorage.removeItem()

Delete a key-value pair.

// Syntax
localStorage.removeItem(key: string)

// Example
localStorage.removeItem("order")

localStorage.clear()

Clear all data in localStorage.

Responsiveness / Screen information

To enable responsive Layouts, you need to know which device type your app is currently viewed. This helper gives you information about the screen sizes. The values automatically update on Screen size changes.

screenInfo.deviceType

You can use deviceType to get the Type of the Device based on the current screen width of the Lowoder app (or the website where it is embedded). This value automatically updates on Screen size changes.

screenInfo.deviceType
=> returns String: Desktop | Tablet | Mobile

screenInfo.height

screenInfo.height
=> returns Number: height of the screen (browser window)

screenInfo.width

screenInfo.width
=> returns Number: width of the screen (browser window)

screenInfo.isDesktop

screenInfo.isDesktop
=> returns Boolean: if the current width is considered as Desktop size

screenInfo.isTablet

screenInfo.isTablet
=> returns Boolean: if the current width is considered as Tablet size

screenInfo.isMobile

screenInfo.isMobile
=> returns Boolean: if the current width is considered as Mobile size
PreviousData responderNextShare an App

Last updated 4 months ago

Was this helpful?

Optional. A String value that specifies the type of the file to download. All are supported.

💫
MIME types