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

• 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. Стандартные диалоговые окна на базе Bootstrap

Готовые к использованию стандартные диалоговые окна на базе Bootstrap хранятся в файле Vintasoft.Imaging.Office.Dialogs.Bootstrap.js.
Если веб редактор электронных таблиц должен использовать стандартные диалоговые окна на базе 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>
  

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

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

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

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

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

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

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

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

Если необходимо создать UI-диалог для другой библиотеки пользовательского интерфейса, рекомендуется создать диалог как обертку вокруг готовой к использованию UI-панели (WebUiRenameWorksheetPanelJS, WebUiMoveWorksheetPanelJS, WebUiFindTextPanelJS, WebUiSelectFunctionPanelJS, WebUiInsertChartDialogJS, WebUiInsertCommentDialogJS, WebUiEditCommentDialogJS, WebUiEditChartPropertiesDialogJS, WebUiCellNumberFormatDialogJS, WebUiAddDefinedNameDialogJS, WebUiDefinedNameManagerDialogJS, WebUiSelectDefinedNameDialogJS, WebUiEditHyperlinkDialogJS). В этом случае нет необходимости реализовывать логику, связанную с диалогом (например, печать изображений), поскольку панель уже содержит всю необходимую логику. Файл

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