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
      • SAAS Mode
      • Enterprise 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
  • Built-in libraries
  • Import third-party libraries
  • Import / bind at the app level
  • Import/bind at the workspace level

Was this helpful?

  1. Lowcoder Extension

Use third-party libraries in Apps

Every developer learns one of the most important principles of software engineering early in their career: DRY (Don’t Repeat Yourself). Using third-party libraries can save you time as you do not need to develop the functionality that the library provides. Lowcoder provides some built-in third-party libraries for common uses, and you can manually import other libraries on demand.

Built-in libraries

Lowcoder provides some JavaScript built-in libraries for use.

Library
What for
Docs
Version

lodash

Powerful utility functions for Arrays, Collections, JS Functions, JS Objects, Strings, Numbers, Math, Sequences

4.17.21

uuid

9.0.0(Support v1/v3/v4/v5)

numbro

Powerful Number formatting helper

2.3.6

papaparse

Parser for CSV to JSON

5.3.2

Built-in Libraries can be used directly everywhere where you can use JavaScript.

// loadash
return _.chunk(['a', 'b', 'c', 'd'], 2);
// => [['a', 'b'], ['c', 'd']]

// uuid
return uuid.v4();
// => 3965f3d4-8dd8-4785-9756-0ee98d91238d

// numbro
return numbro(1000).format({thousandSeparated: true});
// => 1,000

// Papaparse
return Papa.parse("name|age\nJohn Doe|30\nJane Doe|25", {delimiter: "|"})
// => {"data":[["name","age"],["John Doe","30"],["Jane Doe","25"]],"errors":[],"meta":{"delimiter":"|","linebreak":"\n","aborted":false,"truncated":false,"cursor":32}}

Import third-party libraries

Lowcoder supports setting up preloaded JavaScript and libraries, which can either be imported for individual apps or the whole workspace.

As soon as imported/bound to an App or workspace, Lowcoder manages the pre-loading of these libraries automatically in the editor and app view.

  • App-level libraries get loaded only in the app where they were defined. This means a library imported to app A is not loaded for app B. The reverse is also true. A library imported for app B is not available to app A unless it is explicitly imported to app A as well.

  • Workspace-level libraries will be loaded when you open any application in your workspace. All apps can access (and will load automatically) those libraries.

importing third-party libraries can impact app performance, especially when you have complex JavaScript functions. Decide carefully to import on the App-level or on Workspace-level

Tips you should know before setting up libraries:

  • External libraries are loaded and run in the browser.

  • NodeJS-only libraries are not supported now.

  • URLs of external libraries need to support cross-domain.

  • The export of the library must be set directly on the window object, global variables like var xxx = xxx do not take effect.

  • The external libraries run in a restricted sandbox environment and the following global variables are not available:

    parent

    document

    location

    chrome

    setTimeout

    fetch

    setInterval

    clearInterval

    setImmediate

    XMLHttpRequest

    importScripts

    Navigator

    MutationObserver

Now let's take cowsay as an example and import it at the app level and the workspace level.

You can check popular CDNs if they host your desired library as a minified package.

Import / bind at the app level

Navigate to the settings page and then click the plus sign + under the JavaScript library tab. Paste the library link and click Add New. Lowcoder will now check, if the external library will be compatible and securely usable.

You can also click the download icon to quickly download any recommended JS library.

Now, you can create a JS query and insert code.


return window.cowsay.say({
    text : "Lowcoder is cool", e : "oO", T : "U "
})

Note that the cowsay library is imported in our example at app-level and you can not use it in any other app within your workspace.

You should see something similar to the image below after successfully importing the cowsay library. Note that you see what global variable you can use to access the library.

Imported external libraries are bound to the window object. cowsay.say(...) will not work window.cowsay.say(...) - does the job.

Import/bind at the workspace level

PreviousDevelop Data Source PluginsNextDay.js Date handling

Last updated 11 months ago

Was this helpful?

Create, parse and validate UUIDs of

Only libraries using the approach are supported.

GitHub page:

Unpkg link:

JSDeliver link:

Go to , select Settings > Advanced, and click Add under the JavaScript library tab. Paste the link of the third-party JS library and click Add New to add it to your workspace. You can also click the download icon to add any recommended JS library quickly. The installed libraries are accessible from any app within your workspace.

🔥
UMD (Universal Module Definition)
https://github.com/piuccio/cowsay
https://unpkg.com/cowsay@1.5.0/build/cowsay.umd.js
https://cdn.jsdelivr.net/npm/cowsay@1.6.0/build/cowsay.umd.min.js
https://jsdelivr.com
https://cdnjs.com
https://unpkg.com
Lowcoder's homepage
https://lodash.com/docs/
version 1 to 5
https://github.com/uuidjs/uuid
https://numbrojs.com/format.html
https://www.papaparse.com/docs
Bind an external JS Library to an individual App
You can start using the external Library
Bind an external JS Library to all Apps of a Workspace