### Vue 3 Button Component Examples

Source: https://context7.com/bitrix-tools/agent-context-kit/llms.txt

Demonstrates various configurations of the Vue 3 Button component. It utilizes props for size, icons, loading states, counters, link behavior, and styling adjustments. The component depends on the 'ui.vue3.components.button' library.

```vue
<template>
    <div class="button-examples">
        <!-- Basic button -->
        <Button
            text="Save"
            :size="ButtonSize.MEDIUM"
            @click="handleSave"
        />

        <!-- Button with left icon -->
        <Button
            text="Add Item"
            :leftIcon="ButtonIcon.ADD"
            :size="ButtonSize.LARGE"
            @click="handleAdd"
        />

        <!-- Loading button -->
        <Button
            text="Processing..."
            :loading="isLoading"
            :disabled="isLoading"
        />

        <!-- Button with counter -->
        <Button
            text="Notifications"
            :leftCounterValue="notificationCount"
            :leftCounterColor="ButtonCounterColor.SUCCESS"
        />

        <!-- Wide button with shimmer effect -->
        <Button
            text="Loading Data"
            :wide="true"
            :shimmer="true"
        />

        <!-- Collapsed button (icon only) -->
        <Button
            :collapsed="true"
            :collapsedIcon="ButtonIcon.SETTINGS"
            @click="openSettings"
        />

        <!-- Button as link -->
        <Button
            text="Go to Dashboard"
            link="/dashboard"
            :tag="ButtonTag.LINK"
        />

        <!-- Button with dropdown indicator -->
        <Button
            text="Actions"
            :dropdown="true"
            @click="toggleMenu"
        />

        <!-- Button group without corner radius -->
        <Button
            text="First"
            :removeRightCorners="true"
        />
        <Button
            text="Second"
            :removeLeftCorners="true"
            :removeRightCorners="true"
        />
        <Button
            text="Third"
            :removeLeftCorners="true"
        />
    </div>
</template>

<script>
import {
    Button,
    ButtonSize,
    ButtonIcon,
    ButtonCounterColor,
    ButtonTag
} from 'ui.vue3.components.button';

export default {
    components: { Button },
    data() {
        return {
            ButtonSize,
            ButtonIcon,
            ButtonCounterColor,
            ButtonTag,
            isLoading: false,
            notificationCount: 5,
        };
    },
    methods: {
        handleSave() {
            this.isLoading = true;
            setTimeout(() => this.isLoading = false, 2000);
        },
        handleAdd() {
            console.log('Item added');
        },
        openSettings() {
            console.log('Settings opened');
        },
        toggleMenu() {
            console.log('Menu toggled');
        },
    },
};
</script>

```

--------------------------------

### API Service Layer for Campaign Data in JavaScript

Source: https://context7.com/bitrix-tools/agent-context-kit/llms.txt

Implements an API service layer for fetching, transforming, and integrating campaign data with Vuex. It utilizes an API client for backend communication and Core for store access. This service provides methods to get a campaign by ID, retrieve a list of campaigns, and create new campaigns, ensuring data is stored and updated in the Vuex store.

```javascript
// provider/service/campaign/src/campaign.js
import { apiClient } from 'mymodule.lib.api-client';
import { Core } from 'mymodule.core';
import { Models } from 'mymodule.const';

export const campaignService = new class {
    get $store() {
        return Core.getStore();
    }

    async getById(id) {
        try {
            const data = await apiClient.post('Campaign.get', { id });
            await this.$store.dispatch(`${Models.Campaigns}/upsert`, data);
            return data;
        } catch (error) {
            console.error('Campaign load error:', error);
            return null;
        }
    }

    async getList(filter = {}) {
        try {
            const response = await apiClient.post('Campaign.getList', filter);
            await this.$store.dispatch(`${Models.Campaigns}/setList`, response.items);
            return response;
        } catch (error) {
            console.error('Campaign list error:', error);
            return { items: [], total: 0 };
        }
    }

    async create(campaignData) {
        try {
            const newCampaign = await apiClient.post('Campaign.add', campaignData);
            await this.$store.dispatch(`${Models.Campaigns}/add`, newCampaign);
            return newCampaign;
        } catch (error) {
            console.error('Campaign creation error:', error);
            throw error;
        }
    }
}();
```

