【Salesforce】AJAX Toolkitを使う

【Salesforce】AJAX Toolkitを使う

Visualforceページでレコードを扱う場合、コントローラを使うのが一般的ですね。

個人的にはそれが便利だと思うのですが、コントローラを使用せずにVisualforceページを作って欲しいという要望がありました。

その割にStandardControllerのみでは実現できない要求をされてしまったため、Javascriptで実現することにしました。

具体的には、AJAX ToolKitを利用します。
https://developer.salesforce.com/docs/atlas.en-us.ajax.meta/ajax/sforce_api_ajax_introducing.htm

Visualforceページでの使い方はこちらに書いてあります。
https://developer.salesforce.com/docs/atlas.en-us.206.0.ajax.meta/ajax/sforce_api_ajax_vf_sample.htm

とりあえずコードです。

<apex:page >
    
  <!-- connection.jsをインクルードする -->
  <script src="../../soap/ajax/40.0/connection.js" type="text/javascript"></script>

  <!-- 実際の処理 -->
  <script type="text/javascript">

    // レコードを取得する
    function selectAccountList(){
    
        var result;
        var query;
        var callback;
        
        // クエリを作成する
        query = '';
        query += ' select ';
        query += '     Id, ';
        query += '     Name ';
        query += ' from ';
        query += '  Account ';
        
        // クエリを発行する
        result = sforce.connection.query(query);
        
        // 成功時処理を行う
        success(result.records);
    }

    // 成功時処理
    function success(records){

        var i;

        alert(records.length + '件');
        for(i = 0; i < records.length; i++){

            var id;
            var name;

            id = records[i].Id;
            name = records[i].Name;
            
            // 何らかの処理
        }
    }
    
    // 取引先を取得する
    window.onload = function(){
        
        // セッションIDを設定する
        sforce.connection.sessionId='{!GETSESSIONID()}';

        // 取引先を取得する
        selectAccountList();
    };
    
  </script>
</apex:page>

ざっくりとこんな流れです。

1. connection.jsをインクルードする

2. セッションIDを設定する

3. クエリを発行する

4. 取得したレコードを処理する

エラーの場合はExceptionが飛ぶようです。

 

コールバックを設定することで非同期でも実行することが出来ます。

<apex:page >
    
  <!-- connection.jsをインクルードする -->
  <script src="../../soap/ajax/40.0/connection.js" type="text/javascript"></script>

  <!-- 実際の処理 -->
  <script type="text/javascript">

    // レコードを取得する
    function selectAccountList(){
    
        var query;
        var callback;
        
        // クエリを作成する
        query = '';
        query += ' select ';
        query += '     Id, ';
        query += '     Name ';
        query += ' from ';
        query += '  Account ';
        
        // クエリを発行する
        sforce.connection.query(
           query,
           {
               // 成功時処理
               onSuccess: success,
               // エラー時処理
               onFailure: failure,
               // コールバックで使用する値
               source: {}
           });
    }

    // 成功時処理
    function success(queryResult, source){

        var i;

        alert(queryResult.records.length + '件');
        for(i = 0; i < queryResult.records.length; i++){

            var id;
            var name;

            id = queryResult.records[i].Id;
            name = queryResult.records[i].Name;
            
            // 何らかの処理
        }
    }
    
    // エラー時処理
    function failure(error, source){

        alert('エラー：' + error.faultstring);
    }

    // 取引先を取得する
    window.onload = function(){
        
        // セッションIDを設定する
        sforce.connection.sessionId='{!GETSESSIONID()}';

        // 取引先を取得する
        selectAccountList();
    };
    
  </script>
</apex:page>

こちらはエラーが発生した場合はonFailureの処理が実行されます。

エラーの処理はこちらの方が便利そうです。

 

使ってみればすぐに分かると思います。

たまにセッションIDを設定し忘れることがあるので注意が必要ですね。