@360works/fmpromise/dist/config/ui.js

A modern JS toolkit for FileMaker Web Viewers, including a dev server and type generation.

// src/config/ui.ts
import fmPromise from '../index';
const CONFIG_SESSION_KEY = 'FMPROMISE_CONFIG_SESSION';
const CONFIG_SAVED_SIGNAL_KEY = 'FMPROMISE_CONFIG_SAVED_SIGNAL';
/**
 * Renders the configuration prompt (a gear icon) and handles the interaction.
 * This function is only loaded in dev mode when configuration is invalid.
 */
export function showConfigPrompt(schema) {
    // Create and inject the gear icon button
    const button = document.createElement('button');
    button.textContent = '⚙️';
    button.title = 'Configure this module';
    Object.assign(button.style, {
        position: 'fixed',
        bottom: '10px',
        right: '10px',
        zIndex: '9999',
        borderRadius: '50%',
        width: '40px',
        height: '40px',
        border: '1px solid #ccc',
        backgroundColor: 'white',
        cursor: 'pointer',
        fontSize: '24px',
        lineHeight: '36px',
        padding: '0',
    });
    document.body.appendChild(button);
    // Handle the click event
    button.onclick = async () => {
        // 1. Write the schema and context to localStorage for the config window to read.
        const sessionPayload = {
            webViewerName: fmPromise.webViewerName,
            schema,
        };
        localStorage.setItem(CONFIG_SESSION_KEY, JSON.stringify(sessionPayload));
        // 2. Listen for the 'saved' signal from the config window.
        window.addEventListener('storage', (event) => {
            if (event.key === CONFIG_SAVED_SIGNAL_KEY) {
                localStorage.removeItem(CONFIG_SAVED_SIGNAL_KEY); // Clean up
                window.location.reload();
            }
        });
        // 3. Call the FileMaker script to open the card window.
        await fmPromise.performScript('fmPromise.showConfigurationUI', null, { ignoreResult: true });
    };
}