AbtOmniQueryPanel (V2)

A modern, secure, and backend-agnostic configuration panel for your applications.

Features

• Framework Agnostic: Built with Vanilla JS, works with any framework (React, Vue, Angular, etc.) or no framework.
• Backend Agnostic: Connects to any backend via simple onSave and onLoad callbacks.
• Secure: Built-in client-side AES-GCM encryption.
• Modern UI: Clean, "Glassmorphism" design with dark/light mode support.
• i18n Support: Built-in RTL/LTR support (English/Hebrew).

Installation

via CDN

<link rel="stylesheet" href="https://cdn.example.com/abt-omni-query-panel/main.css">
<script type="module" src="https://cdn.example.com/abt-omni-query-panel/AbtOmniQueryPanel.js"></script>

Local Setup

1. Clone the repository.

2. Module Implementation (Recommended)

You can also keep your JavaScript logic in a separate file.

index.html:

<div id="abt-omni-query-panel"></div>
<script type="module" src="./init-panel.js"></script>

init-panel.js:

import AbtOmniQueryPanel from './src/AbtOmniQueryPanel.js';

const panel = new AbtOmniQueryPanel({
    container: document.getElementById('abt-omni-query-panel'),
    // ... options
});

See example-module.html and example-module.js for a complete working example.

3. CDN Usage (Future)

Once published, you can import directly from a CDN:

import AbtOmniQueryPanel from 'https://cdn.jsdelivr.net/npm/abt-omni-query-panel/src/AbtOmniQueryPanel.js';

4. Include the files in your project.

Usage

import AbtOmniQueryPanel from './src/AbtOmniQueryPanel.js';

const panel = new AbtOmniQueryPanel({
    container: document.getElementById('my-panel-container'),
    theme: 'light', // 'light' or 'dark'
    language: 'en', // 'en' or 'he'
    encryptionKey: 'my-secret-key', // Optional: Enable encryption
    
    // Callback to load initial configuration
    onLoad: async () => {
        const response = await fetch('/api/config');
        return await response.json();
    },
    
    // Callback to save configuration
    onSave: async (config) => {
        await fetch('/api/config', {
            method: 'POST',
            body: JSON.stringify(config)
        });
    }
});

Running the Demo

1. Start the test server:

   node server/server.js

2. Open your browser to: http://localhost:5174

API Reference

new AbtOmniQueryPanel(options)

| Option | Type | Default | Description | | :--- | :--- | :--- | :--- | | container | HTMLElement | null | Required. The DOM element to render the panel into. | | theme | String | 'light' | 'light' or 'dark'. | | language | String | 'en' | 'en' (LTR) or 'he' (RTL). | | encryptionKey | String | null | If provided, data will be encrypted before onSave and decrypted after onLoad. | | onLoad | Function | null | Async function that returns the configuration object. | | onSave | Function | null | Async function that receives the configuration object (encrypted if key provided). |

Methods

• panel.setTheme('dark'): Switch theme.
• panel.setLanguage('he'): Switch language.
• panel.save(): Trigger the save process manually.

Security & Injection Prevention

To prevent SQL Injection, NEVER concatenate user input directly into your queries. The AbtOmniQueryPanel allows users to define parameters separately from the query logic.

Backend Implementation Example (PHP/PDO)

When you receive the configuration:

$config = json_decode($request_body, true);

// 1. Source Tab Example
if ($config['source'] === 'table') {
    $sql = "SELECT * FROM " . preg_replace('/[^a-zA-Z0-9_]/', '', $config['tableName']);
    
    if (!empty($config['where'])) {
        $sql .= " WHERE " . $config['where']; // 'where' string should use :placeholders
    }
    
    $stmt = $pdo->prepare($sql);
    
    // Bind parameters defined in 'whereParams'
    if (!empty($config['whereParams'])) {
        $params = json_decode($config['whereParams'], true);
        foreach ($params as $key => $value) {
            $stmt->bindValue(":$key", $value);
        }
    }
    
    $stmt->execute();
}

// 2. Custom Query Example
if ($config['source'] === 'query') {
    $stmt = $pdo->prepare($config['customQuery']); // Query should use :placeholders
    
    if (!empty($config['queryParams'])) {
        $params = json_decode($config['queryParams'], true);
        foreach ($params as $key => $value) {
            $stmt->bindValue(":$key", $value);
        }
    }
    
    $stmt->execute();
}

Backend Query Builder

For backend implementations, use the queryBuilder utility to convert parameterized queries into executable SQL:

import { buildQuery, validateParameters } from 'abt-omni-query-panel/utils/query-builder';

// Received from the panel
const config = {
    customQuery: "SELECT * FROM users WHERE id IN (:auto_p1, :auto_p2) AND name = :auto_p3",
    queryParams: { auto_p1: 10, auto_p2: 20, auto_p3: "John" }
};

// Validate parameters
const validation = validateParameters(config.customQuery, config.queryParams);
if (!validation.valid) {
    console.error("Missing parameters:", validation.missingParams);
    return;
}

// Build executable query
const executableQuery = buildQuery(config.customQuery, config.queryParams);
// Result: "SELECT * FROM users WHERE id IN (10, 20) AND name = 'John'"

Note: The buildQuery function is for debugging/logging purposes. For production, use your database library's native parameter binding (PDO, mysqli_prepare, etc.) for maximum security.

Advanced Parameter Usage

The panel automatically parameterizes SQL queries to prevent injection attacks. String literals and numeric values are converted to parameters on save.

1. IN Operator

Standard prepared statements do not support arrays directly. You must handle this in your backend logic.

Panel Configuration:

• Where/Query: id IN (:...ids) (or just a placeholder like :ids if your backend handles expansion)
• Parameters: {"ids": [1, 2, 3]}

Backend Implementation (PHP Example):

if (isset($params['ids']) && is_array($params['ids'])) {
    // Create placeholders like :ids_0, :ids_1, :ids_2
    $placeholders = [];
    foreach ($params['ids'] as $i => $val) {
        $placeholders[] = ":ids_$i";
        $flatParams["ids_$i"] = $val;
    }
    // Replace :ids in the SQL with the list of placeholders
    $sql = str_replace(':ids', implode(',', $placeholders), $sql);
}

2. BETWEEN Operator

Use two separate parameters.

Panel Configuration:

• Where/Query: created_at BETWEEN :startDate AND :endDate
• Parameters: {"startDate": "2023-01-01", "endDate": "2023-12-31"}

3. LIKE Operator

Include the wildcards % in the parameter value, not the query.

Panel Configuration:

• Where/Query: name LIKE :nameSearch
• Parameters: {"nameSearch": "%John%"}