--------------------------------

### JavaScript Entity Selector in Dropdown Mode

Source: https://context7.com/bitrix-tools/agent-context-kit/llms.txt

Shows how to use the Entity Selector in a compact dropdown mode, suitable for limited screen space. This example configures the dialog to appear attached to a specific node and updates the node's content with the selected user's avatar and name upon selection. Dependencies include 'ui.entity-selector'.

```javascript
import { Dialog, TagSelector } from 'ui.entity-selector';

// Dropdown mode for compact spaces
const dropdownNode = document.getElementById('assigned-user-dropdown');
dropdownNode.addEventListener('click', () => {
    const dialog = new Dialog({
        targetNode: dropdownNode,
        dropdownMode: true,
        multiple: false,
        entities: [{ id: 'user' }],
        events: {
            'Item:onSelect': (event) => {
                const { item } = event.getData();
                dropdownNode.innerHTML = `
                    <img src="${item.getAvatar()}" width="24" height="24" />
                    <span>${item.getTitle()}</span>
                `;
            }
        }
    });

    dialog.show();
});
```

--------------------------------

### Create and Display Contextual Menus with JavaScript

Source: https://context7.com/bitrix-tools/agent-context-kit/llms.txt

Demonstrates how to create basic and advanced contextual menus using the `ui.system.menu` library. It covers menu item configuration, sections, submenus, rich headers, and dynamic updates. This requires the `ui.system.menu` module to be imported.

```javascript
import { Menu, MenuItemDesign, MenuSectionDesign, MenuRichHeaderDesign } from 'ui.system.menu';

// Basic menu
const basicMenu = new Menu({
    bindElement: document.getElementById('menu-button'),
    items: [
        {
            id: 'profile',
            title: 'Profile',
            icon: 'ui-icon-set --person',
            onClick: () => console.log('Profile clicked'),
        },
        {
            id: 'settings',
            title: 'Settings',
            subtitle: 'Configure your account',
            icon: 'ui-icon-set --settings',
            onClick: () => console.log('Settings clicked'),
        },
        null, // Separator
        {
            id: 'logout',
            title: 'Logout',
            design: MenuItemDesign.Alert,
            onClick: () => console.log('Logout clicked'),
        },
    ],
});

basicMenu.show();

// Advanced menu with sections and submenus
const advancedMenu = new Menu({
    bindElement: document.getElementById('advanced-menu-button'),
    richHeader: {
        title: 'John Doe',
        subtitle: 'john.doe@example.com',
        icon: 'ui-icon-set --person-circle',
        design: MenuRichHeaderDesign.Default,
        onClick: () => console.log('Header clicked'),
    },
    sections: [
        {
            code: 'main',
            title: 'Main Actions',
            design: MenuSectionDesign.Default
        },
        {
            code: 'extra',
            title: 'Additional Options',
            design: MenuSectionDesign.Accent
        },
    ],
    items: [
        {
            sectionCode: 'main',
            id: 'edit',
            title: 'Edit',
            icon: 'ui-icon-set --pencil-40',
            isSelected: true,
            onClick: () => console.log('Edit'),
        },
        {
            sectionCode: 'main',
            id: 'copy',
            title: 'Copy',
            icon: 'ui-icon-set --copy-2',
            counter: {
                value: 5,
                color: 'success'
            },
            subMenu: {
                closeOnItemClick: true,
                items: [
                    { id: 'copy-link', title: 'Copy Link', onClick: () => console.log('Link copied') },
                    { id: 'copy-text', title: 'Copy Text', onClick: () => console.log('Text copied') },
                    { id: 'copy-id', title: 'Copy ID', onClick: () => console.log('ID copied') },
                ],
            },
        },
        {
            sectionCode: 'extra',
            id: 'export',
            title: 'Export',
            subtitle: 'Save to file',
            badgeText: {
                title: 'NEW',
                color: '#4CAF50'
            },
            onClick: () => console.log('Export'),
        },
        {
            sectionCode: 'extra',
            id: 'premium',
            title: 'Premium Feature',
            isLocked: true,
            design: MenuItemDesign.Copilot,
            onClick: () => console.log('Upgrade required'),
        },
    ],
    closeOnItemClick: true,
});

advancedMenu.show();

// Update menu items dynamically
setTimeout(() => {
    advancedMenu.updateItems([
        { id: 'new-item', title: 'New Dynamic Item', onClick: () => console.log('Dynamic') }
    ]);
}, 3000);
```

