カスタムウィジェット

カスタムウィジェットを使用すると、外部サービスをAssetExplorer Cloudに取り込むことができ、アプリケーションの機能を拡張できます。ウィジェットとは、JSソフトウェア開発キットを使用して独自に作成できる、埋め込み可能なUIコンポーネントのことです。カスタムウィジェットを使用すると、AssetExplorer Cloud内からサードパーティのアプリケーションやWebページにアクセスできます。

カスタムウィジェットは、以下の場所からアクセスできるように設定できます。

  1. ダッシュボード
  2. Webタブ
  3. 資産カスタムメニュー、資産詳細（右パネル）、資産詳細タブ
  4. 「設定」内の「設定ウィジェット」

カスタムウィジェットは、AssetExplorer CloudのProfessional Editionでのみ利用できます。

ウィジェットパッケージの作成

コマンドラインインターフェース（CLI）は、カスタムウィジェットの作成とパッケージ化に使用されます。ZETコマンドは、AssetExplorer Cloudのカスタムウィジェットのパッケージ化に使用されるCLIです。

前提条件

AssetExplorer Cloud用のカスタムウィジェットを作成するには、node.jsをダウンロードする必要があります（バージョン7未満はサポートされていません）。

node.jsをダウンロードするには、ここをクリックしてください。

コマンドプロンプトから以下のコマンドを実行することで、nodeを確認することができます。

  • $ node -v（ノードのバージョンを確認します）
  • $ npm -v（npmのバージョンを確認します）
custom widgets overview 01

ZET CLIのインストール

以下のコマンドを使用して、ZET（Zoho Extension Kit）CLIをインストールできます。

$ npm install -g zoho-extension-toolkit

または、こちらをクリックすると、ZET（Zoho Extension Toolkit）のインストール方法に関する詳細情報をご覧いただけます。

ZET CLIのインストール

以下のZETコマンドを実行して、インストールを確認します。このコマンドを実行すると、各種サポートコマンドのヘルプコンテンツが表示されます。

$ zet

ZET CLIのインストール

カスタムウィジェットパッケージの作成

以下のコマンドでパッケージを作成します。

$ zet init

上下矢印キーを使用して表示されるZohoサービスの一覧からAssetExplorer Cloudを選択し、Enterキーを押してください。

カスタムウィジェットパッケージの作成

パッケージ名を入力するプロンプトが表示されます。希望するパッケージ名を入力し、Enterキーを押します。

パッケージ名には、アンダースコアで区切られた英数字のみを使用できます。

カスタムウィジェットパッケージの作成

リソースの追加

パッケージ名を指定すると、システム上に同じ名前のディレクトリが作成されます。このディレクトリには、カスタムウィジェットの設定に必要なすべてのフォルダー、ファイル、およびパッケージが含まれています。

デフォルトでは、初期ディレクトリには、カスタムウィジェットの構成に重要なフォルダーやファイルがあらかじめ含まれています。

リソースの追加

パッケージディレクトリに移動し、appフォルダーを開きます。カスタムウィジェットのリソースを、関連するサブフォルダーに入れます。

ウィジェット仕様を指定することで、カスタムウィジェットにリソースを追加できます。

カスタムウィジェットの仕様

カスタムウィジェットのパッケージディレクトリには、plugin-manifest.json ファイルが含まれています。このファイルには，カスタムウィジェットの設定情報が含まれています。このファイルに含まれるキーの中には、任意のものと、必須のものがあります。

