По умолчанию веб редактор электронных таблиц использует следующие стандартные диалоговые окна:

• WebUiRenameWorksheetDialogJS - диалоговое окно, позволяющее переименовать лист в редакторе электронных таблиц. Диалоговое окно появляется при нажатии кнопки "Rename worksheet" (Переименовать лист).
• WebUiMoveWorksheetDialogJS - диалоговое окно, позволяющее изменить порядок листов в редакторе электронных таблиц. Диалоговое окно появляется при нажатии кнопки "Move worksheet" (Переместить лист).
• WebUiFindTextDialogJS - диалоговое окно, позволяющее найти текст в табличном документе. Диалоговое окно появляется при нажатии кнопки "Search text" (Поиск текста).
• WebUiSelectFunctionDialogJS - диалоговое окно, позволяющее выбрать функцию для ячейки. Диалоговое окно появляется при нажатии кнопки "Insert function" (Вставить функцию).
• WebUiInsertChartDialogJS - UI-диалог, который позволяет вставлять диаграммы в редактор электронных таблиц. Диалог появляется при нажатии кнопки "Вставить диаграмму".
• WebUiInsertCommentDialogJS - UI-диалог, который позволяет вставлять новый комментарий. Диалоговое окно появляется при вставке нового комментария.
• WebUiEditCommentDialogJS - UI-диалог, который позволяет редактировать существующий комментарий. Диалоговое окно появляется при нажатии кнопки "Вставить комментарий".
• WebUiEditChartPropertiesDialogJS - UI-диалог, который позволяет редактировать свойства диаграммы в редакторе электронных таблиц. Диалоговое окно появляется при нажатии кнопки "Изменить комментарий".
• WebUiCellNumberFormatDialogJS - UI-диалог, который позволяет редактировать числовой формат значения ячейки. Диалоговое окно появляется при нажатии кнопки "Формат числа".
• WebUiAddDefinedNameDialogJS - UI-диалог, который позволяет добавить определенное имя в редакторе электронных таблиц. Диалоговое окно появляется при нажатии кнопки "Добавить определенное имя".
• WebUiDefinedNameManagerDialogJS - UI-диалог, который позволяет управлять (добавлять, редактировать, удалять) определенными именами в редакторе электронных таблиц. Диалоговое окно появляется при нажатии кнопки "Менеджер определенных имен".
• WebUiSelectDefinedNameDialogJS - UI-диалог, который позволяет выбрать определенное имя из доступных определенных имен в редакторе электронных таблиц. Диалоговое окно появляется при нажатии кнопки "Вставить определенное имя".
• WebUiEditHyperlinkDialogJS - UI-диалог, который позволяет добавлять или редактировать гиперссылку в ячейке. Диалоговое окно появляется при нажатии кнопки "Вставить ссылку".

1. Стандартные UI-диалоги на базе Bootstrap

Готовые к использованию стандартные UI-диалоги на базе Bootstrap хранятся в файле Vintasoft.Imaging.Office.Dialogs.Bootstrap.js.
Если веб редактор электронных таблиц должен использовать стандартные UI-диалоги на базе Bootstrap, то веб-приложение должно содержать:

• ссылку на CSS-файл стилей Bootstrap, например:
  
  • HTML

  <link rel="stylesheet" type="text/css" href="~/lib/bootstrap/dist/css/bootstrap.css">
  

• ссылки на библиотеки jQuery и Bootstrap, например:
  
  • HTML

  <script src="~/lib/jquery/dist/jquery.min.js" type="text/javascript"></script>
  <script src="/lib/bootstrap/dist/js/bootstrap.bundle.min.js" type="text/javascript"></script>
  

