Box UIプレビューアーで注釈を使用する方法

Photo by D0N MIL04K@pexels

Box Platform UI Element v16以降のプレビューアーでは、v4の注釈がサポートされ、Boxとアプリケーションの統合が強化されます。

はじめに

最初に、JavaScriptを読み込みます。

FlaskのHTMLテンプレート

プレビューアーElementはBox CDNから入手可能で、v16以上が必要になります。

注釈のElementは、GitHubから入手するか、npm i box-annotationsを実行する必要があります。ここでは、REACT/Nodeとは対照的に純粋なJavaScriptによる方法を使用するため、npm iから手動で入手したdistフォルダからannotations.jsを読み込みます。他のオプションについては、プレビューアーや注釈に関するドキュメント、またはimportを使用したこちらの例をご確認ください。

エンジニアリングチームは、注釈ライブラリをプレビューアーにバンドルする予定です。

次に、プレビューアーのオプションを設定して注釈を有効にする必要があります。

Pythonによるテンプレートのレンダリング

optionsを使用してプレビューアーでサイドバーと注釈の両方を有効にし、さらにcontentSidebarPropsを使用してサイドバーで注釈コメントを有効にする必要があります。

最後に、プレビューアーと注釈の両方をインスタンス化します。

FlaskのHTMLテンプレート

これで完了です。

注釈付きのBoxプレビューアー

Boxアプリでの注釈

イベントおよびメソッドの説明

使用可能なイベントやメソッドは多数あります。注釈固有のドキュメントをご確認ください。

イベントリスナーは、ビューアー (プレビューアー経由) または注釈にアタッチできます。ここでは、考えられる実装例をいくつか紹介します。

いつものように、PythonとJavaScriptを使用した実践的なデモの完成版は、こちらのGitHubリポジトリで公開されています。

また、CodePenの例も以下に示します。

ぜひご利用ください。

Some rights reserved