以下のポインターを使用して、キーの値を指定してください。

  • サービス
    カスタムウィジェットが作成されるZoho製品です。AssetExplorer Cloudのカスタムウィジェットを作成する場合、サービスキーは「サービス」としてマニフェストに自動入力されます。
  • タイプ
    タイプはデフォルトで「個人」に設定されています。これは、ウィジェットの詳細がAPI経由でインスタンスにアップロードされることを示します。ユーザーは、いかなる状況においてもタイプを変更しないよう推奨されます。
  • ウィジェット
    カスタムウィジェット項目の詳細の JSON 配列です。カスタムウィジェットパッケージには、少なくとも1つのウィジェット項目を追加する必要があります。3件までウィジットを追加できます。各ウィジェット項目は、以下のプロパティのセットを持つ必要があります。
    • 名前
      ウィジェット項目の名前（最大100文字）
    • 説明
      ウィジェット項目の簡単な説明
    • path_url
      ウィジェット項目に定義されたURLパス。パスURLは、ウィジェットがロードされたときに、埋め込まれるページを特定します。path_URLは、パッケージディレクトリ内の'app'フォルダーへの絶対指定または相対指定が可能です。
      • 相対URL
        相対URLは、appフォルダーから読み込まれるファイルのパスを定義します。製品でウィジェットページをレンダリングするために、appフォルダーを基準としたpath_urlを構築してください。 例えば、widget.htmlがappフォルダー内にある場合、path_urlを/app/widget.htmlとして指定してください。
      • 絶対URL
        絶対URLは、カスタムウィジェット内のホストされたページをレンダリングするために使用されます。例えば、ナレッジベースのホストされているドメインのURLを直接指定して、カスタムウィジェット経由でAssetExplorer Cloudにソリューション記事を取り込むことができます。
    • アイコン
      オプションのキーで、ウィジェットの項目にアイコンを提供できます。デフォルトでは、アイコンはウィジェット項目の名前に関連する文字を含んでいます。プラグインマニフェストファイルの「30X30」キーの値としてアイコンのURLを入力することで、最大30x30ピクセルのサイズのアイコンをアップロードできます。アイコンURLは、パッケージディレクトリ内の'app'フォルダーへの絶対指定または相対指定が可能です。アイコンは、アプリケーションのテーマまたはスタティックに応じて表示されるようにレンダリングできます。
      • テーマアイコン
        アプリケーションのテーマに基づいて、アイコンがダークまたはライトとして動的にレンダリングされます。現在は、Webタブのアイコンにのみ適用されます。ユーザーは、テーマごとに異なるアイコンをアップロードできます。ダークアイコンとライトアイコンに付加される相対URLのサンプルは以下のように構成されています。
        "30x30": {"dark": "/app/[icon-name].png","light": "/app/[icon-name].png"}
      • 固定アイコン
        アイコンは、ユーザーがアップロードしたとおりに静止した状態で表示されます。付加される相対URLのサンプルは以下のように構成されています。
        "30x30":"/app/[icon-name].jpg"
      • テーマアイコンが使用されている場合、ウェブタブ以外のウィジェットの場所では、ライトアイコンのみが表示されます。ライトアイコンが見つからない場合は、テキストのみが表示されます。
      • PNG、JPG、またはJPEGファイル形式のみがサポートされています。
    • 場所
      AssetExplorer Cloudでカスタムウィジェットがレンダリングされる場所を定義します。ウィジェット項目の場所を少なくとも1つ指定する必要があります。現在、以下の場所でカスタムウィジェットを構成できます。
場所 JSONキー形式 説明

Webタブ

webtab

カスタムウィジェットは、ナビゲーション・パネルのウェブ・タブとして追加されます。

ホーム

ダッシュボード
（技術担当者およびリクエスター向け）

カスタムウィジェットは、ダッシュボードに埋め込まれます。ダッシュボードのウィジェットは、有効にすることしかできません。ウィジェットを追加するには、ダッシュボードを編集し、 [カスタマイズ] をクリックして、利用可能なウィジェットの一覧からカスタムウィジェットを選択します。

カスタムウィジェットがリクエスター向けに有効になっている場合、ダッシュボードウィジェットをリクエスターポータルのホームページに埋め込むことができます。リクエスターポータルにウィジェットを追加するには、リクエスターホームページをカスタマイズし、既定のウィジェット一覧からウィジェットを追加してください。

資産詳細ページ

asset.detail.menu

