From 3fc41a52773395c87d626eafc315f6ff659ee695 Mon Sep 17 00:00:00 2001 From: Roly Gutierrez Date: Mon, 5 Oct 2026 17:56:41 -0400 Subject: [PATCH 1/2] fix(FOUR-33644): initialize screen cache config in Vite preview loader Screen preview was migrated to Vite via loaderScreenPreview.js, which calls setupMain() but did not initialize ProcessMaker.screen or initializeScreenCache(). DataProvider.getDataSource() reads ProcessMaker.screen.cacheEnabled/cacheTimeout and threw when screen was undefined. The error was swallowed in FormSelectList, so Data Connector Select Lists showed "No Data Available" even when the connector endpoint returned HTTP 200 (FOUR-33688, FOUR-33644). Initialize screen cache settings from meta tags and call initializeScreenCache() after setupMain(), matching bootstrap.js and screenBuilder.js behavior. Also remove accidental debug text from previewscreennextvite.blade.php. https://processmaker.atlassian.net/browse/FOUR-33688 https://processmaker.atlassian.net/browse/FOUR-33644 --- .../js/processes/screens/loaderScreenPreview.js | 16 ++++++++++++++++ .../layouts/previewscreennextvite.blade.php | 1 - 2 files changed, 16 insertions(+), 1 deletion(-) diff --git a/resources/js/processes/screens/loaderScreenPreview.js b/resources/js/processes/screens/loaderScreenPreview.js index ef6876bfeb..f388886cf7 100644 --- a/resources/js/processes/screens/loaderScreenPreview.js +++ b/resources/js/processes/screens/loaderScreenPreview.js @@ -2,7 +2,23 @@ import * as ScreenBuilder from "@processmaker/screen-builder"; import VueFormElements from "@processmaker/vue-form-elements"; import { setupMain } from "../../next/setupMain"; +const { initializeScreenCache } = ScreenBuilder; + setupMain(); + +// Screen preview uses Vite (loaderScreenPreview) instead of bootstrap.js. +// DataProvider.getDataSource() requires ProcessMaker.screen to be initialized. +// @link https://processmaker.atlassian.net/browse/FOUR-6833 Cache configuration +const screenCacheEnabled = document.head.querySelector('meta[name="screen-cache-enabled"]')?.content ?? "false"; +const screenCacheTimeout = document.head.querySelector('meta[name="screen-cache-timeout"]')?.content ?? "5000"; +const screenSecureHandlerToggleVisible = document.head.querySelector("meta[name='screen-secure-handler-toggle-visible']"); +window.ProcessMaker.screen = { + cacheEnabled: screenCacheEnabled === "true", + cacheTimeout: Number(screenCacheTimeout), + secureHandlerToggleVisible: !!Number(screenSecureHandlerToggleVisible?.content), +}; +initializeScreenCache(window.ProcessMaker.apiClient, window.ProcessMaker.screen); + window.ScreenBuilder = ScreenBuilder; window.VueFormElements = VueFormElements; window.Vue.use(ScreenBuilder.default); diff --git a/resources/views/layouts/previewscreennextvite.blade.php b/resources/views/layouts/previewscreennextvite.blade.php index 6483134404..eebd271ada 100644 --- a/resources/views/layouts/previewscreennextvite.blade.php +++ b/resources/views/layouts/previewscreennextvite.blade.php @@ -130,7 +130,6 @@ @endforeach -PORE @yield('js') From a697f22ca0b7b7dee476671acfbe48cfed8edeae Mon Sep 17 00:00:00 2001 From: Roly Gutierrez Date: Tue, 6 Oct 2026 15:03:34 -0400 Subject: [PATCH 2/2] fix(FOUR-33688): initialize ProcessMaker.screen cache in Vite loaders Extract initializeScreenCacheFromMeta to read screen cache settings from meta tags, set ProcessMaker.screen, and call initializeScreenCache(). Use the helper in Vite entry points that call Vue.use(ScreenBuilder) or mount forms before screenBuilder async init runs, where bootstrap.js is not loaded. This fixes Data Connector Select Lists showing "No Data Available" when ProcessMaker.screen was undefined (FOUR-33688, FOUR-33644). - Add resources/js/next/initializeScreenCacheFromMeta.js (idempotent) - Refactor resources/js/next/screenBuilder.js to use the helper - Update loaderScreenPreview, loaderScreen, loaderRequestsShow, loaderRequestsPreview, loaderTasks, and vite/tasks/loaderTasks https://processmaker.atlassian.net/browse/FOUR-33688 https://processmaker.atlassian.net/browse/FOUR-33644 --- .../js/next/initializeScreenCacheFromMeta.js | 31 +++++++++++++++++++ resources/js/next/screenBuilder.js | 21 ++----------- .../processes/screen-builder/loaderScreen.js | 2 ++ .../processes/screens/loaderScreenPreview.js | 17 ++-------- .../js/requests/loaderRequestsPreview.js | 2 ++ resources/js/requests/loaderRequestsShow.js | 2 ++ resources/js/tasks/loaderTasks.js | 2 ++ resources/js/vite/tasks/loaderTasks.js | 2 ++ 8 files changed, 46 insertions(+), 33 deletions(-) create mode 100644 resources/js/next/initializeScreenCacheFromMeta.js diff --git a/resources/js/next/initializeScreenCacheFromMeta.js b/resources/js/next/initializeScreenCacheFromMeta.js new file mode 100644 index 0000000000..69f6189449 --- /dev/null +++ b/resources/js/next/initializeScreenCacheFromMeta.js @@ -0,0 +1,31 @@ +import { initializeScreenCache } from "@processmaker/screen-builder"; +import { getGlobalPMVariable, setGlobalPMVariable } from "./globalVariables"; + +let cacheInitialized = false; + +function getScreenConfigFromMeta() { + const screenCacheEnabled = document.head.querySelector('meta[name="screen-cache-enabled"]')?.content ?? "false"; + const screenCacheTimeout = document.head.querySelector('meta[name="screen-cache-timeout"]')?.content ?? "5000"; + const screenSecureHandlerToggleVisible = document.head.querySelector("meta[name='screen-secure-handler-toggle-visible']"); + const screenMergeDraftOnRestore = document.head.querySelector("meta[name='screen-merge-draft-on-restore']")?.content ?? "true"; + + return { + cacheEnabled: screenCacheEnabled === "true", + cacheTimeout: Number(screenCacheTimeout), + secureHandlerToggleVisible: !!Number(screenSecureHandlerToggleVisible?.content), + mergeDraftOnRestore: screenMergeDraftOnRestore === "true", + }; +} + +export default function initializeScreenCacheFromMeta(apiClient = getGlobalPMVariable("apiClient")) { + if (cacheInitialized) { + return getGlobalPMVariable("screen"); + } + + const screen = getScreenConfigFromMeta(); + setGlobalPMVariable("screen", screen); + initializeScreenCache(apiClient, screen); + cacheInitialized = true; + + return screen; +} diff --git a/resources/js/next/screenBuilder.js b/resources/js/next/screenBuilder.js index d0d009849e..ee1b45951c 100644 --- a/resources/js/next/screenBuilder.js +++ b/resources/js/next/screenBuilder.js @@ -1,6 +1,7 @@ import { - getGlobalVariable, setGlobalVariable, getGlobalPMVariable, setGlobalPMVariable, + getGlobalVariable, setGlobalVariable, getGlobalPMVariable, } from "./globalVariables"; +import initializeScreenCacheFromMeta from "./initializeScreenCacheFromMeta"; const addScriptsToDOM = async function (scripts) { for (const script of scripts) { @@ -26,24 +27,8 @@ export default () => { import("@processmaker/screen-builder").then((ScreenBuilder) => { const apiClient = getGlobalPMVariable("apiClient"); - const { initializeScreenCache } = ScreenBuilder; - // Configuration Global object used by ScreenBuilder - // @link https://processmaker.atlassian.net/browse/FOUR-6833 Cache configuration - const screenCacheEnabled = document.head.querySelector("meta[name=\"screen-cache-enabled\"]")?.content ?? "false"; - const screenCacheTimeout = document.head.querySelector("meta[name=\"screen-cache-timeout\"]")?.content ?? "5000"; - const screenSecureHandlerToggleVisible = document.head.querySelector("meta[name='screen-secure-handler-toggle-visible']"); - const screenMergeDraftOnRestore = document.head.querySelector("meta[name='screen-merge-draft-on-restore']")?.content ?? "true"; - const screen = { - cacheEnabled: screenCacheEnabled === "true", - cacheTimeout: Number(screenCacheTimeout), - secureHandlerToggleVisible: !!Number(screenSecureHandlerToggleVisible?.content), - mergeDraftOnRestore: screenMergeDraftOnRestore === "true", - }; - setGlobalVariable("ScreenBuilder", ScreenBuilder); - setGlobalPMVariable("screen", screen); - // Initialize screen-builder cache - initializeScreenCache(apiClient, screen);// TODO: Its a bad practice to use the apiClient here + initializeScreenCacheFromMeta(apiClient); if (screenBuilderScripts) { addScriptsToDOM(screenBuilderScripts).then(() => { // The order of the scripts is important, the screenBuilderScripts must be loaded before the ScreenBuilder.default diff --git a/resources/js/processes/screen-builder/loaderScreen.js b/resources/js/processes/screen-builder/loaderScreen.js index d19bafca22..c6ec9b09d5 100644 --- a/resources/js/processes/screen-builder/loaderScreen.js +++ b/resources/js/processes/screen-builder/loaderScreen.js @@ -1,4 +1,5 @@ import * as ScreenBuilder from "@processmaker/screen-builder"; +import initializeScreenCacheFromMeta from "../../next/initializeScreenCacheFromMeta"; import { setupMain } from "../../next/setupMain"; import monaco from "../../next/monaco"; import vueFormElements from "../../next/libraries/vueFormElements"; @@ -10,6 +11,7 @@ import("@processmaker/screen-builder/dist/vue-form-builder.css"); window.ScreenBuilder = ScreenBuilder; setupMain(); +initializeScreenCacheFromMeta(); monaco(); window.Vue.use(ScreenBuilder.default); diff --git a/resources/js/processes/screens/loaderScreenPreview.js b/resources/js/processes/screens/loaderScreenPreview.js index f388886cf7..aecdafc591 100644 --- a/resources/js/processes/screens/loaderScreenPreview.js +++ b/resources/js/processes/screens/loaderScreenPreview.js @@ -1,23 +1,10 @@ import * as ScreenBuilder from "@processmaker/screen-builder"; import VueFormElements from "@processmaker/vue-form-elements"; +import initializeScreenCacheFromMeta from "../../next/initializeScreenCacheFromMeta"; import { setupMain } from "../../next/setupMain"; -const { initializeScreenCache } = ScreenBuilder; - setupMain(); - -// Screen preview uses Vite (loaderScreenPreview) instead of bootstrap.js. -// DataProvider.getDataSource() requires ProcessMaker.screen to be initialized. -// @link https://processmaker.atlassian.net/browse/FOUR-6833 Cache configuration -const screenCacheEnabled = document.head.querySelector('meta[name="screen-cache-enabled"]')?.content ?? "false"; -const screenCacheTimeout = document.head.querySelector('meta[name="screen-cache-timeout"]')?.content ?? "5000"; -const screenSecureHandlerToggleVisible = document.head.querySelector("meta[name='screen-secure-handler-toggle-visible']"); -window.ProcessMaker.screen = { - cacheEnabled: screenCacheEnabled === "true", - cacheTimeout: Number(screenCacheTimeout), - secureHandlerToggleVisible: !!Number(screenSecureHandlerToggleVisible?.content), -}; -initializeScreenCache(window.ProcessMaker.apiClient, window.ProcessMaker.screen); +initializeScreenCacheFromMeta(); window.ScreenBuilder = ScreenBuilder; window.VueFormElements = VueFormElements; diff --git a/resources/js/requests/loaderRequestsPreview.js b/resources/js/requests/loaderRequestsPreview.js index c9c5a013f8..0b6cb0f6ab 100644 --- a/resources/js/requests/loaderRequestsPreview.js +++ b/resources/js/requests/loaderRequestsPreview.js @@ -2,12 +2,14 @@ import Mustache from "mustache"; import "../next/libraries/vueFormElements"; import screenBuilder from "../next/screenBuilder"; import * as ScreenBuilder from "@processmaker/screen-builder"; +import initializeScreenCacheFromMeta from "../next/initializeScreenCacheFromMeta"; import { setupMain } from "../next/setupMain"; import "./preview"; import ScreenDetail from "./components/screenDetail.vue"; window.Mustache = Mustache; setupMain(); +initializeScreenCacheFromMeta(); screenBuilder(); Vue.use(ScreenBuilder.default); diff --git a/resources/js/requests/loaderRequestsShow.js b/resources/js/requests/loaderRequestsShow.js index 6160ebe806..ce4a2d577a 100644 --- a/resources/js/requests/loaderRequestsShow.js +++ b/resources/js/requests/loaderRequestsShow.js @@ -1,3 +1,4 @@ +import initializeScreenCacheFromMeta from "../next/initializeScreenCacheFromMeta"; import { setupMain } from "../next/setupMain"; import monaco from "../next/monaco"; import modeler from "../next/modeler"; @@ -9,6 +10,7 @@ import("@processmaker/screen-builder/dist/vue-form-builder.css"); import("@processmaker/vue-form-elements/dist/vue-form-elements.css"); setupMain(); +initializeScreenCacheFromMeta(); monaco(); modeler(); diff --git a/resources/js/tasks/loaderTasks.js b/resources/js/tasks/loaderTasks.js index 8f60a9e4b0..9b1a652275 100644 --- a/resources/js/tasks/loaderTasks.js +++ b/resources/js/tasks/loaderTasks.js @@ -1,10 +1,12 @@ import * as ScreenBuilder from "@processmaker/screen-builder"; import VueFormElement from "../next/libraries/vueFormElements"; +import initializeScreenCacheFromMeta from "../next/initializeScreenCacheFromMeta"; import { setupMain } from "../next/setupMain"; import screenBuilderNext from "../next/screenBuilder"; import "@processmaker/screen-builder/dist/vue-form-builder.css"; setupMain(); +initializeScreenCacheFromMeta(); screenBuilderNext(); window.ScreenBuilder = ScreenBuilder; window.Vue.use(ScreenBuilder.default); diff --git a/resources/js/vite/tasks/loaderTasks.js b/resources/js/vite/tasks/loaderTasks.js index 87bbb2d15c..2a8328b716 100644 --- a/resources/js/vite/tasks/loaderTasks.js +++ b/resources/js/vite/tasks/loaderTasks.js @@ -1,4 +1,5 @@ import "../../../js/vite/bootstrap-globals.js"; +import initializeScreenCacheFromMeta from "../../../js/next/initializeScreenCacheFromMeta"; import { setupMain } from "../../../js/next/setupMain"; import { withMomentDateFormats } from "../../next/config/user"; import vueFormElements from "../../../js/next/libraries/vueFormElements"; @@ -12,6 +13,7 @@ import "@processmaker/screen-builder/dist/vue-form-builder.css"; window.ScreenBuilder = ScreenBuilder; setupMain(); +initializeScreenCacheFromMeta(); screenBuilderNext(); window.Vue.use(ScreenBuilder.default); modeler();