モーダルボックスの操作方法

お知らせ：当社は、お客様により充実したサポート情報を迅速に提供するため、本ページのコンテンツは機械翻訳を用いて日本語に翻訳しています。正確かつ最新のサポート情報をご覧いただくには、本内容の英語版を参照してください。

invoke メソッドでモーダルボックスを開く

指定した場所に拡張機能の新しい iframe インスタンスを作成します。


zohoprojects.invoke('modal.create',modal_location);

引数名	データ型	説明
operation	string	'modal.create' - モーダルボックスを作成または開きます。
modal_location	Object	呼び出す必要がある HTML ファイルの相対パス。例: {'url':'/app/choosefiles.html'};

ウィジェット ID と文字列定数が出力として返されます。

invoke メソッドでモーダルボックスを閉じる

指定した場所で既に開かれている拡張機能の iframe インスタンスを閉じます。


zohoprojects.invoke('modal.close',modalInfo.widgetID);

引数名	データ型	説明
operation	string	'modal.close' - 開いているモーダルボックスを閉じます。
widgetID	Object	'modal.create' の出力として返された widgetID を指定します。

invoke メソッドでモーダルボックスのサイズを変更する

拡張機能の iframe インスタンスを指定したサイズに変更します。

zohoprojects.invoke('modal.resize', resize_modal);

引数名	データ型	説明
action	string	'modal.resize' - モーダルボックスのデフォルトサイズを拡大します。
resize_modal	Object	呼び出す必要がある HTML ファイルの相対パス。例: {'width' : 600, 'height' : 400}; 許可される最小・最大高さ: 380px ～ 450px。許可される最小・最大幅: 550px ～ 950px。

ウィジェット ID と文字列定数が出力として生成されます。

invoke メソッドで添付ファイルピッカーを閉じる

指定した場所でファイルを添付するために開かれた拡張機能の iframe インスタンスを閉じます。


zohoprojects.invoke('attachment_picker.close');

instance

特定のウィジェットのインスタンスを作成します。



zohoprojects.instance(widget_ID);

引数名	データ型	説明
ID	string	invoke メソッドによって生成されたウィジェット ID。

emit

現在の場所からデータを送信します。



zohoprojects.emit('KeyforMyListener', data);

on

emit メソッドから送信されたデータを待ち受けて受信します。



zohoprojects.on('KeyforMyListener', data);

Assume the following sample コード block is called from the parent file '/apps/index.html' and '/apps/file.html' is the child file.


var modal_location={'url':'/apps/file.html'};
zohoprojects.invoke('modal.create',modal_location).then(function(modalInfo){
var modalInstance=zohoprojects.instance(modalInfo.widgetID);
modalInstance.on('modal.opened', function(){ /* This code listens for the status 'modal.opened' from the child HTML - file.html */
var data = {org: '1234'};
modalInstance.emit('submit', data);
});/* This code throws a status 'submit' along with an object to the child HTML - file.html*/
modalInstance.on('submitted',function(data){ 
/*This code listens for a status with the key 'submitted' from the child HTML*/
zohoprojects.invoke('modal.close', modalInfo.widgetID);
});

次のサンプルコードブロックを「差出人」とし、子ファイルを「/apps/file.html」、親ファイルを「/apps/index.html」とします。



var filedetails = {'filename': 'abc'};
zohoprojects.on('submit', function (data) {});
/* このコードは、親ファイル index.html からキー 'submit' のイベントを待ち受けます */
zohoprojects.emit('submitted', filedetails); 
/* このコードは、オブジェクトを添えてステータス 'submitted' を親ファイル index.html に送信します */

注意

成功または失敗のアラートを設定して表示します。


zohoprojects.invoke('alert', {
                            type: 'success',  //or 'failure'
                            data: 'Permission granted successfully'
                        });

完了トランジション

タスクトランジションを完了として設定します。


zohoprojects.invoke('completeTaskTransition');

トランジションを閉じる

タスクトランジションのポップアップを閉じます。


zohoprojects.invoke('closeTransition');