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

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

Требования

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

Задача

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

Процедура

1. Перейдите к Системные настройки -> UI Действия

2. Нажмите Создать

3. Заполните значения на форме (см. подробнее Создание действия пользовательского интерфейса)

4. Заполняем значение скрипт:

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 ниже объясняют каждую часть страницы.

<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>