LoginSignup
11
11

More than 5 years have passed since last update.

onClick JavaScriptボタンをできるだけコピペでLEXに移行する【リストボタン編】

Posted at

先日、詳細画面のカスタムボタンについて同じ記事を書きました。

Ajax Toolkitを使用したonClick JavaScriptボタンをできるだけコピペでLEXに移行する - Qiita

今度はリストビューのカスタムボタンについて考えてみましょう。

例としてSalesforceのヘルプにあるサンプル「一括削除を実行するためのカスタムボタンの作成」を移行してみましょう。
よくあるリストビューでチェックしたレコードを一括削除するボタンです。

元のボタン

マニュアルのサンプルのインデントをきれいにして、取引先の一括削除に変更しています。

{!REQUIRESCRIPT("/soap/ajax/44.0/connection.js")} 

var records = {!GETRECORDIDS( $ObjectType.Account )}; 


if (records[0] == null) { 
  alert("Please select at least one record.")
} else { 
  var errors = []; 
  var result = sforce.connection.deleteIds(records); 
  if (result && result.length) { 
    var numFailed = 0; 
    var numSucceeded = 0; 
    for (var i = 0; i < result.length; i++) { 
      var res = result[i]; 
      if (res && res.success == 'true'){ 
        numSucceeded++; 
      } else { 
        var es = res.getArray("errors"); 
        if (es.length > 0) { 
          errors.push(es[0].message); 
        } 
        numFailed++; 
      } 
    } 
    if (numFailed > 0){ 
      alert("Failed: " + numFailed + "\nSucceeded: " + numSucceeded + " \n Due to: " + errors.join("\n")); 
    } else { 
      alert("Number of records deleted: " + numSucceeded); 
    } 
  } 
  window.location.reload(); 
}

LEXに移行

前とほぼ同じで、以下のようなテンプレVisualforceにJavaScriptのコードをコピペします。
詳細画面のボタンと違ってrecordSetvarを設定しています。

<apex:page standardController="Account" recordSetvar="accounts" sidebar="false" tabStyle="Account">
    <script type="text/javascript">
    var __sfdcSessionId = '{!GETSESSIONID()}';
    </script>
    <script src="../../soap/ajax/44.0/connection.js" type="text/javascript"></script>
    <script src="../../soap/ajax/44.0/apex.js" type="text/javascript"></script>
    <script type="text/javascript">
// ここに元のボタンのJavaScriptのコード
    </script>
</apex:page>

ただし、一部そのままでは動かないので、修正します。

GETRECORDIDSのところ

var records = {!GETRECORDIDS( $ObjectType.Account )}; 

は、以下に変更します。

var records = "<apex:repeat value="{!selected}" var="a">{!a.Id},</apex:repeat>".slice(0,-1).split(',');

選択したレコードは{!selected}で取れます。
とりあえず適当に動くようにしていますが、Apexで文字列作った方が安全かとは思います。

window.location.reload()のところ

window.location.reload(); 

は、以下に変更します。

history.back();

Visualforceページに遷移しちゃうのでリストビュー画面に戻しています。

完成したVisualforceページ

こうなります。

<apex:page standardController="Account" recordSetvar="accounts" sidebar="false" tabStyle="Account">
    <script type="text/javascript">
    var __sfdcSessionId = '{!GETSESSIONID()}';
    </script>
    <script src="../../soap/ajax/44.0/connection.js" type="text/javascript"></script>
    <script src="../../soap/ajax/44.0/apex.js" type="text/javascript"></script>
    <script type="text/javascript">
var records = "<apex:repeat value="{!selected}" var="a">{!a.Id},</apex:repeat>".slice(0,-1).split(',');

if (records[0] == null) { 
  alert("Please select at least one record.")
} else { 
  var errors = []; 
  var result = sforce.connection.deleteIds(records); 
  if (result && result.length) { 
    var numFailed = 0; 
    var numSucceeded = 0; 
    for (var i = 0; i < result.length; i++) { 
      var res = result[i]; 
      if (res && res.success == 'true'){ 
        numSucceeded++; 
      } else { 
        var es = res.getArray("errors"); 
        if (es.length > 0) { 
          errors.push(es[0].message); 
        } 
        numFailed++; 
      } 
    } 
    if (numFailed > 0){ 
      alert("Failed: " + numFailed + "\nSucceeded: " + numSucceeded + " \n Due to: " + errors.join("\n")); 
    } else { 
      alert("Number of records deleted: " + numSucceeded); 
    } 
  } 
  history.back();
}
    </script>
</apex:page>

ボタンの設定

ボタンの設定はこんな感じ

image.png

動作例

こんな感じに動く。

massdeletelex.gif

終わりに

でも、移行できるものはLightningリストビューアクションに移行した方がいいと思いますよ。

11
11
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
11
11