Как в приложении-надстройке можно отследить нажатие на кнопку «Сохранить» в пользовательском поле?

Я разработал приложение для встраивания пользовательского поля и все работает правильно, но у меня возникла проблема с сохранением значения этого поля при нажатии кнопки "Сохранить" в карточке лида. Моё поле находится во фрейме, и я не знаю, как передать это событие во фрейм. Я бы не хотел добавлять отдельную кнопку "Сохранить" непосредственно во фрейме. Как лучше организовать этот процесс?
  • 22 января 2025 г. 8:34
Ответы на вопрос 2
Отслеживание нажатия на кнопку "Сохранить" в карточке лида может быть немного сложным, особенно когда ваша надстройка работает во фрейме. Однако вы можете использовать несколько подходов, чтобы добиться желаемого поведения:

### 1. Использование API события изменения
Если платформа, с которой вы работаете, предоставляет API для работы с событием `onsave` или аналогичными, вы можете подписаться на это событие из вашего фрейма. Например:

- Вы можете использовать API вашей платформы, чтобы отслеживать события изменения. Если такая возможность существует, подписаться на событие "сохранить" из вашего фрейма.

### 2. Взаимодействие с родительским окном
Если ваше приложение работает внутри iframe, вы можете установить связь между фреймом и родительским окном:

1. **Событие "Сохранить" на родительском окне**:
   - Проверьте наличие событий нажатия на кнопку "Сохранить" в родительском окне (например, через jQuery, если он доступен).
   - После того, как событие сработает, с помощью `postMessage` отправьте сообщение во фрейм.

```javascript
// В родительском окне
document.querySelector('#saveButton').addEventListener('click', function() {
    const iframeWindow = document.querySelector('iframe').contentWindow;
    iframeWindow.postMessage('saved', '*');
});
```

2. **Приём сообщения во фрейме**:
   - В вашем iframe-скрипте добавьте обработчик, чтобы принимать это сообщение.

```javascript
// В вашем фрейме
window.addEventListener('message', function(event) {
    if (event.data === 'saved') {
        // Ваш код для обработки сохранения данных
        saveFieldValue();
    }
});
```

### 3. Использование MutationObserver
Если вы не можете отслеживать событие напрямую, вы можете использовать `MutationObserver` для отслеживания изменений в DOM:

```javascript
const targetNode = document.getElementById('leadForm');

const config = { attributes: true, childList: true, subtree: true };

const callback = function(mutationsList, observer) {
    for (const mutation of mutationsList) {
        if (mutation.type === 'attributes' && mutation.attributeName === 'yourAttributeName') {
            // Ваш код для обработки
            saveFieldValue();
        }
    }
};

const observer = new MutationObserver(callback);
observer.observe(targetNode, config);
```

Эти подходы могут помочь вам реализовать функциональность, которую вы ищете, и отслеживать нажатие кнопки "Сохранить" для вашего пользовательского поля. Выберите подход, который лучше всего подходит для вашего конкретного сценария и аппаратного обеспечения.
Вам НЕ нужно делать отдельную кнопку для сохранения, так как сохранение производится родительским окном. 

Внутри вашего фрейма с приложением вы проводите необходимые действия и уведомляете родительское окно о том что значение нужно изменить.

По шагам:

1. Подключаете BX24 JS SDK.
Как это сделать вы можете прочитать в документации: https://apidocs.bitrix24.ru/api-reference/bx24-js-...

2. Когда на вашей форме изменилось значение, то необходимо отправить сообщение в родительское окно об изменении.
BX24.placement.call('setValue', value);

Пример создание польз.поля можно посмотреть в документации: https://apidocs.bitrix24.ru/tutorials/crm/crm-widg...
Похожие вопросы