Когда мы запустили Box UI Elements в прошлом году, мы хотели не только обеспечить простой способ встраивания компонентов Box UI в ваш сайт или сервис, но и продолжить разработку столь востребованных функций Box в качестве новых компонентов.
Сегодня мы рады объявить о запуске бета-версии нашего новейшего элемента пользовательского интерфейса Box, Open With. Открыть с помощью помогает обеспечить более удобное управление контентом в приложении, позволяя пользователям открывать контент (хранящийся в Box) с помощью партнерского приложения, имитируя многие из тех же возможностей, которые доступны при просмотре файлов в веб-приложение Box. Нашими первыми партнерами по интеграции, доступными с этой бета-версией, являются Adobe Sign и G Suite.
Благодаря интеграции Adobe Sign вы можете легко подготовить документы из Box и отправить их на подпись прямо в ваших собственных приложениях.
«Компании и их клиенты полагаются на Adobe Sign, чтобы сэкономить время и сократить количество ненужных документов с помощью электронных подписей. Мы очень рады, что Adobe и Box расширяют современные, безопасные и простые возможности электронной подписи в приложениях, которые наши клиенты создают на платформе Box ».
- Джон Кремер, вице-президент по развитию бизнеса и эксплуатации продуктов, Adobe
С G Suite у вас будут возможности для работы с их обширным набором функций создания контента для создания, изменения и автоматического сохранения документов в Google Документах, Таблицах или Презентациях.
«Эта интеграция основана на нашей работе с Box, чтобы помочь пользователям беспрепятственно сотрудничать. Новая возможность «Открыть с помощью» позволит нашим совместным пользователям применять функции в наших продуктах, которые им нравятся, например совместную работу в реальном времени, ответы на таблицах или предлагаемые действия, с помощью Box. Мы с нетерпением ждем возможности предоставить эту интеграцию большему количеству клиентов ».
- Ритча Ранджан, директор по управлению продуктами в Google Cloud
Подписка на бета-версию
Бета-версия элемента пользовательского интерфейса Открыть с помощью доступна любому разработчику, использующему платформу Box. Чтобы активировать его для своего экземпляра, отправьте нам электронное письмо с идентификатором клиента вашего приложения. Мы внесем ваше приложение в белый список, чтобы вы могли выполнять вызовы API для элемента.
Как это работает
Первым шагом к настройке элемента Открыть с помощью является активация партнерских приложений (например, G Suite или Adobe Sign) для данного пользователя приложения. Это простой процесс выбора необходимых интеграций и включения их для ваших пользователей, который подробно описан здесь. Помимо этого, элемент работает так же, как и любой другой, с токеном доступа, идентификатором файла / папки и некоторыми простыми HTML, JavaScript и CSS.
Давайте рассмотрим два способа настройки элемента пользовательского интерфейса «Открыть с помощью».
Автономная кнопка «Открыть с помощью»
Давайте сначала рассмотрим автономный элемент, который создает кнопку, привязанную к определенному файлу.
<!-- Script and stylesheet includes --> <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=es6,Intl"></script> <script src="https://cdn01.boxcdn.net/polyfills/core-js/2.5.3/core.min.js"></script> <script src="https://cdn01.boxcdn.net/platform/elements/7.1.1/en-US/openwith.js"></script> <link rel="stylesheet" href="https://cdn01.boxcdn.net/platform/elements/7.1.1/en-US/openwith.css"> <!-- Node to embed UI Element into --> <div class="container"></div> <script type="text/javascript"> // File ID to use for button, and valid user access token var fileId = '[FILE_TO_LOAD]'; var accessToken = '[USER_ACCESS_TOKEN]'; // Create new Open With element and display var contentOpenWith = new Box.ContentOpenWith(); contentOpenWith.show(fileId, accessToken, { container: '.container' }) </script>
Для этой интеграции вы настраиваете узел HTML, например <div>
, для размещения элемента. Затем вы указываете идентификатор файла, к которому должна быть привязана кнопка для загрузки, и действительный токен доступа для пользователя приложения перед созданием и отображением кнопки.
Элемент функционирует примерно так, прежде чем его можно будет настроить.
Опция «Открыть с помощью» включена в элементе пользовательского интерфейса «Content Explorer»
Другой тип интеграции - включить функцию «Открыть с помощью» в существующем элементе пользовательского интерфейса Content Explorer. Этот код выглядит примерно так:
<!-- Script and stylesheet includes --> <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=es6,Intl"></script> <script src="https://cdn01.boxcdn.net/polyfills/core-js/2.5.3/core.min.js"></script> <script src="https://cdn01.boxcdn.net/platform/elements/7.1.0/en-US/explorer.js"></script> <link rel="stylesheet" href="https://cdn01.boxcdn.net/platform/elements/7.1.0/en-US/explorer.css"> <!-- Node to embed UI Element into --> <div class="container" style="height:600px;"></div> <script type="text/javascript"> // Folder ID to use for explorer, and user access token var folderId = '[FOLDER_TO_LOAD]'; var accessToken = '[USER_ACCESS_TOKEN]'; // Create new explorer element with Open With option enabled var contentExplorer = new Box.ContentExplorer(); contentExplorer.show(folderId, accessToken, { container: '.container', contentPreviewProps: { contentOpenWithProps: { show: true } } }) </script>
Процесс во многом такой же, как и в предыдущем примере, сначала мы определяем наши скрипты / таблицы стилей для элемента, а также для узла HTML, в котором он будет жить.
Затем мы указываем идентификатор папки, которую должен запускать Content Explorer, и действительный токен доступа пользователя. Когда мы создаем новый элемент пользовательского интерфейса Content Explorer, мы настраиваем параметр предварительного просмотра, чтобы включить функцию «Открыть с помощью».
Когда открывается это окно проводника, интеграция «Открыть с помощью» выглядит примерно так:
Это общий процесс включения нового элемента пользовательского интерфейса. Полную документацию и инструкции по установке см. В документации.
Для наших пользователей критически важно, чтобы у них была возможность быстрого доступа и редактирования соответствующих файлов, чтобы быстро управлять сделкой с недвижимостью. С помощью Open With Element пользовательский интерфейс становится намного проще. То, что обычно требует нескольких шагов (например, загрузка, редактирование и повторная загрузка файлов), теперь у пользователей есть единый, оптимизированный поток.
- Кентер Ву, соучредитель и вице-президент по инжинирингу, Dealpath
Ссылки и другие образцы
Чтобы легко начать работу, ознакомьтесь со следующими примерами и ссылками на некоторые другие интеграции:
- Документация и руководство по установке
- Пример Codepen« Открыть с помощью »
- Пример Codepen« Открыть с помощью + Content Explorer »
- Интеграция приложения Node Express со всеми 5 элементами
Нам очень важны ваши отзывы
Поскольку это бета-запуск, мы хотим услышать от вас обо всем, что вы хотите увидеть в будущем с помощью элемента «Открыть с помощью», о вещах, которые вам нравятся, или о компонентах, которые, по вашему мнению, не работают должным образом. .
Вы можете отправить нам этот отзыв напрямую по электронной почте здесь.
Удачного кодирования!