--------------------------------

### Bitrix CLI Build System Commands

Source: https://context7.com/bitrix-tools/agent-context-kit/llms.txt

Automate the building of Bitrix JS/CSS extensions with watch mode, testing, and modular compilation. Supports building specific modules, extensions, or paths, and running tests. Also includes functionality to create new extensions.

```bash
# Full project build with watch mode
bitrix build --watch

# Build specific modules with test execution
bitrix build --modules main,ui,landing --test

# Build specific extensions from anywhere in the repo
bitrix build --extensions main.core,ui.buttons,landing.main

# Watch mode with custom file extensions
bitrix build -w=defaults,json,mjs,svg

# Build specific path
bitrix build -p=./main/install/js/main/loader

# Run tests with full Mocha output
bitrix test --watch --modules ui

# Create new extension in module directory
cd local/js/mymodule
bitrix create myextension

# Load extension in PHP
\Bitrix\Main\UI\Extension::load("mymodule.myextension");
```

--------------------------------

### Vue 3 SPA Initialization and Integration

Source: https://context7.com/bitrix-tools/agent-context-kit/llms.txt

Demonstrates initializing a Vue 3 application using BitrixVue, integrating with Vuex, and following Bitrix architectural patterns for SPAs. Includes the application entry point, root component structure, and PHP integration for rendering and data passing.

```javascript
// Application entry point: local/js/mymodule/application/dashboard/src/index.js
import { BitrixVue } from 'ui.vue3';
import { App } from './app';
import { Store } from './store';

export class Dashboard {
    static create(container, options = {}) {
        const app = BitrixVue.createApp(App, {
            id: options.id,
            mode: options.mode,
            initialData: options.initialData
        });

        app.use(Store);
        app.mount(container);

        return app;
    }
}

// Root component: application/dashboard/src/app.js
import { ViewMode } from './enum/view-mode';
import { ListView } from './view/list-view';
import { DetailView } from './view/detail-view';

export const App = {
    components: { ListView, DetailView },
    props: {
        id: { type: Number, default: 0 },
        mode: { type: String, default: ViewMode.LIST },
    },
    setup() {
        return { ViewMode };
    },
    computed: {
        isListMode() {
            return this.mode === ViewMode.LIST;
        },
    },
    template: `
        <div class="dashboard-app">
            <ListView v-if="isListMode" :id="id" />
            <DetailView v-else :id="id" />
        </div>
    `,
};

// PHP integration: template.php
<?php
use Bitrix\Main\UI\Extension;
use Bitrix\Main\Web\Json;

Extension::load('mymodule.application.dashboard');
$containerId = 'dashboard-' . $arResult['ID'];
?>
<div id="<?= $containerId ?>"></div>
<script>
BX.ready(function() {
    BX.MyModule.Application.Dashboard.create(
        document.getElementById('<?= $containerId ?>'),
        <?= Json::encode([
            'id' => $arResult['ID'],
            'initialData' => $arResult['DATA'],
            'mode' => 'list'
        ]) ?>
    );
});
</script>
```

--------------------------------

### Programmatic JavaScript API for Bitrix UI Hint

Source: https://context7.com/bitrix-tools/agent-context-kit/llms.txt

This snippet shows how to manage Bitrix UI hints using JavaScript. It covers initializing hints on dynamic content, creating hint nodes programmatically, showing and hiding hints, and creating custom hint managers with custom attributes.

