createMenu

Category: Tray Menu

Namespace: web.trayMenu.createMenu

Description

Create a custom tray menu for the system tray icon. When called, the tray icon becomes visible and minimize-to-tray behavior is automatically enabled. If the project has the Enable Tray Icon option checked in Builder, calling createMenu will replace the default tray menu with your custom one.

Syntax

const result = await web.trayMenu.createMenu({
    items: [
        { id: 1, caption: 'Open', image: 'icons/open.png' },
        { id: 2, caption: 'Settings', enabled: true },
        { separator: true },
        { id: 3, caption: 'Exit' }
    ]
});

Parameters

• items (required, Array) - Array of menu item objects

Object Structure:

{
    id: number,           // Unique identifier (required for non-separator items)
    caption: string,      // Menu item text (required for non-separator items)
    enabled: boolean,     // Optional, defaults to true
    image: string,        // Optional, path to icon/image file
    separator: boolean,   // Optional, when true creates a visual divider
    items: array          // Optional, array of nested menu items (same structure)
}

Returns

Promise - Resolves to true on success

Example

// Complete example
const result = await web.trayMenu.createMenu({
    items: [
        { id: 1, caption: 'Open', image: 'icons/open.png' },
        { id: 2, caption: 'Settings', enabled: true },
        { separator: true },
        { id: 3, caption: 'Exit' }
    ]
});

Simple Menu with Basic Items

const result = await web.trayMenu.createMenu({
    items: [
        { id: 1, caption: "Open", enabled: true },
        { id: 2, caption: "Settings", enabled: true },
        { separator: true },
        { id: 3, caption: "Exit", enabled: true }
    ]
});
console.log(result); // "Tray menu created successfully"  

Menu with Disabled Items

await web.trayMenu.createMenu({
    items: [
        { id: 1, caption: "Restore Window", enabled: true },
        { id: 2, caption: "Minimize", enabled: false },
        { id: 3, caption: "Close", enabled: true }
    ]
});

Nested Menu with Submenus

await web.trayMenu.createMenu({
    items: [
        {
            id: 1,
            caption: "File",
            enabled: true,
            items: [
                { id: 11, caption: "New", enabled: true },
                { id: 12, caption: "Open", enabled: true },
                { separator: true },
                { id: 13, caption: "Exit", enabled: true }
            ]
        },
        {
            id: 2,
            caption: "Help",
            enabled: true,
            items: [
                { id: 21, caption: "About", enabled: true },
                { id: 22, caption: "Documentation", enabled: false }
            ]
        }
    ]
});

##Handling Menu Clicks
After creating the menu, listen for item clicks:

window.web.events.onTrayMenuItemClick = function(itemId) {
    console.log('Tray menu item clicked:', itemId);
    
    switch(itemId) {
        case 1:
            // Handle Restore Window
            break;
        case 2:
            // Handle Minimize
            break;
        case 3:
            // Handle Close
            break;
    }
};  

Use Cases

• Implement createMenu functionality
• Handle createMenu operations