Осень подходит к концу и мы вступаем в зимний сезон с богатым урожаем новых возможностей, которые предоставляет библиотека Webix. В версии 11.0 представлен ряд обновлений Webix Core, а также комплексных виджетов, включая SpreadSheet, Report Manager и File Manager.
В Webix Core добавлена поддержка последних версий PDF.js. В SpreadSheet появились новые функциональные возможности, позволяющие экспортировать изображения в Excel, получать ссылку на ячейку по ее идентификатору в таблице, импортировать фильтры из Excel, и это далеко не все. В Report Manager появилась возможность представлять отчеты как отдельные виджеты, в File Manager — использовать расширенные фильтры для поиска файлов.
Вам уже не терпится познакомиться с новыми фичами библиотеки? Что ж, нам не терпится представить их вам. Итак, начнем.
Обновления Webix Core
В Webix 11.0 была добавлена поддержка актуальной версии PDF.js, сторонней библиотеки для парсинга и рендеринга PDF-файлов. Теперь пользователи имеют доступ к ее новейшим функциям (до версии 4.7.76) и аннотациям, включая виджет электронной подписи, FreeText и Popup. Это позволяет воспользоваться всеми преимуществами библиотеки PDF.js при работе с PDF Viewer.
Следующее обновление — это возможность использовать режим: mode:”auto” в webix.print(). Некоторые веб-браузеры не предоставляют возможность выбора ориентации страницы для печати документов, если свойство size указано в стилях, например, @media print { @page{size:A4 landscape, …}.
Теперь вы можете использовать mode:”auto” в настройках webix.print() для того, чтобы обойти это ограничение и иметь возможность выбора ориентации страницы (альбомная или книжная) в браузере:
rows: [{
view: 'button',
value: 'Print',
click: () => {
webix.print($$("table"),{mode:"auto"});
},
},
{
view: 'datatable',
id: 'table',
autoConfig: true,
data: data
}
],
});
Обратите внимание, что при использовании mode:”auto” некоторые другие свойства игнорируются, например, формат листа paper:”A3”.
В Webix Core появились и другие важные обновления, позволяющие пользователям экспортировать изображения (для SpreadSheet и Core), а также закрепленные (замороженные) строки и столбцы в Excel (для SpreadSheet и DataTable). Мы подробно рассмотрим эти новые фичи чуть позже, в разделе про обновления SpreadSheet.
Обновления Report Manager
В Report Manager теперь есть возможность отображать отчеты как отдельные виджеты — пользователи могут создавать такие отчеты в виде таблиц (table), древовидных карт(treemap) или диаграмм (chart) без инициализации Report Manager. Новые виджеты отображают предоставленные данные в одной из перечисленных выше форм (table, treemap, chart) в зависимости от конфигурации отчета. Их можно использовать, например, в случае, когда вам необходимо изолировать отчет в зависимости от уровня доступа.
Обновления File Manager
File Manager дополнен расширенными фильтрами для поиска файлов, которые существенно облегчают работу с большими наборами данных. Ранее пользователи могли искать файлы по названию в текущей и во всех вложенных папках. Результаты поиска отображались только в режиме Cards без возможности сортировки. Чтобы сделать взаимодействие с данными более удобным, инженеры Webix добавили расширенную фильтрацию для получения более точных результатов при сортировке больших объемов данных.
Теперь пользователи могут выбирать способ отображения результатов поиска – это может быть режим Cards или Table. Более того, пользователям доступны расширенные возможности фильтрации, которые позволяют:
- осуществлять поиск различных типов файлов и папок;
- задавать временной диапазон для по поиска;
- выбирать размер файлов и папок;
- выбирать расположение – оно может иметь значение Global Search (глобальный поиск), This Folder (поиск в текущей папке) or Custom Location (определенное пользователем место для поиска).
Используйте контрол «Filter» в приведенном ниже сниппете, чтобы протестировать новую функциональность File Manager:
Live demo>>
Обновления SpreadSheet
Новая версия Webix позволяет пользователям экспортировать изображения Spreadsheet в Excel. Чтобы сделать это возможным, был введен новый параметр image: по умолчанию он имеет значение true и может принимать значение false при необходимости отключить функцию экспорта изображений:
Вот как это работает:
Эта функция изначально была разработана для SpreadSheet, но ее можно настроить для Webix Core. Это значит, что вы можете кастомизировать другие виджеты Webix, добавив возможность экспорта изображений в Excel: используйте для этих целей $exportView или $getExportValue. Ниже вы можете найти примеры кода, показывающие, как реализовать эту функцию в виджетах DataTable и Chart:
Виджет DataTable с изображениями внутри ячеек, которые можно экспортировать в Excel:
А здесь представлен сниппет, демонстрирующий возможность экспорта Chart в виде изображения в Excel. Обратите внимание, что диаграмма экспортируется как изображение без сохранения какого-либо функциональных возможностей построения диаграмм:
В новом релизе в SpreadSheet также была добавлена возможность получать ссылку на ячейку по идентификатору ячейки в таблице. Это стало возможным благодаря введению двух методов — posToRef() и refToPos().
Метод posToRef(row1,col1,row2,col2,sheet) принимает индексы столбцов и строк, а также имя листа в качестве аргументов. Он возвращает строку, которая идентифицирует конкретную ячейку/ячейки листа. Это значит, что метод преобразует позицию ячейки в ссылку на нее, используя стиль ссылок Excel:
Чтобы сделать обратное, вы можете использовать метод refToPos(ref) и получить имя листа и позицию ячеек из ссылки в стиле Excel.
Если вам для каких-то целей необходимо преобразовать имя ячейки в индекс или наоборот, пожалуйста, ознакомьтесь с данным сниппетом, демонстрирующим, как это сделать с помощью методов posToRef() и refToPos().
Следующая фича SpreadSheet, о которой мы поговорим, — это возможность импортировать фильтры из Excel. Хотя раньше пользователи могли импортировать файлы с отфильтрованными строками, SpreadSheet не поддерживал импорт самих фильтров. Теперь, если вы хотите использовать Excel файл, вам не нужно беспокоиться о фильтрах, поскольку они импортируются в Spreadsheet вместе с соответствующим документом.
Чтобы протестировать работу новой фичи — воспользуйтесь контролом «Import from Excel», добавьте файл в SpreadSheet и посмотрите на результат:
В новом релизе функциональность SpreadSheet была расширена возможностью экспорта закрепленных строк и столбцов в Excel. Это можно сделать, используя freeze в параметрах экспорта:
С помощью приведенного ниже сниппета вы можете протестировать новую опцию — используйте контрол «Export to Excel», чтобы загрузить файл, содержащий закрепленные(замороженные) ячейки и столбцы:
Обратите внимание, что возможность экспортировать закрепленные (замороженные) строки и столбцы в Excel — это фича Webix Core, доступная в других комплексных виджетах Webix, например, в DataTable (используйте этот сниппет, чтобы узнать, как добавить эту новую функциональную возможность в виджет).
В дополнение к широкому перечню поддерживаемых элементов и настроек для импорта и экспорта в Excel, SpreadSheet теперь может работать с еще большим их количеством. Давайте рассмотрим их более подробно :
- zoom – принимает число, представляющее процентное значение, или значение auto, пример: zoom: 100;
- headers (определяет видимость заголовка) – принимает булевое значение или значение auto, пример: headers: true;
- gridlines (определяет видимость линий сетки) – принимает булевое или значение auto, пример: gridlines: true;
- formulasMode (для отображения формул или значений) – принимает булевое значение или значение auto, пример: formulasMode: true.
Если для указанных выше параметров установлен режим auto, например gridlines: ‘auto’, значение наследуется от состояния соответствующего метода SpreadSheet, например, hideGridlines().
Вышеупомянутые настройки можно использовать в Webix Core — в этом сниппете представлено кастомизированное решением для DataTable.
Используйте приведенный ниже сниппет, чтобы протестировать новые настройки и увидеть соответствующие методы SpreadSheet:
Перейдем к еще одной новой фиче, существенно облегчающей поиск и замену данных в ячейках. Теперь она доступна по умолчанию через контрол «Find and Replace». Нажмите на контрол и задайте параметры поиска и/или замены в конкретном Листе или Книге. Данная фича может работать в пределах текущего листа или всего документа; искать данные в формулах или значениях; показывать результаты, соответствующие регистру и всему содержимому ячейки.
Для вашего удобства мы разделили математические методы на категории, поскольку это позволяет работать с ними через пользовательский интерфейс и контролировать, какие категории вы предоставляете пользователям.
Вы можете выбрать следующие категории: common, date, text, number, financial. Методы common доступны по умолчанию, а это означает, что вам не нужно добавлять какие-либо дополнительные параметры, чтобы пользоваться ими.
Если вы хотите использовать другие методы, вам необходимо добавить в ваш код параметр methods с названием категории, как в примере ниже:
view:"spreadsheet",
methods:["date", "text"],
toolbar:"full",
data:spreadsheet_data
});
Параметр methods может принимать строку с названием одной категории, например, methods:»date» или массив с наименованием нескольких категорий, например, methods:[«number»,»text»]. Вы также можете использовать methods:»all», чтобы импортировать все категории одновременно.
Теперь пользователи могут фильтровать методы по категориям и искать конкретные методы внутри категории. Но обратите внимание, что вам необходимо явно указать параметр methods, чтобы иметь такую возможность, иначе поле Category будет скрыто.
В SpreadSheet появилось еще несколько обновлений, касающихся категорий — пользователи получили возможность определять категории для своих кастомных методов. В данном сниппете вы можете увидеть, как создается пользовательская категория с кастомным методом.
Давайте продолжим и посмотрим, на что еще способен SpreadSheet.
В виджете усовершенствована функция подсветки математических формул:
- при редактировании ячейки с включенным liveEditor текст формулы подсвечивается (вы можете видеть, что связанные ячейки также подсвечиваются – такая возможность уже существовала ранее);
- когда вы редактируете ячейку без liveEditor, связанные ячейки выделяются, а текст формулы — нет. Это происходит из-за ограничений встроенных текстовых редакторов для ячеек при работе с табличным редактором;
- при выделении ячейки и включенном режиме формул (showFormulas) текст формулы и связанные с ней ячейки подсвечиваются независимо от того, используете вы liveEditor или работаете без него (ранее эта функция поддерживалась только при включенном liveEditor).
Другие обновления
Переходите на страницу What’s new page, чтобы увидеть весь список обновлений и улучшений, представленных командой Webix в данном релизе. Чтобы получить саму библиотеку, обновите ее через npm, Client area или кликнете по большой фиолетовой кнопке ниже.
Мы очень надеемся, что использование новых фич, разработанных инженерами Webix, позволит вам создавать инновационные проекты, предоставляющие пользователям расширенные функциональные возможности, которые помогут сделать сложные вещи понятными и простыми в применении.
