Получение элемента страницы и добавление на него обработчика события

В данной статье на примере блокирования кнопки сохранения нового элемента приложения показано, как в виджете-код получить элемент страницы, а на примере запуска процесса при удалении элемента приложения показано, как добавить обработчик события нажатия на кнопку удаления и как запустить «родное» действие (в данном случае прерывание процессов и задач, связанных с удаляемым элементом) вместе с кастомным действием.

1. Блокирование кнопки сохранения элемента, если не заполнено обязательное поле «роль сотрудника» (сценарий в виджете-код на форме создания):

Код:

<script>
    $(document).ready(() => {
        <!-- создаем свойство глобального объекта window "saveButton" -->
        window.saveButton = document.querySelector('footer.modal-footer button.btn.btn-primary') ;
        <!-- Отключаем кнопку при загрузке страницы -->
        if(window.saveButton){
            window.saveButton.disabled = true;
        }
    })
</script >

Сценарий при изменении значения переменной «роль сотрудника» во вкладке клиентских сценариев:

Код:

declare const window:any;

async function onEmployeeRoleChange(): Promise<void> {
    if(window.saveButton){
        if(Context.data.employeeRole!.length>0){
            window.saveButton.disabled = false;
        }
        else{
            window.saveButton.disabled = true;
        }
    }
}

2. Добавление обработчика события для кнопки удаления элемента и запуск процесса при нажатии на неё (виджет-код на форме просмотра):

Код:

<script>
    <!-- Ожидаем загрузку страницы -->
    $(document).ready(async () => {
     <!-- получаем кнопку удаления на форме просмотра -->
        var externalButton = document.querySelector('footer.modal-footer button.btn.btn-danger');
        if(externalButton){
         <!-- Добавляем обработчик события нажатия этой кнопки, при нажатии будет вызвана функция  -->
            externalButton.addEventListener("click",CreateListenerForPopOverButton)
        }
    })
      function CreateListenerForPopOverButton(){
      <!-- Ожидаем загрузку страницы -->
       $(document).ready(async () => {
      <!-- получаем кнопку удаления на всплывшем окне удаления -->
            var innerButton =  document.querySelector('div.popover-outer.visible button.btn.btn-danger[type=submit]');
      <!-- Добавляем обработчик события нажатия этой кнопки, при нажатии будет вызвана функция-->
      <!-- из вкладки клиентских сценариев-->
            await innerButton.addEventListener("click",<%= Scripts%>.RunProcessOnDeleteButtonClick)
        })
    }  
</script >

Функция RunProcessOnDeleteButtonClick на вкладке клиентских сценариев:

Код:

async function RunProcessOnDeleteButtonClick(): Promise<void> {
    await Application.processes.your_process.run({});            
}

Большое спасибо за пример. Очень жаль, что про конструкцию <%= Scripts%> ничего не сказано в справке. Более того, в ноябре 21го года ТП не смогла мне ответить на вопрос - как из виджета код вызвать функцию из вкладки Скрипты. Еще раз огромное вам спасибо

К сожалению не работает. Обработчик событий не отрабатывает при клике.

Попробуйте так

Код:

<%= Scripts%>.RunProcessOnDeleteButtonClick()

Добрый день, дело не в скрипте, дело именно в addEventListener, используя ваш пример и сразу вызывая функцию она отрабатывает сразу при открытии, при передаче функцию референсом типа:

Код:

$(document).ready(async () => {
        var externalButton = document.querySelector('footer.modal-footer button.btn.btn-danger');
        if(externalButton){
            externalButton.addEventListener("click",function() { console.log('test')})
    })

Она не отрабатывает

Добрый день. Есть 2 приложения, допустим А и Б. Логика по блокированию кнопки реализован при добавлении нового элемента приложения Б. Но в карточке приложения А есть кнопка +Создать элемент приложения Б и в случае создания нового элемента приложения Б получается окно Б поверх окна А и тогда блокируется кнопка формы А, а не Б. это как-то можно исправить, чтобы логика отрабатывала именно с формой Б всегда, даже если она поверх другой формы?

Пробовал в форме задачи и
await innerButton.addEventListener("click",<%= Scripts%>.RunProcessOnDeleteButtonClick)
и
await innerButton.addEventListener("click",<%= Scripts%>.RunProcessOnDeleteButtonClick())
Первый не срабатывает вообще, второй срабатывает при загрузке формы. При этом если просто сделать кнопку в виджете код:
<button onclick="<%= Scripts %>.RunProcessOnDeleteButtonClick()">test</button>
то всё срабатывает.
Как можно добиться чтобы работал addEventListener в форме задачи?

Ps. document.querySelector элемент находит, проверил.

Не срабатывает на default кнопкой. Если доп. кнопки делать.
Попробовал сделать задержку. Работает. По другому не решил.

Код:

<script>
    $(document).ready(() => {
        <!-- создаем свойство глобального объекта window "defaultButton" -->
        setTimeout(() => {
window.defaultButton = document.querySelector('footer.modal-footer button.btn.btn-default') ;
        <!-- Отключаем кнопку при загрузке страницы -->
        if(window.defaultButton){
            window.defaultButton.disabled = true;
        }
}, 500);
    })
</script >