```javascript
// Initialize hints on dynamic content
const container = document.getElementById('dynamic-content');
container.innerHTML = '<span data-hint="Dynamic hint">New Content</span>';
BX.UI.Hint.init(container);

// Create hint node programmatically
const hintNode = BX.UI.Hint.createNode('This is a programmatic hint');
document.getElementById('hint-container').appendChild(hintNode);

// Show hint programmatically
const anchorElement = document.getElementById('my-element');
BX.UI.Hint.show(anchorElement, 'Custom <b>HTML</b> hint', true);

// Hide current hint
BX.UI.Hint.hide();

// Create custom hint manager
const customHintManager = BX.UI.Hint.createInstance({
    attributeName: 'data-help',
    className: 'custom-help-hint'
});

// Use custom attribute
document.body.innerHTML += '<span data-help="Custom help text"></span>';
customHintManager.init();
```

--------------------------------

### Send System Notifications with Buttons and Reply Fields (JavaScript)

Source: https://context7.com/bitrix-tools/agent-context-kit/llms.txt

This JavaScript code demonstrates how to send system notifications using the `ui.notification-manager` library. It covers creating simple notifications, notifications with custom buttons, and interactive notifications with a reply field. It also shows how to subscribe to notification events like button clicks, replies, and closures. Dependencies include the `ui.notification-manager` module.

```javascript
import { Notifier } from 'ui.notification-manager';

// Simple notification
Notifier.notify({
    id: 'simple-notification',
    title: 'Hello!',
    text: 'This is a simple notification.',
    icon: '/path/to/icon.png'
});

// Notification with action buttons
const notificationId = 'meeting-reminder';

Notifier.notify({
    id: notificationId,
    category: 'calendar',
    title: 'Meeting Reminder',
    text: 'Your meeting starts in 15 minutes.',
    icon: '/images/calendar-icon.png',
    button1Text: 'Open Calendar',
    button2Text: 'Snooze'
});

// Subscribe to button clicks
Notifier.subscribe('click', (event) => {
    const { id, buttonId } = event.getData();
    if (id === notificationId) {
        if (buttonId === 1) {
            console.log('Opening calendar');
            window.open('/calendar/');
        } else if (buttonId === 2) {
            console.log('Snoozed for 5 minutes');
            setTimeout(() => {
                Notifier.notify({
                    id: 'meeting-reminder-snooze',
                    title: 'Meeting Reminder',
                    text: 'Your meeting starts now!',
                });
            }, 300000);
        }
    }
});

// Interactive notification with reply field
const messageNotificationId = 'new-message-456';

Notifier.notify({
    id: messageNotificationId,
    category: 'im',
    title: 'New Message from Anna',
    text: 'Hey, are you available for a call?',
    icon: '/images/user-avatar.png',
    inputPlaceholderText: 'Type your reply...'
});

// Handle reply
Notifier.subscribe('reply', (event) => {
    const { id, reply } = event.getData();
    if (id === messageNotificationId) {
        console.log(`User replied: "${reply}"`);
        // Send reply to backend
        fetch('/api/messages/send', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ messageId: 456, text: reply })
        });
    }
});

// Close notification
Notifier.subscribe('close', (event) => {
    const { id } = event.getData();
    console.log(`Notification ${id} was closed`);
});

```

--------------------------------

### Declarative HTML Tooltips with Bitrix UI Hint

Source: https://context7.com/bitrix-tools/agent-context-kit/llms.txt

This snippet demonstrates how to add tooltips to HTML elements using data attributes. It covers simple text, HTML content, interactive hints, hints without icons, and centered hints. No JavaScript initialization is required for these attributes.

```html
<!-- Simple text hint -->
<span data-hint="This is a simple tooltip."></span>

<!-- HTML content hint -->
<span
    data-hint="This has <b>bold text</b> and <a href='#'>a link</a>."
    data-hint-html
></span>

<!-- Interactive hint with clickable content -->
<span
    data-hint="Click <a href='/help' target='_blank'>here</a> for more info."
    data-hint-html
    data-hint-interactivity
>
</span>

<!-- Hint without icon on existing content -->
<button data-hint="Click to submit the form." data-hint-no-icon>
    Submit
</button>

<!-- Centered hint -->
<div data-hint="This hint is centered." data-hint-center>
    Hover over me
</div>
```

--------------------------------

### Create and Manage Bitrix Popups (JavaScript)

Source: https://context7.com/bitrix-tools/agent-context-kit/llms.txt

