Skip to main content

DHTMLX Salesforce LWC integration: Kanban, Gantt, Scheduler

This demo links to a Salesforce Lightning Web Components (LWC) integration example showing Kanban, Gantt, and Scheduler widgets running inside a Salesforce environment. The embedded page provides links and credentials to access the live Salesforce org.

Live example​

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Salesforce LWC Demo: Kanban, Gantt, Scheduler</title>

<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');
        
        :root {
            --primary-color: #007bff;
            --background-color: #f4f5f7;
            --card-background: #ffffff;
            --text-color: #333;
            --subtle-text-color: #666;
            --border-color: #e0e0e0;
        }

        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            background-color: var(--background-color);
            color: var(--text-color);
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
            text-align: center;
        }

        .container {
            background: var(--card-background);
            padding: 40px;
            border-radius: 12px;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
            width: 90%;
            max-width: 420px;
        }

        h1 {
            margin-top: 0;
            margin-bottom: 30px;
            font-size: 1.75em;
            font-weight: 600;
        }
        
        .link-group {
            margin-bottom: 25px;
        }

        .button {
            display: inline-flex; /* Use flexbox to align icon and text */
            align-items: center;
            justify-content: center;
            gap: 8px; /* Space between icon and text */
            width: 100%;
            box-sizing: border-box;
            background-color: var(--primary-color);
            color: white;
            padding: 14px 20px;
            border-radius: 8px;
            text-decoration: none;
            font-weight: 500;
            transition: background-color 0.2s ease, transform 0.2s ease;
        }
        
        .button:hover {
            background-color: #0056b3;
            transform: translateY(-2px);
        }
        
        .button.secondary {
            background-color: transparent;
            color: var(--primary-color);
            border: 1px solid var(--border-color);
        }

        .button.secondary:hover {
            background-color: #f8f9fa;
            border-color: #d0d0d0;
        }
        
        .button svg {
            width: 20px;
            height: 20px;
        }

        .credentials {
            margin-top: 12px;
            color: var(--subtle-text-color);
            font-size: 0.9em;
        }
        
        .credentials code {
            background-color: #eef1f4;
            padding: 2px 6px;
            border-radius: 4px;
            color: #444;
            font-size: 1.5em;
        }
</style>

DHTMLX widgets can be embedded in Salesforce LWC applications as static resources. This enables teams to add rich project management interfaces to their Salesforce instance without leaving the platform.

Key points​

  • LWC integration: DHTMLX widgets are loaded as static resources in Salesforce and initialized within Lightning Web Components
  • Multiple widgets in one view: Kanban, Gantt, and Scheduler share data within the Salesforce environment
  • Platform compatibility: The widgets work within Salesforce's security model and component lifecycle

Additional resources​