• ссылки на файлы Vintasoft.Imaging.js, Vintasoft.Imaging.css, Vintasoft.Imaging.Office.js, Vintasoft.Imaging.Office.css, Vintasoft.Imaging.Dialogs.Bootstrap.js и Vintasoft.Imaging.Office.Dialogs.Bootstrap.js, например:
  
  • HTML

  <script src="~/js/Vintasoft.Imaging.js" type="text/javascript"></script>
  <link rel="stylesheet" type="text/css" href="~/js/Vintasoft.Imaging.css">
  <script src="~/js/Vintasoft.Imaging.Office.js" type="text/javascript"></script>
  <link rel="stylesheet" type="text/css" href="~/js/Vintasoft.Imaging.Office.css">
  <script src="~/js/Vintasoft.Imaging.Dialogs.Bootstrap.js" type="text/javascript"></script>
  <script src="~/js/Vintasoft.Imaging.Office.Dialogs.Bootstrap.js" type="text/javascript"></script>
  

Внешний вид UI-диалогов можно настроить с помощью CSS-стилей Bootstrap.

Ниже представлен снимок экрана стандартного UI-диалога "Find text" (Найти текст) на базе Bootstrap:

2. Стандартные UI-диалоги на базе jQuery UI

Готовые к использованию стандартные UI-диалоги на базе jQuery UI хранятся в файле Vintasoft.Imaging.Office.Dialogs.jQueryUI.js.
Если веб редактор электронных таблиц должен использовать стандартные UI-диалоги на базе jQuery UI, то веб-приложение должно содержать:

• ссылку на CSS-файл стилей jQuery UI, например:
  
  • HTML

  <link rel="stylesheet" type="text/css" href="~/js/jquery-ui-css/jquery-ui.min.css">
  

• ссылки на библиотеки jQuery и jQuery UI, например:
  
  • HTML

  <script src="~/js/jquery-3.3.1.min.js" type="text/javascript"></script>
  <script src="~/js/jquery-ui.min.js" type="text/javascript"></script>
  

• ссылки на файлы Vintasoft.Imaging.js, Vintasoft.Imaging.css, Vintasoft.Imaging.Office.js, Vintasoft.Imaging.Office.css, Vintasoft.Imaging.Dialogs.jQueryUI.js и Vintasoft.Imaging.Office.Dialogs.jQueryUI.js, например:
  
  • HTML

  <script src="~/js/Vintasoft.Imaging.js" type="text/javascript"></script>
  <link rel="stylesheet" type="text/css" href="~/js/Vintasoft.Imaging.css">
  <script src="~/js/Vintasoft.Imaging.Office.js" type="text/javascript"></script>
  <link rel="stylesheet" type="text/css" href="~/js/Vintasoft.Imaging.Office.css">
  <script src="~/js/Vintasoft.Imaging.Dialogs.jQueryUI.js" type="text/javascript"></script>
  <script src="~/js/Vintasoft.Imaging.Office.Dialogs.jQueryUI.js" type="text/javascript"></script>
  

Внешний вид UI-диалогов можно настроить с помощью CSS-стилей jQuery UI.

Ниже представлен снимок экрана стандартного UI-диалога "Find text" (Найти текст) на базе jQuery UI:

3. Пользовательские стандартные UI-диалоги

Если готовые к использованию стандартные UI-диалоги на базе Bootstrap, jQuery UI или JavaScript не подходят для вашего интерфейса или задачи, вы можете использовать пользовательские стандартные UI-диалоги в веб редакторе электронных таблиц.

Если необходимо создать пользовательский диалог для другой библиотеки пользовательского интерфейса, рекомендуется создать диалог в виде оболочки вокруг готовой UI-панели (WebUiRenameWorksheetPanelJS, WebUiMoveWorksheetPanelJS, WebUiFindTextPanelJS, WebUiSelectFunctionPanelJS, WebUiInsertChartPanelJS, WebUiCommentPanelJS,WebUiEditChartPropertiesPanelJS, WebUiCellNumberFormatPanelJS, WebUiSelectDefinedNamePanelJS, WebUiDefinedNameManagerPanelJS, WebUiSelectDefinedNamePanelJS, WebUiEditHyperlinkPanelJS). В этом случае нет необходимости реализовывать логику, связанную с UI-диалогом (например, печать изображений), поскольку панель уже содержит всю необходимую логику. Файл

Можно также создать пользовательский UI-диалог с нуля, но в этом случае необходимо реализовать как пользовательский интерфейс, так и логику работы UI-диалога.