810 views(since 2013/10/08)

Office 用アプリ(Apps for Office)でデモアプリを作る -バインド編-

イメージ図

以下のように赤枠のボタンを押すと、
Webからデータを取得して、請求書に表示させるOffice用アプリを作成しました。

apps_for_office_binding_a003

はじめに

今回は、バインド機能を使って”Excel Sheet” と”Office用アプリ”を連結させます。
バインド機能には、「Text」、「Matrix」、「Table」の3種類の方法があります。

今回は「Matrix」を使います。

以下がサンプルになります。

【JavaScript】

// この関数は、アプリがホスト アプリケーションとの対話を開始する準備が完了したときに実行されます
// これにより、ボタンにクリック ハンドラーを追加する前に DOM の準備が完了します
Office.initialize = function (reason) {

};

// テキスト ボックスのデータをドキュメントの現在の選択範囲に書き込みます
function setData(elementId) {
    Office.context.document.setSelectedDataAsync($(elementId).val());
}

// ドキュメントの現在の選択範囲からデータを読み取り、テキスト ボックスに表示します
function getData(elementId) {
    Office.context.document.getSelectedDataAsync(Office.CoercionType.Text,
    function (result) {
        if (result.status === 'succeeded') {
            $(elementId).val(result.value);
        }
    });
}

// Bind to the named range
// 名前付き範囲にバインド
function bindNamedItem() {
    Office.context.document.bindings.addFromNamedItemAsync("myRange", "matrix", { id: 'myMatrix' }, function (asyncResult) {
        //var message = ('Added new binding with type: ' + asyncResult.value.type + ' and id: ' + asyncResult.value.id);
        //write(message);
        //addEventHandler();
    }
    );
}

// Bind to the named range
// バインドにデータをセット
function bindNamedItemValue() {
    // 暫定版:あとでSQLのデータをセットするように改良します
    Office.select("bindings#myMatrix").setDataAsync(
        [['1', 'ファイル権限デザイナー', '2', '90,000', '81,000'],
         ['1', 'ファイル権限デザイナー インシデント', '5', '20,000', '18,000'],
         ['1', 'ファイル権限デザイナー 年間保守', '1', '45,000', '40,500']], 
        { coercionType: "matrix" }, function (asyncResult) {
        if (asyncResult.status == "failed") {
            write('Error: ' + asyncResult.error.message);
        } else {
            write('Bound data: ' + asyncResult.value);
        }
    });
}

// Write to the UI 
// UIへの書き込み
function write(message) {
    document.getElementById('message').innerHTML += message + '
' };

プログラムを実行してみよう!

1. Visual Studio2012からデバック実行(F5)します。Excel がVisusal Studio2012から起動されます。
※Excelは弊社の”請求書テンプレート”を使っています。

 右側に Office 用アプリ(Webブラウザー)が表示されています。

※以下は”請求書印刷画面”です。(”Dataシート”からセル参照してデータを表示しています。)
 apps_for_office_binding_a000

2. ボタン(バインドJavaScript)を押すと Excel 側とOffice用アプリ側をバインドで連結します。

※以下は”Dataシート”画面です。
 apps_for_office_binding_a001

3.ボタン(データ貼り付けJavaScript) を押すと、”Data シート”にバインドされている BindingID「myMatrix」へデータがセットされました。

※以下は”Dataシート”画面です。
 apps_for_office_binding_a002

4. 無事、請求書側も表示されました。

※以下は”請求書印刷画面”です。(”Dataシート”からセル参照してデータを表示しています。)
 apps_for_office_binding_a003

“Dataシート”のバインドエリア「myBinding」にデータがセットされました。
次回は、Web Azure+SQL Azure等 全体をまとめ上げて仕上げていきます。

参考URL
Office 用アプリのコード サンプル
http://msdn.microsoft.com/ja-jp/library/jj220075.aspx
Binding オブジェクト (Office 用アプリ)
http://msdn.microsoft.com/ja-jp/library/fp161045.aspx
Bindings オブジェクト (Office アプリ)
http://msdn.microsoft.com/ja-jp/library/fp160966.aspx

Filed Under: Office Add-ins

Tags:

About the Author

Leave a Reply




If you want a picture to show with your comment, go get a Gravatar.