.. _api_reference_create_dialog_box:

===============================================================================================================
Создание диалогового окна
===============================================================================================================

В платформе DBVIM вы можете создавать отличные диалоговые окна, которые позволяют расширить функционал пользовательского интерфейса. Для понимания принципа создания диалогового окна предлагаю посмотреть пример ниже.

**Требования**

Требуется роль: ADMIN_ROLE

**Задача**

Создать *Действие пользовательского интерфейса* вызывающее диалоговое окно для заполнения поля *Решение* и *Указанная дата решения* на существующей записи Инцидента, где *Решение* заполнено в диалоговом окне, если оно уже заполнено в самой записи, а так же подставляется текущая дата и время в поле *Указанная дата решения*.

**Процедура**

1. Перейдите к **Системные настройки** -> **UI Действия**
2. Нажмите **Создать**
3. Заполните значения на форме (см. подробнее :ref:`form_administration_user_interface_action_edit`)
4. Заполняем значение скрипт: 

.. code:: javascript

    function executeOnView(object, viewModel) {
    //Get the values to pass into the dialog
    //resolve_value - id of the stringproperty on the dialogResolvePage (sys_page)
    var initVals = mapBuilder.put("resolve_value", object.getProperty("core_task_close_notes")).put("datetime", scriptApi.getDateTimeInstant()).build();
    // Create a dialog window using dialogResolvePage view and populate initial values
    var dialog = dialogWindow.create("dialogResolvePage", initVals);
    dialog.setTitle("Resolve"); // The title of the dialog window
    // Sets the function that will be called on OK button
    dialog.onOk(function (map) {
        uiUtils.showNotification("OK");
        //set values
        object.setProperty("core_task_close_notes", map.get("resolve_value"));
        object.setProperty("itsm_incident_estimated_resolved_date", map.get("datetime"));
        object.setProperty("core_task_state", 50); //Set state Closed
        viewModel.saveObject(); //save object
    });
    // Sets the function that will be called on Cancel button
    dialog.onCancel(function () {
        uiUtils.showNotification("Cancel");
    });
    // Open an dialog window
    dialog.show();
}

.. note:: 

    После того как вы настроили действие пользовательского интерфейса для запуска диалогового окна, необходимо создать *Специальную страницу* с правильным именем для отображения в диалоговом окне. В приведенном выше скрипте мы использовали «var dialog = dialogWindow.create(»dialogResolvePage», initVals);», чтобы инициализировать UiDialogWindow и указать на страницу диалога.

5. Создаем *Специальную страницу* (``sys_page``)
6. Перейдите к **Системные настройки** -> **Специальные страницы**
7. Нажмите **Создать**
8. Заполните значения на форме

========================================  ========================================
Свойство                                  Вводимые значения
========================================  ========================================
Название                                  dialogResolvePage
Активно                                   Выставить флаг
========================================  ========================================

9.  Заполняем значения скрипта. Комментарии в ZUML ниже объясняют каждую часть страницы.

.. code:: html

    <zk>
    <!-- You need to set property id to interact with -->
    <stringproperty label="Close note" id="resolve_value"/>
    <datetimeproperty label="Resolve at" id="datetime"/>

    <hlayout sclass="mt-4">
        <!-- Sets onClick="@command('ok')" means the button calls onOk function -->
        <button mold="bootstrap" sclass="btn-dbvim me-2" label="Save" onClick="@command('ok')"/>
        <!-- Sets onClick="@command('cancel')" means the button calls onCancel function -->
        <button mold="bootstrap" sclass="btn-dbvim-outline me-2" label="Cancel" onClick="@command('cancel')"/>
        <!-- Also sets the scalss="btn-dbvim-outline me-2" to apply the default DBVIM style -->
    </hlayout>
    </zk>