Demonstrates how to create, configure, and manage modal popups using the Bitrix Popup and PopupManager classes. This includes setting basic properties like content and dimensions, as well as advanced features such as binding to elements, custom title bars, draggable and resizable options, animations, overlays, buttons, and event handling. It also shows dynamic content updates and using the PopupManager to create and retrieve popups.

```javascript
import { Popup, PopupManager, CloseIconSize } from 'main.popup';

// Basic popup with content
const popup = new Popup({
    id: 'my-popup',
    content: 'This is popup content',
    width: 500,
    height: 300,
    closeByEsc: true,
    autoHide: true,
    closeIcon: { size: CloseIconSize.MEDIUM },
});
popup.show();

// Advanced popup with all features
const advancedPopup = new Popup({
    id: 'advanced-popup',
    bindElement: document.querySelector('#trigger-button'),
    content: document.createElement('div'),
    titleBar: 'User Settings',
    width: 600,
    minWidth: 400,
    maxWidth: 800,
    padding: 20,
    contentPadding: 10,
    borderRadius: '8px',
    darkMode: true,
    draggable: true,
    resizable: true,
    closeIcon: true,
    angle: {
        position: 'top',
        offset: 20
    },
    overlay: {
        backgroundColor: '#000',
        opacity: 0.5
    },
    animation: 'fading-slide',
    buttons: [
        new BX.UI.Button({
            text: 'Save',
            color: BX.UI.Button.Color.SUCCESS,
            onclick: function() {
                console.log('Saved');
                advancedPopup.close();
            }
        }),
        new BX.UI.Button({
            text: 'Cancel',
            color: BX.UI.Button.Color.LIGHT_BORDER,
            onclick: function() {
                advancedPopup.close();
            }
        })
    ],
    events: {
        onShow: function() {
            console.log('Popup is showing');
        },
        onAfterShow: function() {
            console.log('Popup animation complete');
        },
        onClose: function() {
            console.log('Popup is closing');
        },
        onAfterClose: function() {
            console.log('Popup closed');
        }
    }
});

advancedPopup.show();

// Dynamic content update
setTimeout(() => {
    advancedPopup.setContent('<h2>Updated Content</h2>');
    advancedPopup.adjustPosition();
}, 2000);

// Popup factory method
const factoryPopup = PopupManager.create({
    id: 'factory-popup',
    content: 'Created via factory',
    autoHide: true
});

// Retrieve existing popup
const existingPopup = PopupManager.getPopupById('my-popup');
if (existingPopup && existingPopup.isShown()) {
    existingPopup.close();
}
```

--------------------------------

### Icon Set: Render and Customize Icons

Source: https://context7.com/bitrix-tools/agent-context-kit/llms.txt

The Icon Set provides a standardized system for displaying icons with options for size, color, and hover effects. It requires importing specific icon modules like 'ui.icon-set.api.core'. Icons can be rendered as DOM elements and appended to the page, accepting icon identifiers, dimensions, colors, and hover modes as parameters.

```javascript
import { Icon, Actions, Main, Social, IconHoverMode } from 'ui.icon-set.api.core';

// Basic icon
const pencilIcon = new Icon({
    icon: Actions.PENCIL_DRAW,
}).render();

document.querySelector('.toolbar').appendChild(pencilIcon);

// Icon with size and color
const settingsIcon = new Icon({
    icon: Actions.SETTINGS_1,
    size: 24,
    color: '#525C69',
}).render();

document.querySelector('.header').appendChild(settingsIcon);

// Icon with hover effect
const deleteIcon = new Icon({
    icon: Actions.DELETE,
    size: 20,
    color: '#FF5752',
    hoverMode: IconHoverMode.ALT,
}).render();

deleteIcon.addEventListener('click', () => {
    console.log('Delete clicked');
});

document.querySelector('.actions').appendChild(deleteIcon);

// Responsive icon
const menuIcon = new Icon({
    icon: Main.MENU,
    responsive: true,
}).render();

document.querySelector('.mobile-header').appendChild(menuIcon);

// Multiple icons from different sets
const icons = [
    { icon: Actions.ADD, label: 'Add' },
    { icon: Actions.EDIT, label: 'Edit' },
    { icon: Actions.COPY_PLATES, label: 'Copy' },
    { icon: Social.FACEBOOK, label: 'Share on Facebook' },
    { icon: Social.TWITTER, label: 'Share on Twitter' },
    { icon: Main.SEARCH, label: 'Search' },
    { icon: Main.FILTER, label: 'Filter' },
];

const toolbar = document.createElement('div');
toolbar.className = 'icon-toolbar';

icons.forEach(({ icon, label }) => {
    const iconElement = new Icon({
        icon: icon,
        size: 20,
        color: '#333',
    }).render();

    iconElement.setAttribute('title', label);
    iconElement.style.cursor = 'pointer';
    iconElement.style.margin = '0 8px';

    toolbar.appendChild(iconElement);
});

document.body.appendChild(toolbar);
```

