Когда мы запустили 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

Ссылки и другие образцы

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

Нам очень важны ваши отзывы

Поскольку это бета-запуск, мы хотим услышать от вас обо всем, что вы хотите увидеть в будущем с помощью элемента «Открыть с помощью», о вещах, которые вам нравятся, или о компонентах, которые, по вашему мнению, не работают должным образом. .

Вы можете отправить нам этот отзыв напрямую по электронной почте здесь.

Удачного кодирования!