QuickDEV
  • ▶️Quick start
    • 🔃Overview
    • 🔑Security
  • 🎭Users management
    • 👨‍👩‍👦‍👦Members and groups
    • 🔐Permission for resources
  • 🖥️Applications
    • ➕Create applications
      • ⤴️Create application/module
      • 🔲Module
      • ✅Version and Release Management
    • 🎨Application editor
      • 👁️‍🗨️Visual components
        • ⚙️Common component settings
        • ⬆️File upload
        • 📊Charts and graphs
        • 🌄Image
        • 📋Option lists
        • 📑List view
        • ⬜Drawer
        • 🗺️Google maps
        • 📩Messages / Toast
        • 📅Calendar
        • Custom component
      • #️⃣Use markdown
      • ⌨️Keyboard shortcuts
    • 🔗Navigation
    • ⏯️Actions editor
      • ⏱️Date handling
      • 🟰Data selection & JavaScript
      • ⚡Event handlers
      • 🔎JavaScript Query
      • ✖️Dynamic variable
      • 💱Transformers
      • 🧮Data responder
      • ↕️Built-in JS functions
      • 📚Third-party libraries
    • 🖌️Styling
      • 📝Themes
      • 🖍️Customize styles
  • 🚀Database & API
    • 🔎Queries
    • 🧰Query repository
    • 📡Datasources
      • 🌎API
        • 1️REST API
        • 2️GraphQL
        • 3️Google Sheets
      • 🟠SQL Databases
        • 1️Oracle
        • 2️Microsoft SQL Server
        • 3️MySQL
        • 4️PostgreSQL
        • 5️MariaDB
      • 🟡NoSQL Databases
        • 1️MongoDB
        • 2️CouchDB
        • 3️DynamoDB
      • 🔴REDIS
      • 🟢BigData & OLAP
        • 1️Big Query
        • 2️Snowflake
        • 3️ClickHouse
        • 4️Elasticsearch
      • 🌐WebSocket
  • 💻Integrations
    • 1️ANGULAR
    • 2️HTML Pages
Powered by GitBook
On this page
  • Built-in libraries
  • External libraries
  • Import at the application level
  • Import at the workspace level
  1. Applications
  2. Actions editor

Third-party libraries

Early in their careers, every developer learns one of the most critical principles of software engineering: DRY (Don’t Repeat Yourself). Leveraging third-party libraries is a time-saving practice, sparing developers the need to develop functionalities already provided by the library. QuickDEV offers several built-in third-party libraries for common tasks, and you can manually import additional libraries as needed.

Built-in libraries

QuickDEV provides some JavaScript built-in libraries for use.

Library
Docs
Description

uuid

Create, parse and validate UUIDs of version 1 to 5

lodash

Utility methods for Arrays, Collections, Functions, Objects, Strings, Numbers, Math, and Seq.

numbro

Powerful Number formatting helper

papaparse

Parser for CSV to JSON

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

// uuid
return uuid.v1(); 
=> de9e2f70-fe58-11ee-b767-c918daf038d2

// loadash
return _.chunk(['1_a', '1_b', '2_a', '2_b'], 2); 
=> [['1_a', '1_b'], ['2_a', '2_b']]


// numbro
return numbro(5600).format({thousandSeparated: true}); 
=> 5,600

// Papaparse
return Papa.parse("name|age\nMike|25\nBob|36", {delimiter: "|"})
// => {"data":[["name","age"],["Mike","25"],["Bob","36"]],"errors":[],"meta":{"delimiter":"|","linebreak":"\n","aborted":false,"truncated":false,"cursor":23}}

External libraries

It is possible to import external libraries at the workspace or app level.

Tips you should know before setting up libraries:

  • External libraries are loaded and run in the browser.

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

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

  • NodeJS-only libraries are not supported for the moment.

  • Due to the external libraries' restricted sandbox operation, the following global variables are not available:

location importScripts document chrome parent setInterval clearInterval setImmediate setTimeout fetch Navigator MutationObserver XMLHttpRequest

Import at the application level

Go to the settings page and select the JavaScript library tab. Then, click the addition icon (+). After pasting the library URL, select Add New. At this point, QuickDEV will determine whether the external library is compatible and safe to use.

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 : "QuickDEV is cool", e : "oO", T : "U "
})

You cannot use the cowsay library in any other app in your workspace because it is imported at the app level in our example.

External libraries imported into QuickDEV are attached to the window instance.

Import at the workspace level

  1. Navigate to QuickDEV homepage.

  2. Choose Settings > Advanced > Add.

  3. Copy the URL of the third-party JavaScript library you want to add.

  4. Select "Add New" and paste the copied URL.

  5. Once added, all apps within your workspace can access the installed libraries.

PreviousBuilt-in JS functionsNextStyling

Last updated 1 year ago

For this example i will use:

🖥️
⏯️
📚
https://unpkg.com/cowsay@1.5.0/build/cowsay.umd.js
Docs
Docs
Docs
Docs