資産詳細ページのツールバーにカスタムメニューとして追加されます。カスタムメニューウィジェットのみが有効になっています。カスタムウィジェットをカスタムメニューに追加するには、カスタムメニューのアクションとしてウィジェットを選択します。 カスタムメニューにカスタムウィジェットを追加する方法はこちらをご覧ください。

asset.detail.subtab

資産詳細ページにサブタブとして追加されます。ウィジェットパッケージをインストールした後、「管理 > 開発者スペース > カスタムウィジェット」から、ウィジェットを表示させる製品タイプを選択することができます。

asset.detail.rightpanel

資産詳細ページの右パネルに追加されます。  ウィジェットパッケージをインストールした後、「管理 > 開発者スペース > カスタムウィジェット」から、ウィジェットを表示させる製品タイプを選択することができます。

設定

configuration

設定ウィジェットは、ユーザーには公開されず、管理者のみがアクセスできる簡単なウィジェットです。設定ウィジェットは、主にデフォルトのUI構成の代替として機能します。ユーザーは、設定ウィジェットを使用して、自分のUIのウィジェット構成を取得することができます。 ウィジェットにアクセスするには、以下の手順に従います。 [設定] > [開発者スペース] > [カスタムウィジェット] に移動します。 設定ウィジェット名をクリックします。設定ウィジェットがポップアップ・ウィンドウで開きます。 設定ウィジェットを有効にするには、少なくとも他の1箇所でウィジェットまたはウィジェット項目が指定されている必要があります。

追加設定

上記の仕様に加え、プラグインマニフェストファイル内で、プローブ、接続、変数といったオプション設定をカスタムウィジェットに構成し、その機能を拡張することも可能です。追加設定のスコープは、ウィジェット項目レベルに限定されるか、すべてのウィジェット項目にグローバルに適用されるかのいずれかです。

詳細についてはサンプルファイルを参照してください。

設定ポップアップ

config_popup_required キーを使用して、ウィジェットパッケージの保存後にポップアップ画面でユーザーに設定を表示するかどうかを指定します。これは1回限りの操作です。

キー値を次のように入力してください

  • true
    設定ポップアップ画面を表示する。
  • false
    設定ポップアップ画面を表示しない。

ポップアップに表示される詳細は、設定ウィジェットの存在に依存します。設定ウィジェットが有効になっていない場合は、デフォルトのウィジェット構成ポップアップが表示され、このポップアップからプローブ、接続、または変数の詳細を即座に更新できます。

ウィジェット構成ポップアップは、プローブ、接続、または変数が存在し、マニフェストで有効になっている場合にのみ表示されます。

設定ポップアップ

設定ウィジェットが有効になっている場合、そのウィジェットは、デフォルトの設定ページではなく、ポップアップメニューに表示されます。1つのウィジェットパッケージから複数の設定ウィジェットが追加された場合、config_popup_requiredキーの値が「true」に設定されていても、その値は無視されます。

スコープ：この設定はグローバルに適用されます。

ウィジェットヘッダーの表示

show_widget_header_in_dashboard キーを使用して、ダッシュボード上でウィジェット項目名をウィジェットヘッダーとして表示するかどうかを指定します。このキーは、ウィジェットのロケーションがダッシュボードとして構成されている場合にのみ使用できます。以下のポインターを使って、キーの値を指定してください。

  • true
    ダッシュボード内の対応するウィジェット項目のヘッダーを表示する必要がある場合。
  • false
    ダッシュボード内の対応するウィジェット項目のヘッダーを非表示にする必要がある場合。
スコープ：この設定は、各ウィジェット項目に固有です。カスタムウィジェットパッケージに複数のウィジェット項目がある場合は、各ウィジェット項目に固有のこのキーを構成できます。

リクエスターにカスタムウィジェットを表示する

