ToolJet RunJS 數據源詳解在內部工具應用中執行自定義 JavaScript 代碼【免費下載鏈接】ToolJetOpen-source foundation of ToolJet AI - the enterprise app generation platform for internal tools, dashboards, business applications, workflows and AI agents. Build visually, from a prompt, or from Claude Code, Codex and Cursor over MCP 項目地址: https://gitcode.com/GitHub_Trending/to/ToolJetRun JavaScript CodeRunJS是 ToolJet 內置的一種數據源類型它允許你在查詢管理器中直接編寫并執行自定義 JavaScript用于完成計算、生成動態值、加工數據以及與查詢和組件進行交互。本文將以 ToolJet 3.0.0-LTS 文檔為骨架結合倉庫源碼完整講解 RunJS 查詢的創建方法、參數機制、跨查詢調用、典型示例與底層執行原理讀完你即可在應用構建器中熟練運用 RunJS 實現各類交互邏輯。RunJS 是什么RunJS 是 ToolJet 提供的靜態數據源之一。從服務端源碼看runjs與restapi、runpy、tooljetdb、workflows一同被定義在DefaultDataSourceKinds中見 server/src/modules/data-sources/constants/index.ts每個工作區會對應一行runjsdefault默認數據源記錄。也就是說你不需要配置任何連接信息打開查詢管理器即可直接使用。它的前端定義見 frontend/src/modules/common/components/DataSourceComponents/Runjs.schema.json揭示了其執行模型的關鍵信息source.kind為runjs數據源名稱顯示為Run JavaScript執行后默認暴露三個變量isLoading加載狀態、data返回結果、rawData原始數據后續在表達式中可通過queries.查詢名.data等方式讀取開啟customTesting自定義預覽測試disableTransformations為true即 RunJS 查詢本身不再走轉換管道你直接在代碼里處理數據即可。一個重要的執行模型事實是對于應用App中的 RunJS 查詢代碼是在瀏覽器端執行的只有當 RunJS 被用于工作流Workflow企業版功能時才會在服務端通過isolated-vm沙箱逐節點執行見 server/src/modules/data-queries/AGENTS.md 與 IUtilService.ts。因此在應用構建器中使用 RunJS 時代碼可以訪問瀏覽器環境如alert、Math等同時也應避免依賴僅存在于服務端的 API。創建 Run JavaScript 查詢在應用編輯器中創建一個 RunJS 查詢只需四步點擊編輯器底部查詢管理器的 Add按鈕在可用數據源列表中選擇Run JavaScript Code在代碼編輯器中編寫 JavaScript 代碼點擊Preview預覽輸出或點擊Run立即觸發查詢。前端編輯器組件位于 frontend/src/AppBuilder/QueryManager/QueryEditors/Runjs/Runjs.jsx可以看到它復用了CodeHinter代碼編輯器langjavascript、typemultiline、默認高度 400px初始占位代碼為//Type your JavaScript code here每次編輯都會通過optionsChanged實時同步代碼內容。查詢代碼以查詢的options.code字段保存查詢執行后代碼的返回值即為查詢結果可通過{{queries.查詢名.data}}在任意組件屬性或事件處理器中引用。參數機制動態控制代碼輸入參數Parameters允許你為同一個腳本提供不同的輸入值從而在不改動核心代碼的前提下復用查詢提升靈活性。每個參數包含兩個屬性Name參數名稱供代碼引用Default value默認值可以是常量字符串、數字或對象。添加參數的步驟在 RunJS 查詢編輯器中點擊Parameters 按鈕創建一個新參數為參數指定Name設置默認Value字符串、數字或對象均可。參數添加完成后在代碼中通過parameters.name語法引用。例如定義參數newAlert其值為對象并在代碼中調用alert(parameters.newAlert)查詢被觸發時alert彈窗將展示參數值這常用于快速驗證參數傳遞是否生效。跨查詢調用讓一個查詢以自定義參數調用另一個查詢參數最常見的進階用法是在 RunJS 中觸發其他查詢并傳入自定義值。完整示例分為兩步。第一步創建基礎查詢multiply新建 RunJS 查詢并命名為multiply添加參數num1默認值10添加參數num2默認值2編寫如下代碼return parameters.num1 * parameters.num2;要展示結果可在畫布上放置一個文本組件并將其文本設置為{{queries.multiply.data}}第二步創建調用方查詢callMultiply再新建一個名為callMultiply的 RunJS 查詢代碼如下queries.multiply.run({num1: 20, num2: 7})執行callMultiply時會以num1 20、num2 7觸發multiply查詢并得到結果 140。由此multiply查詢可以被任意其他查詢反復調用每次傳入不同的參數值實現真正的一次編寫、多處復用。RunJS 示例查詢集下面三個示例覆蓋了最常見的 RunJS 使用場景均可在查詢編輯器中直接復制運行。生成隨機數該示例演示如何在按鈕點擊時生成隨機數并實時顯示在文本組件中。在畫布上的容器組件中拖入一個按鈕和一個文本組件在查詢面板點擊 Add選擇Run JavaScript code數據源新建查詢默認名如runjs1在代碼編輯器中寫入并運行const a Math.floor(Math.random() * (10 - 1)) 1; return a;配置組件屬性為按鈕添加事件處理器事件選擇On Click動作選擇Run Query目標查詢選擇runjs1——這樣每次點擊按鈕都會執行這段隨機數代碼在文本組件的文本字段中填入Random number:{{queries.runjs1.data}}顯示效果為Random number: 隨機結果。生成唯一 ID以下代碼生成形如id加隨機十六進制字符序列的唯一 IDvar id id Math.random().toString(16).slice(2); return id;運行結果示例id2f4a1b。生成基于時間戳的唯一 ID下面的代碼生成timestamp randomHex格式的 ID其中timestamp是當前時間戳的 base-32 表示randomHex是隨機十六進制值return String(Date.now().toString(32) Math.random().toString(16)).replace(/\./g, );該 ID 比上一示例更長形如2g3h1d6a4h3適用于需要更高唯一性的場景。內置庫與外部庫導入RunJS 查詢內部可直接使用以下三個常用庫庫名說明典型用法示例Moment日期時間處理庫moment().format(YYYY-MM-DD)Lodash實用工具函數庫_.map(data, item item.name)AxiosHTTP 請求庫axios.get(url).then(res res.data)這三個庫在 frontend/src/AppBuilder/_helpers/libraryLoader.js 中被顯式導入作為執行環境的內置依賴注入到腳本作用域中。同時該文件實現了完整的外部庫加載機制loadLibraryFromURL僅允許 HTTPS 地址通過 fetch 獲取源碼后用 UMD/IIFE shim模擬module/exports/define在沙箱中執行避免污染全局作用域initializeLibraries會并行加載實例設置中啟用的第三方 JavaScript 庫并將導出對象注冊到庫注冊表中executePreloadedJS則把預加載代碼的返回值須為對象展開為 RunJS 可用的頂層變量且會通過RESERVED_PARAMS過濾保留參數。關于在實例設置中添加自定義外部 JavaScript 庫并配合 RunJS 使用的完整操作請參閱 導入外部 JavaScript 庫。進階技巧故意讓查詢失敗以調試錯誤處理在調試事件處理器或驗證錯誤分支時可以讓 RunJS 查詢主動拋錯例如throw new ReferenceError(This is a reference error.);隨后為該查詢添加失敗On Failure事件處理器如彈出告警再點擊Run即可觀察錯誤是否被正確捕獲與處理。完整演練見 故意讓 RunJS 查詢拋出錯誤。定時觸發 RunJS 查詢RunJS 還可以配合定時觸發機制按指定時間間隔自動執行例如輪詢外部接口并刷新界面數據具體配置方法見 按指定時間間隔觸發查詢。小結RunJS 是 ToolJet 中打通數據計算—查詢聯動—界面呈現的高頻數據源通過parameters語法實現參數化復用通過queries.name.run({...})實現查詢間相互調用通過{{queries.name.data}}將結果綁定到任意組件再結合內置的 Moment、Lodash、Axios 以及可導入的外部庫足以在純前端完成絕大多數業務邏輯編排。理解其瀏覽器端執行模型與isLoading/data/rawData暴露變量能幫助你寫出更健壯、更易維護的 RunJS 查詢。【免費下載鏈接】ToolJetOpen-source foundation of ToolJet AI - the enterprise app generation platform for internal tools, dashboards, business applications, workflows and AI agents. Build visually, from a prompt, or from Claude Code, Codex and Cursor over MCP 項目地址: https://gitcode.com/GitHub_Trending/to/ToolJet創作聲明：本文部分內容由AI輔助生成（AIGC），僅供參考 ToolJet RunJS 數據源詳解：在內部工具應用中執行自定義 JavaScript 代碼
ToolJet RunJS 數據源詳解在內部工具應用中執行自定義 JavaScript 代碼【免費下載鏈接】ToolJetOpen-source foundation of ToolJet AI - the enterprise app generation platform for internal tools, dashboards, business applications, workflows and AI agents. Build visually, from a prompt, or from Claude Code, Codex and Cursor over MCP 項目地址: https://gitcode.com/GitHub_Trending/to/ToolJetRun JavaScript CodeRunJS是 ToolJet 內置的一種數據源類型它允許你在查詢管理器中直接編寫并執行自定義 JavaScript用于完成計算、生成動態值、加工數據以及與查詢和組件進行交互。本文將以 ToolJet 3.0.0-LTS 文檔為骨架結合倉庫源碼完整講解 RunJS 查詢的創建方法、參數機制、跨查詢調用、典型示例與底層執行原理讀完你即可在應用構建器中熟練運用 RunJS 實現各類交互邏輯。RunJS 是什么RunJS 是 ToolJet 提供的靜態數據源之一。從服務端源碼看runjs與restapi、runpy、tooljetdb、workflows一同被定義在DefaultDataSourceKinds中見 server/src/modules/data-sources/constants/index.ts每個工作區會對應一行runjsdefault默認數據源記錄。也就是說你不需要配置任何連接信息打開查詢管理器即可直接使用。它的前端定義見 frontend/src/modules/common/components/DataSourceComponents/Runjs.schema.json揭示了其執行模型的關鍵信息source.kind為runjs數據源名稱顯示為Run JavaScript執行后默認暴露三個變量isLoading加載狀態、data返回結果、rawData原始數據后續在表達式中可通過queries.查詢名.data等方式讀取開啟customTesting自定義預覽測試disableTransformations為true即 RunJS 查詢本身不再走轉換管道你直接在代碼里處理數據即可。一個重要的執行模型事實是對于應用App中的 RunJS 查詢代碼是在瀏覽器端執行的只有當 RunJS 被用于工作流Workflow企業版功能時才會在服務端通過isolated-vm沙箱逐節點執行見 server/src/modules/data-queries/AGENTS.md 與 IUtilService.ts。因此在應用構建器中使用 RunJS 時代碼可以訪問瀏覽器環境如alert、Math等同時也應避免依賴僅存在于服務端的 API。創建 Run JavaScript 查詢在應用編輯器中創建一個 RunJS 查詢只需四步點擊編輯器底部查詢管理器的 Add按鈕在可用數據源列表中選擇Run JavaScript Code在代碼編輯器中編寫 JavaScript 代碼點擊Preview預覽輸出或點擊Run立即觸發查詢。前端編輯器組件位于 frontend/src/AppBuilder/QueryManager/QueryEditors/Runjs/Runjs.jsx可以看到它復用了CodeHinter代碼編輯器langjavascript、typemultiline、默認高度 400px初始占位代碼為//Type your JavaScript code here每次編輯都會通過optionsChanged實時同步代碼內容。查詢代碼以查詢的options.code字段保存查詢執行后代碼的返回值即為查詢結果可通過{{queries.查詢名.data}}在任意組件屬性或事件處理器中引用。參數機制動態控制代碼輸入參數Parameters允許你為同一個腳本提供不同的輸入值從而在不改動核心代碼的前提下復用查詢提升靈活性。每個參數包含兩個屬性Name參數名稱供代碼引用Default value默認值可以是常量字符串、數字或對象。添加參數的步驟在 RunJS 查詢編輯器中點擊Parameters 按鈕創建一個新參數為參數指定Name設置默認Value字符串、數字或對象均可。參數添加完成后在代碼中通過parameters.name語法引用。例如定義參數newAlert其值為對象并在代碼中調用alert(parameters.newAlert)查詢被觸發時alert彈窗將展示參數值這常用于快速驗證參數傳遞是否生效。跨查詢調用讓一個查詢以自定義參數調用另一個查詢參數最常見的進階用法是在 RunJS 中觸發其他查詢并傳入自定義值。完整示例分為兩步。第一步創建基礎查詢multiply新建 RunJS 查詢并命名為multiply添加參數num1默認值10添加參數num2默認值2編寫如下代碼return parameters.num1 * parameters.num2;要展示結果可在畫布上放置一個文本組件并將其文本設置為{{queries.multiply.data}}第二步創建調用方查詢callMultiply再新建一個名為callMultiply的 RunJS 查詢代碼如下queries.multiply.run({num1: 20, num2: 7})執行callMultiply時會以num1 20、num2 7觸發multiply查詢并得到結果 140。由此multiply查詢可以被任意其他查詢反復調用每次傳入不同的參數值實現真正的一次編寫、多處復用。RunJS 示例查詢集下面三個示例覆蓋了最常見的 RunJS 使用場景均可在查詢編輯器中直接復制運行。生成隨機數該示例演示如何在按鈕點擊時生成隨機數并實時顯示在文本組件中。在畫布上的容器組件中拖入一個按鈕和一個文本組件在查詢面板點擊 Add選擇Run JavaScript code數據源新建查詢默認名如runjs1在代碼編輯器中寫入并運行const a Math.floor(Math.random() * (10 - 1)) 1; return a;配置組件屬性為按鈕添加事件處理器事件選擇On Click動作選擇Run Query目標查詢選擇runjs1——這樣每次點擊按鈕都會執行這段隨機數代碼在文本組件的文本字段中填入Random number:{{queries.runjs1.data}}顯示效果為Random number: 隨機結果。生成唯一 ID以下代碼生成形如id加隨機十六進制字符序列的唯一 IDvar id id Math.random().toString(16).slice(2); return id;運行結果示例id2f4a1b。生成基于時間戳的唯一 ID下面的代碼生成timestamp randomHex格式的 ID其中timestamp是當前時間戳的 base-32 表示randomHex是隨機十六進制值return String(Date.now().toString(32) Math.random().toString(16)).replace(/\./g, );該 ID 比上一示例更長形如2g3h1d6a4h3適用于需要更高唯一性的場景。內置庫與外部庫導入RunJS 查詢內部可直接使用以下三個常用庫庫名說明典型用法示例Moment日期時間處理庫moment().format(YYYY-MM-DD)Lodash實用工具函數庫_.map(data, item item.name)AxiosHTTP 請求庫axios.get(url).then(res res.data)這三個庫在 frontend/src/AppBuilder/_helpers/libraryLoader.js 中被顯式導入作為執行環境的內置依賴注入到腳本作用域中。同時該文件實現了完整的外部庫加載機制loadLibraryFromURL僅允許 HTTPS 地址通過 fetch 獲取源碼后用 UMD/IIFE shim模擬module/exports/define在沙箱中執行避免污染全局作用域initializeLibraries會并行加載實例設置中啟用的第三方 JavaScript 庫并將導出對象注冊到庫注冊表中executePreloadedJS則把預加載代碼的返回值須為對象展開為 RunJS 可用的頂層變量且會通過RESERVED_PARAMS過濾保留參數。關于在實例設置中添加自定義外部 JavaScript 庫并配合 RunJS 使用的完整操作請參閱 導入外部 JavaScript 庫。進階技巧故意讓查詢失敗以調試錯誤處理在調試事件處理器或驗證錯誤分支時可以讓 RunJS 查詢主動拋錯例如throw new ReferenceError(This is a reference error.);隨后為該查詢添加失敗On Failure事件處理器如彈出告警再點擊Run即可觀察錯誤是否被正確捕獲與處理。完整演練見 故意讓 RunJS 查詢拋出錯誤。定時觸發 RunJS 查詢RunJS 還可以配合定時觸發機制按指定時間間隔自動執行例如輪詢外部接口并刷新界面數據具體配置方法見 按指定時間間隔觸發查詢。小結RunJS 是 ToolJet 中打通數據計算—查詢聯動—界面呈現的高頻數據源通過parameters語法實現參數化復用通過queries.name.run({...})實現查詢間相互調用通過{{queries.name.data}}將結果綁定到任意組件再結合內置的 Moment、Lodash、Axios 以及可導入的外部庫足以在純前端完成絕大多數業務邏輯編排。理解其瀏覽器端執行模型與isLoading/data/rawData暴露變量能幫助你寫出更健壯、更易維護的 RunJS 查詢。【免費下載鏈接】ToolJetOpen-source foundation of ToolJet AI - the enterprise app generation platform for internal tools, dashboards, business applications, workflows and AI agents. Build visually, from a prompt, or from Claude Code, Codex and Cursor over MCP 項目地址: https://gitcode.com/GitHub_Trending/to/ToolJet創作聲明：本文部分內容由AI輔助生成（AIGC），僅供參考