--------------------------------

### JavaScript Entity Selector for User Selection

Source: https://context7.com/bitrix-tools/agent-context-kit/llms.txt

Demonstrates a simple single user selection using the Dialog component from ui.entity-selector. It configures the dialog to target a specific button, allows only one user selection, and handles the 'Item:onSelect' event to display the selected user's name. Dependencies include the 'ui.entity-selector' module.

```javascript
import { Dialog, TagSelector } from 'ui.entity-selector';

// Simple single user selection
const button = document.getElementById('select-user-button');
button.addEventListener('click', () => {
    const dialog = new Dialog({
        targetNode: button,
        multiple: false,
        context: 'MY_APP_USER_SELECTION',
        entities: [
            {
                id: 'user',
                options: {
                    inviteEmployeeLink: false
                }
            }
        ],
        events: {
            'Item:onSelect': (event) => {
                const { item } = event.getData();
                console.log('Selected user:', item.getId(), item.getTitle());
                button.textContent = item.getTitle();
                dialog.hide();
            }
        }
    });

    dialog.show();
});
```

--------------------------------

### JavaScript Entity Selector for Multiple Entities with TagSelector

Source: https://context7.com/bitrix-tools/agent-context-kit/llms.txt

Illustrates multi-entity selection using TagSelector, allowing users to select multiple users, departments, and CRM contacts. It configures the dialog with search enabled, pre-selected items, and event handlers for tag addition and removal. The selected items can be retrieved using `getDialog().getSelectedItems()`. Dependencies include 'ui.entity-selector'.

```javascript
import { Dialog, TagSelector } from 'ui.entity-selector';

// Multiple entity selection with TagSelector
const tagSelector = new TagSelector({
    dialogOptions: {
        context: 'CRM_DEAL_PARTICIPANTS',
        multiple: true,
        enableSearch: true,
        entities: [
            {
                id: 'user',
                options: {
                    inviteEmployeeLink: true
                }
            },
            {
                id: 'department',
                options: {
                    selectMode: 'usersAndDepartments'
                }
            },
            {
                id: 'crm-contact'
            }
        ],
        preselectedItems: [
            ['user', 1],
            ['user', 5],
            ['department', 10]
        ],
    },
    events: {
        onTagAdd: (event) => {
            const { tag } = event.getData();
            console.log('Tag added:', tag.getId(), tag.getTitle());
        },
        onTagRemove: (event) => {
            const { tag } = event.getData();
            console.log('Tag removed:', tag.getId());
        }
    }
});

const container = document.getElementById('participants-selector');
tagSelector.renderTo(container);

// Get selected items
const selectedItems = tagSelector.getDialog().getSelectedItems();
selectedItems.forEach(item => {
    console.log('Selected:', item.getEntityId(), item.getId(), item.getTitle());
});
```

--------------------------------

### SidePanel Slider: Open, Manage, and Interact with Sliding Panels

Source: https://context7.com/bitrix-tools/agent-context-kit/llms.txt

The SidePanel Slider allows developers to open pages and components in sliding side panels. It supports history management, inter-panel messaging, and customizable event handlers. Dependencies include the 'main.sidepanel' module. It takes URL paths, configuration objects (width, history, labels, events, request parameters), and content callbacks as input.

