如何在全局作用域启动CXJS Apploop以对接M-Files UX API？

Got it, let's break down how to make this work seamlessly. The key here is to hook CXJS's app initialization directly into the M-Files framework's global callback, so your app gets the injected API/data immediately without requiring user interaction.

Step 1: Restructure Your CXJS App Setup #

Instead of auto-launching your CXJS app when the DOM loads (the default approach), you'll wrap the app startup logic inside the global OnNewDashboard() function that M-Files will call.

Here's a concrete code example you can adapt:

// Import CXJS core utilities and your app components
import { createApp, h } from 'cxjs';
import MainApp from './components/MainApp'; // Your root CXJS component

// Declare the global callback required by M-Files UX API
window.OnNewDashboard = function(dashboardContext) {
  // Option 1: Pass the injected context directly to your root component
  createApp({
    render: () => h(MainApp, { dashboardContext })
  }).mount('#app'); // Ensure your index.html has a <div id="app"></div> container

  // Option 2: Store the context in CXJS's global store for wider access
  // import { store } from 'cxjs';
  // store.set('mfilesContext', dashboardContext);
  // createApp({ render: () => h(MainApp) }).mount('#app');
};

Step 2: Access the Injected Data/API in Your CXJS Components #

Once the app is launched with the context, you can use it directly in your components:

If you passed the context via props (Option 1):

// MainApp.jsx
export default function MainApp({ dashboardContext }) {
  // Use the M-Files API/data right away
  const currentUser = dashboardContext?.CurrentUser?.Name;

  return (
    <div class="dashboard-container">
      <h1>Welcome, {currentUser}!</h1>
      {/* Render your CXJS UI using the injected API */}
    </div>
  );
}

If you stored it in the CXJS store (Option 2):

// MainApp.jsx
import { useStore } from 'cxjs';

export default function MainApp() {
  const dashboardContext = useStore('mfilesContext');
  const currentUser = dashboardContext?.CurrentUser?.Name;

  return (
    <div class="dashboard-container">
      <h1>Welcome, {currentUser}!</h1>
    </div>
  );
}

Key Notes to Avoid Issues #

• Ensure the DOM container exists: Double-check that your index.html includes a <div id="app"></div> (or whatever selector you use in mount())—M-Files will load your HTML before calling OnNewDashboard(), so this element should be available.
• Keep OnNewDashboard global: The function must be attached to the window object so the M-Files framework can find it. Don't wrap it in a module scope without explicitly exposing it.
• Handle async if needed: If your CXJS app relies on async operations using the M-Files API, make sure to use CXJS's built-in async handling (like useAsync hook) to render loading states until data is ready.

This setup ensures your CXJS app launches automatically as soon as M-Files injects the required API and data, skipping any manual user interaction entirely.

内容的提问来源于stack exchange，提问作者timo18146