SFDC：AngularJSでファイル添付ができるVFページをつくってみました

AngularJSでファイル添付ができるVFページをつくってみました。

入力画面

f:id:tyoshikawa1106:20160127025407p:plain

確認画面

f:id:tyoshikawa1106:20160127025425p:plain

保存実行結果

f:id:tyoshikawa1106:20160127025442p:plain:w300

Thanks画面

f:id:tyoshikawa1106:20160127025516p:plain

ちゃんと保存処理が実行されていて
f:id:tyoshikawa1106:20160127025606p:plain

添付ファイルも登録できています。
f:id:tyoshikawa1106:20160127025627p:plain

エラーメッセージはこんな感じです。
f:id:tyoshikawa1106:20160127025708p:plain:w400

開発のポイント

共通変数

AngularJSでは別々のコントローラで共通で利用できる変数は、factoryで用意できます。

var app = angular.module("Controllers", []);
        
// 共通変数:Account
app.factory('Wrapper', function() {
    return {
        Account : {
            Name : 'salesforce.com',
            AccountNumber : 'SF-001'
        },
        Attachment : {
            FileName : '',
            FileSize : '',
            UploadFile : ''
        }
    };
});

inputFileと複数ページ

VFページの開発にはapex:inputFileタグが用意されています。reRenderが利用できなくなるなどの制約がありますが、一番の問題はapex:inputFileで選択したファイル情報をApexクラス側の変数に保持して、画面遷移などの操作を行うとビューステートエラーが発生してしまうことです。

今回のように複数のページにまたがってファイル情報を保持したい場合は、Apex側の変数に保持するのを諦めてJS側で対応する方が良さそうです。