```javascript
import { SidePanel } from 'main.sidepanel';

// Simple slider
SidePanel.Instance.open('/tasks/task/view/123/', {
    width: 900,
    allowChangeHistory: true
});

// Slider with event handlers
SidePanel.Instance.open('/crm/deal/details/456/', {
    width: 1000,
    cacheable: false,
    label: {
        text: 'Deal',
        color: '#4CAF50'
    },
    events: {
        onOpenStart: function() {
            console.log('Slider opening...');
        },
        onLoad: function(event) {
            console.log('Slider content loaded');
            const slider = event.getSlider();
            console.log('Slider URL:', slider.getUrl());
        },
        onCloseComplete: function(event) {
            console.log('Slider closed, refreshing data...');
            window.location.reload();
        }
    }
});

// Slider with POST data
SidePanel.Instance.open('/api/form/render/', {
    width: 800,
    requestMethod: 'post',
    requestParams: {
        formId: 42,
        entityType: 'lead',
        entityId: 123
    },
    events: {
        onLoad: function() {
            console.log('Form loaded with POST data');
        }
    }
});

// Custom content callback
SidePanel.Instance.open('custom-content-slider', {
    width: 700,
    contentCallback: function(slider) {
        return new Promise((resolve, reject) => {
            // Fetch data asynchronously
            fetch('/api/dashboard/stats')
                .then(response => response.json())
                .then(data => {
                    const element = document.createElement('div');
                    element.className = 'custom-dashboard';
                    element.innerHTML = `
                        <h2>Dashboard Statistics</h2>
                        <div class="stats">
                            <div>Total Users: ${data.totalUsers}</div>
                            <div>Active Sessions: ${data.activeSessions}</div>
                        </div>
                    `;
                    resolve(element);
                })
                .catch(error => reject(error));
        });
    }
});

// Inter-slider messaging (from child slider)
SidePanel.Instance.postMessage(window, 'deal-updated', {
    dealId: 456,
    status: 'won',
    amount: 50000
});

// Listen for messages (in parent window)
SidePanel.Instance.subscribe('deal-updated', function(event) {
    const data = event.getData();
    console.log(`Deal ${data.dealId} updated:`, data.status, data.amount);
    // Update parent page without reload
    updateDealCard(data.dealId, data);
});

// Close current slider programmatically
document.getElementById('save-button').addEventListener('click', () => {
    saveFormData().then(() => {
        SidePanel.Instance.postMessage(window.top, 'form-saved', { success: true });
        SidePanel.Instance.close();
    });
});
```

--------------------------------

### Vuex Model Integration for Campaign State Management in JavaScript

Source: https://context7.com/bitrix-tools/agent-context-kit/llms.txt

Provides a Vuex 4 module for managing campaign data, including normalized storage and reactive updates. It defines getters for retrieving all campaigns or a campaign by ID, mutations for setting and removing items, and actions for upserting and removing campaigns. This module facilitates state management for campaign-related data within a Vue application.

```javascript
// model/campaigns/src/campaigns.js
import { mapGetters } from 'ui.vue3.vuex';
import { Models } from 'mymodule.const';

// Vuex module structure
export const campaignsModule = {
    namespaced: true,
    state: {
        collection: new Map(),
    },
    getters: {
        getAll: (state) => Array.from(state.collection.values()),
        getById: (state) => (id) => state.collection.get(id),
    },
    mutations: {
        SET_ITEM(state, campaign) {
            state.collection.set(campaign.id, campaign);
        },
        REMOVE_ITEM(state, id) {
            state.collection.delete(id);
        },
    },
    actions: {
        upsert({ commit }, campaign) {
            commit('SET_ITEM', campaign);
        },
        remove({ commit }, id) {
            commit('REMOVE_ITEM', id);
        },
    },
};

// Component usage
export const CampaignList = {
    computed: {
        ...mapGetters({
            campaigns: `${Models.Campaigns}/getAll`,
        }),
    },
    methods: {
        async loadCampaign(id) {
            await this.$store.dispatch(`${Models.Campaigns}/upsert`, { id, name: 'Test' });
        },
    },
    template: `
        <div v-for="campaign in campaigns" :key="campaign.id">
            {{ campaign.name }}
        </div>
    `,
};

```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.