show_to_requesterキーを使用して、カスタムウィジェットをリクエスターに表示するかどうかを指定します。以下のポインタを使用してキーの値を指定します。

  • true
    ウィジェットをリクエスターに表示する必要がある場合。
  • false
    ウィジェットをリクエスターに非表示にする必要がある場合。
スコープ：この設定は、各ウィジェット項目に固有です。カスタムウィジェット・パッケージが複数のウィジェット項目を持つ場合、ユーザは各ウィジェット項目に固有のこのキーを構成することができます。

プローブの設定

プローブは、カスタムウィジェットとオンプレミス・アプリケーションを連携させるためのアプリケーションです。オンプレミス製品と同じネットワーク上にプローブをインストールすると、対応するプローブがカスタムウィジェットに構成/関連づけられます。1つのカスタムウィジェットは、1つのプローブにのみ構成/関連付けることができます。

カスタムウィジェットにプローブ設定が必要かどうかを指定するには、probe_config_requiredキーを使用します。probe_config_required キーは、UI からのプローブ構成を有効にするためにのみ使用されます。このキーが無効になっていても、JSのAPIを使ってプローブを構成することができます。

キーの値を以下のように指定します。

  • true
    UIでプローブの選択が必要です。
  • false
    UIでプローブの選択は不要です。

AssetExplorer Cloudにウィジェットパッケージをアップロードした後、カスタムウィジェット一覧ビューからプローブ値を設定できます。

  • スコープ：この設定はグローバルに適用されます。プローブは、すべてのカスタムウィジェット項目に対して構成されます。
  • アプリケーションUIから設定ウィジェットのプローブを構成することはできません。

接続の設定

接続を使用すると、カスタムウィジェットをサードパーティのAPIと統合できます。ウィジェットパッケージで接続を構成することで、カスタムウィジェットからサードパーティのアプリケーションにアクセスすることができます。なお、カスタム ウィジェットには最大5つの接続を追加できます。

プラグインマニフェストファイルで接続を構成するには、接続が作成された後に接続の詳細を JSON 文字列として直接コピーします。［管理］→［開発者スペース］→［接続］ に移動し、接続詳細ページから JSON コードスニペットをコピーします。

plugin-manifestファイルで「userAccess」を「true」に設定することで、ユーザーが個別に接続を認証できるようになります。カスタムウィジェットをインストールしたSDAdminのみに認証を制限するには、「userAcess」を「false」に設定します。

"connections": [ { "connectionLinkName":"twitter", "connectionName":"twitter", "serviceName":"twitter", "userAccess":false, "isUserDefinedService":false } ],

plugin-manifest ファイルで構成された接続の例です。

  • スコープ：この設定はグローバルに適用されます。接続は、すべてのカスタムウィジェット項目に対して構成されます。
  • カスタムウィジェットを削除すると、関連する接続も削除されます。

変数の設定

変数とは、キーとなる値を格納するエンティティで、特定のコンポーネント（ここではカスタムウィジェット）に適用されます。カスタムウィジェットには、ユーザー固有の値を保持するために、最大5つの変数を作成できます。変数は、文字列値のみを保持できます。

JSON配列やJSONオブジェクトを文字列に変換して、変数として保存することができます。

変数には3つのパラメーターがあります。

  • キー
    変数名を定義します。これは必須のパラメーターです。最大許容文字数は100文字です。
  • 値
    変数が保持する値を定義します。必要に応じて、ウィジェットパッケージで変数の値を定義することができます。最大許容文字数は500文字です。
  • セキュア
    データベースで変数の値を暗号化するかどうかを定義します。
    • true
      入力された値を暗号化する必要がある場合
    • false
      値を暗号化する必要がない場合

変数は、サードパーティアプリケーションへのAPIコールの際に、ドル変数 ${variable_key} として使用できます。ドル変数は、サーバーによって自動的に解析されます。ユーザーがJSONオブジェクトを変数キーに格納した場合、格納された各JSONプロパティ値は、${variable_key.property}の構文でドル変数を使用したAPIコールで直接使用することができます。

より理解を深めるために、以下の図を参照してください。

"variables": [ { { "key" : "url", "secure" : false }, { "key" : "configuration", "secure" : false "value": {"domain":ADManager Plus","probeid":"#45","token":"25","probe":true"} } ]

この図では、以下のようにして、JS APIの変数を関数内で取得することができます。

SDP.invokeURL({
url: "${url}/RestAPI/SearchUser",
method: "post",
params : {AuthToken:"${configuration.token}"},
is_probe_connection : true
})

url変数は${url}として直接取得されます。

設定変数には、ドメイン、プローブID、トークン、プローブといった複数のJSONオブジェクトがキーとして格納されています。トークンのキー値は、${configuration.token} を使用して取得されます。

  • スコープ：この設定はグローバルに適用されます。変数は、すべてのカスタムウィジェット項目に対して構成されます。
  • カスタムウィジェットを削除すると、関連する変数も削除されます。

モジュールの構成

ユーザーは、AssetExplorer Cloudでカスタムウィジェットと一緒にカスタムモジュールを作成できます。

管理者設定はカスタムウィジェットに依存しているため、カスタムモジュールの詳細はカスタムウィジェットを介してのみ更新/削除できます。しかし、JS API、API、またはアプリケーションから、カスタムモジュールのウィジェットにデータを入力して管理することができます。

カスタムモジュールの表示名、表示名の複数形、およびAPI名は、アプリケーション内で一意です。そのため、プラグインマニフェストファイルの各フィールドにもユニークな値を追加してください。

plugin-manifestファイルでカスタムモジュールを構成する際には、以下のようにカスタムモジュール名とフィールド名の前に正しいAPIプレフィックス名が付けられていることを確認してください。

名前 プレフィックス 例

カスタムモジュール名

cm_

"cm_webtab"

テキストフィールド

txt_

"txt_employee_name"

数値フィールド

num_

"num_ID"

日付フィールド

date_

"date_created_date"

ルックアップフィールド

ref_

"ref_vendor"

10進数/通貨/パーセンテージフィールド

dbl_

"dbl_cost"

真偽値

bool_

"bool_resources"

カスタムモジュール用の以下のキーは、プラグインのマニフェストファイルで構成できます。

  • display_typeキー
    作成するカスタムモジュールのタイプを指定するために使用します。
    • web_tab
      Webタブはナビゲーションパネルからアクセスできます。
    • custom_configuration
      設定からのみアクセスできるカスタム設定。
    • hidden
      非表示モジュールはUIからはアクセスできず、API/JS API呼び出しによってのみ管理されます。
  • Webタブとカスタム設定は、AssetExplorerではすべてのユーザーに対してすでに機能しています。しかし、非表示のモジュールは、カスタムウィジェットに固有のものであり、それ以外のユーザーが作成することはできません。
  • display_typeが指定されていない場合、カスタムモジュールはデフォルトで非表示になります。
  • import_enabledキーを使用すると、ユーザーがカスタムモジュールにデータをインポートできるようになります。以下のポインタを使用してキーの値を指定します。
    • true
      データはカスタムモジュールにインポートできます。
    • false
      デフォルト値。カスタムモジュールにデータをインポートすることはできません。

非表示モジュールの場合、import_enabledキーは「false」に設定されます。これは変更できません。

  • report_enabledキーを使用すると、カスタムモジュールに入力されたデータからユーザーがレポートを生成できるようになります。以下のポインタを使用してキーの値を指定します。
    • true
      カスタムモジュールからレポートを生成できます。
    • false
      デフォルト値。カスタムモジュールからレポートを生成することはできません。
  • すべての技術担当者がカスタムモジュールにアクセスできるようにするには、allow_all_techniciansキーを使用してください。以下のポインタを使用してキーの値を指定します。
    • true
      すべての技術担当者がカスタムモジュールにアクセスできます。ウェブタブや非表示モジュールのデフォルト値です。
    • false
      カスタムモジュールへのアクセスは、ユーザーの役割権限に応じてユーザーに許可されます。カスタム設定のデフォルト値です。
"modules":[{ "display_name": "TechVsAuthtokenMap", "display_name_plural": "TechVsAuthtokenMap", "name": "cm_techvsauthtokenmap", "fields": [ { "field_type": "Single Line", "field_key": "txt_idone", "name": "ID", "constraints": { "unique": "true" } }, { "field_type": "Single Line", "field_key": "txt_authtoken", "encrypted": true, "name": "AuthToken" }, { "field_type": "Single Line", "field_key": "txt_usernameadmp", "name": "ADManager Plus User Name" }, { "field_type": "Single Line", "field_key": "txt_useridadmp", "name": "ADManager Plus User Id" }, { "field_type": "Single Line", "field_key": "txt_usernamesdp", "name": "SDP-OD User Name" }, { "field_type": "Single Line", "field_key": "txt_domain", "name": "Domain" } ], "configurations": { "display_type": "hidden", "import_enabled": "false", "report_enabled": "true", "allow_all_technicians": "true" } }]

カスタムウィジェットによって作成されたカスタムモジュールは、［設定］→［開発者スペース］→［カスタムモジュール］にて、モジュールの構成 アイコンで示されます。

モジュールの構成
スコープ：この設定は、各ウィジェット項目に固有です。カスタムウィジェットパッケージが複数のウィジェット項目を持つ場合、ユーザは各ウィジェット項目に固有のカスタムモジュールを構成することができます。

カスタムウィジェットを削除すると、関連するカスタムモジュールも削除されます。

Q.カスタムウィジェットの構成は、AssetExplorer Cloudでも利用可能ですが、追加設定の目的は何ですか？

A.AssetExplorer Cloudは、プローブ、接続、グローバル変数、カスタムモジュールなどの機能を単体で提供します。同じ機能は、ユーザーが簡単にアクセスできるように、カスタムウィジェットにもパッケージされています。管理者は、アプリケーション内の1つのページにすべての機能をまとめることができるので、ユーザーは複数のページを移動することなく、1つのウィジェットからすべての機能にアクセスできます。

plugin-manifest.jsonファイルのサンプル

{ "service": "SDP", "type": "personal", "modules": [ { "display_name": "TeamViewer_session", "display_name_plural": "TeamViewer_sessions", "name": "cm_teamviewerSession", "fields": [ { "field_type": "Single Line", "field_key": "txt_request_id", "name": "request_id" }, { "field_type": "Single Line", "field_key": "txt_technician_id", "name": "technician_id" }, { "field_type": "Single Line", "field_key": "txt_session_code", "name": "session_code", "constraints": { "unique": "true" } }, { "field_type": "Single Line", "field_key": "txt_requester_name", "name": "requester_name" }, { "field_type": "Single Line", "field_key": "txt_requester_id", "name": "requester_id" }, { "field_type": "Date/Time Field", "field_key": "date_created_at", "name": "created_at" }, { "field_type": "Date/Time Field", "field_key": "date_valid_till", "name": "valid_till" }, { "field_type": "Single Line", "field_key": "txt_session_type", "name": "session_type" }, { "field_type": "Single Line", "field_key": "txt_is_report_enabled", "name": "is_report_enabled", "default_value": "true" }, { "field_type": "Single Line", "field_key": "txt_state", "name": "state", "default_value": "Open" } ], "configurations": { "display_type": "hidden" } }, { "display_name": "TeamViewer_connection", "display_name_plural": "TeamViewer_connections", "name": "cm_teamviewerConnection", "fields": [ { "field_type": "Single Line", "field_key": "txt_session_code", "name": "session_code" }, { "field_type": "Single Line", "field_key": "txt_supporter_name", "name": "supporter_name" }, { "field_type": "Date/Time Field", "field_key": "date_start_date", "name": "start_date" }, { "field_type": "Date/Time Field", "field_key": "date_end_date", "name": "end_date" }, { "field_type": "Multi Line", "field_key": "txt_connection_notes", "name": "connection_notes" } ], "configurations": { "display_type": "hidden" } } ], "widgets": [ { "name": "TeamViewer", "description": "A widget that allows technicians to gain remote access to devices across different platforms.", "path_url": "/app/tv_widget.html", "icons": { "30x30": "/app/img/TV_icon.png" }, "locations": [ "request.detail.rightpanel" ] } ], "connections": [ { "connectionLinkName": "Teamviewer", "connectionName": "Teamviewer", "serviceName": "teamviewer", "userAccess": true, "isUserDefinedService": false, "sharedBy": "709641411" } ], "config_popup_required": false }

ウィジェットの検証とパッケージ化

以下のコマンドを実行して、カスタムウィジェットを検証します。

$ zet validate

カスタムウィジェットは、ウィジェットの仕様に従う必要があります。「zet validate」コマンドを実行すると、仕様に違反している箇所があれば特定できます。

モジュールの構成

ウィジェットの仕様に違反している場合は、ウィジェットパッケージをアップロードする前に修正する必要があります。なお、ここでは基本的な構成の検証のみを行います。

以下のコマンドを実行すると，カスタムウィジェットの実行に必要なすべてのファイルとフォルダーを含むzipが作成されます．

$ zet pack

モジュールの構成

zipファイルは、パッケージディレクトリの「dist」フォルダー内にあります。このzipファイルをAssetExplorer Cloudのカスタムウィジェットページにアップロードできます。

カスタムウィジェットの追加

必要な役割：SDAdmin

  1. ［設定］→［開発者スペース］→［カスタムウィジェット］ に移動します。
  2. 「新しいカスタムウィジェット」をクリックしてください。
  3. カスタムウィジェットに名前と説明を入力します。
  4. カスタムウィジェットのステータスを選択します。
    • 有効化
      有効化されたカスタムウィジェットは、それぞれの場所に表示され、ユーザーがアクセスできるようになります。
    • 無効化
      無効化されたカスタムウィジェットは、指定された場所に表示されません。それらは管理者のみがアクセスできます。作成中にカスタムウィジェットを無効にして、すべての依存関係が正常にインストールされるようにすることができます。これは、ユーザーがカスタムウィジェットにアクセスするときのエラーや問題を回避するのに役立ちます。
  5. カスタムウィジェットパッケージを含むzipファイルをアップロードしてください。ファイルサイズは最大5MBまで可能であることに注意してください。
  6. アプリをホストする場所を選択します。
    • Sigmaサーバー
      Zohoの拡張機能開発プラットフォームであるSigmaが提供するサーバー上で、カスタムウィジェットをホストできます。
    • 開発モード
      このモードは主に開発目的で使用され、カスタムウィジェットはローカルマシンのポート5000でホストされます。カスタムウィジェットを開発モードでホストする場合は、サーバーをローカルで実行してセットアップを完了してください。
  7. 「保存」をクリックしてください。

カスタムウィジェットは一覧ビューページに一覧表示されます。

モジュールの構成

サーバーをローカルで実行

サーバーをローカルで実行する前に、次の前提条件を満たしていることを確認してください。

  • 開発者モードは、カスタムウィジェットのホスティング場所として設定されます。
  • サーバーポート5000はローカルマシンで占有されていません。

次のコマンドを実行して、カスタムウィジェットをローカルで実行するHTTPサーバーを起動します。このコマンドは、ローカルマシンのポート5000を利用します。

$ zet run

モジュールの構成

サーバーが正常に動作していることを確認するには、ブラウザーで次のURLを開いてください。
https://127.0.0.1:5000/

'app'フォルダーの下のファイルに加えた変更は、AssetExplorer Cloudの対応するカスタムウィジェットに反映されます。変更内容を確認後、「zet pack」コマンドを使用してカスタムウィジェットをパッケージ化し、そのzipファイルをAssetExplorer Cloudにアップロードできます。