LoginSignup
5
0

More than 1 year has passed since last update.

ほぼSalesforce !! Qiitan と カレンダーと 3年目のWebエンジニアAdvent Calendar 2022Day 13
@takaHALin株式会社エイチームライフデザイン

Salesforce Canvas + JSforceでレコードの作成・検索をやってみる

Last updated at Posted at 2022-12-13

はじめに

キャンバスアプリケーションの作成、イベントの作成を前回まで行いました。
今回はキャンバスアプリケーションに渡ってきた認証情報を使って
JSforceでSalesforceの取引先レコードを作成・検索をしようと思います。

検証につかう環境は、trailheadのハンズオン環境です。
出てくるデータも初期のデモデータになります。

前提条件

  • キャンバスアプリケーションの設定をした接続アプリケーションがあること
  • キャンバスアプリケーションとして呼び出すWebサイトがあること

JSforceとは

JavaScriptからSalesforceのAPIを簡易的に実行できるライブラリです。
npmとしても公開されているので、AWS Lambda（Node） + JSforceで利用できたりと非常に便利です。

今日使うコードの完成系はこちら

jsforce.min.jsをダウロードして配置しています。

コードはGitHubにもおいてます。

index.html

<html>
  <head>
    <script src="./js/canvas-all.js"></script>
    <script src="./js/jsforce.min.js"></script>
  </head>
  <body>
    <h1>埋め込みテスト</h1>
    <div id="js-canvasArea">表示エリア</div>
    <button d="js-insertBtn">取引先作成ボタン</button>
    <script>
      Sfdc.canvas.client.refreshSignedRequest(function(data) {
        if (data.status === 200) {

          const signedRequest =  data.payload.response;
          const part = signedRequest.split('.')[1];
          const obj = JSON.parse(Sfdc.canvas.decode(part));
          const parseSignedRequest = Sfdc.canvas.decode(part);
          const conn = new jsforce.Connection({ signedRequest: parseSignedRequest });
           // 作成
          const insertBtn = document.getElementById('js-insertBtn');
          insertBtn.addEventListener('click', function () {
            conn.sobject('Account').create({ Name : '株式会社 Salesforce Canvas' }, function(err, ret) {
              if (err || !ret.success) { return console.error(err, ret); }
              console.log("Created record id : " + ret.id);
            });
          });

          // 検索
          conn.query('SELECT Id, Name FROM Account LIMIT 1', function(err, res) {
            if (err) {
              console.error(err)
            }
            const canvasArea = document.getElementById('js-canvasArea');
            canvasArea.innerHTML = JSON.stringify(res);
          });
        }
      });
    </script>
  </body>
</html>

やってみる

JSforceでは、公式でCanvasを使ったサンプルが紹介されているのでそれベースで今回進めていきます。

JSforceの準備

今回は、npmを利用しないのでGitHubからjsforce.min.jsをダウンロードします。

ダウンロードしたものをプロジェクトに配置し、スクリプト読み込みを追加しました。

index.html

<html>
  <head>
    <script src="./js/canvas-all.js"></script>
+   <script src="./js/jsforce.min.js"></script>
  </head>
  <body>
    <h1>埋め込みテスト</h1>
    <div id="js-canvasArea">表示エリア</div>
    <button d="js-insertBtn">取引先作成ボタン</button>
    <script>
      Sfdc.canvas.client.refreshSignedRequest(function(data) {
        if (data.status === 200) {

          const signedRequest =  data.payload.response;
          const part = signedRequest.split('.')[1];
          const parseSignedRequest = Sfdc.canvas.decode(part);
          const conn = new jsforce.Connection({ signedRequest: parseSignedRequest });
           // 作成
          const insertBtn = document.getElementById('js-insertBtn');
          insertBtn.addEventListener('click', function () {
            conn.sobject('Account').create({ Name : '株式会社 Salesforce Canvas' }, function(err, ret) {
              if (err || !ret.success) { return console.error(err, ret); }
              console.log("Created record id : " + ret.id);
            });
          });

          // 検索
          conn.query('SELECT Id, Name FROM Account LIMIT 1', function(err, res) {
            if (err) {
              console.error(err)
            }
            const canvasArea = document.getElementById('js-canvasArea');
            canvasArea.innerHTML = JSON.stringify(res);
          });
        }
      });
    </script>
  </body>
</html>

認証

SalesforceのAPIは基本

  • 接続アプリケーションのキーや、ユーザのセキュリティトークンで認証
  • 認証でトークンを取得
  • 取得したトークンでAPIを実行

というステップになっているのですが

接続アプリケーションのキーや、ユーザのセキュリティトークンで認証ここの部分をCanvas + JSforceを使っていることで
意識することなくキャンバスアプリケーション側でAPIを実行できるのはいいと思います。

index.html

<html>
  <head>
    <script src="./js/canvas-all.js"></script>
    <script src="./js/jsforce.min.js"></script>
  </head>
  <body>
    <h1>埋め込みテスト</h1>
    <div id="js-canvasArea">表示エリア</div>
    <button d="js-insertBtn">取引先作成ボタン</button>
    <script>
      Sfdc.canvas.client.refreshSignedRequest(function(data) {
        if (data.status === 200) {

          const signedRequest =  data.payload.response;
          const part = signedRequest.split('.')[1];
+         const parseSignedRequest = Sfdc.canvas.decode(part);
+         const conn = new jsforce.Connection({ signedRequest: parseSignedRequest });
        }
      });
    </script>
  </body>
</html>

取引先レコードの作成

取引先作成ボタンというボタンを作成し、押すと株式会社 Salesforce Canvasというレコードが取引先に作成されるようにしました。

index.html

<html>
  <head>
    <script src="./js/canvas-all.js"></script>
    <script src="./js/jsforce.min.js"></script>
  </head>
  <body>
    <h1>埋め込みテスト</h1>
    <div id="js-canvasArea">表示エリア</div>
+   <button d="js-insertBtn">取引先作成ボタン</button>
    <script>
      Sfdc.canvas.client.refreshSignedRequest(function(data) {
        if (data.status === 200) {

          const signedRequest =  data.payload.response;
          const part = signedRequest.split('.')[1];
          const parseSignedRequest = Sfdc.canvas.decode(part);
          const conn = new jsforce.Connection({ signedRequest: parseSignedRequest });
          // 作成
+         const insertBtn = document.getElementById('js-insertBtn');
+         insertBtn.addEventListener('click', function () {
+         conn.sobject('Account').create({ Name : '株式会社 Salesforce Canvas' }, function(err, ret) {
+           if (err || !ret.success) { return console.error(err, ret); }
+             console.log("Created record id : " + ret.id);
+           });
+         });
        }
      });
    </script>
  </body>
</html>

今回は作成するレコードが１件でしたが、複数件作成する場合は公式サンプルにもあるように

createに複数のレコード情報を渡したり

// Multiple records creation
conn.sobject("Account").create([
  { Name : 'My Account #1' },
  { Name : 'My Account #2' }
],
function(err, rets) {
  if (err) { return console.error(err); }
  for (var i=0; i < rets.length; i++) {
    if (rets[i].success) {
      console.log("Created record id : " + rets[i].id);
    }
  }
  // ...
});

大量のレコードを作成したい場合は、BulkAPIが有効で

公式サンプルの以下のように操作したり、CSVを読み込んでCSVの内容を、BulkAPIに利用することもできます。

conn.bulk.pollTimeout = 25000; // Bulk timeout can be specified globally on the connection object
conn.bulk.load("Account", "insert", accounts, function(err, rets) {
  if (err) { return console.error(err); }
  for (var i=0; i < rets.length; i++) {
    if (rets[i].success) {
      console.log("#" + (i+1) + " loaded successfully, id = " + rets[i].id);
    } else {
      console.log("#" + (i+1) + " error occurred, message = " + rets[i].errors.join(', '));
    }
  }
  // ...
});

動かしてみる

作成ボタンを押す

Edge-Communications-Salesforce.png

コンソールに作成したレコードIDがでていることを確認

スクリーンショット 2022-12-14 1.12.56.png

レコードIDをもとに取引先詳細ページにアクセス！

目的のレコードが作成されていました！

株式会社-Salesforce-Canvas-Salesforce.png

取引先レコードの検索

SOQLを実行して、取引先レコードを一件取得し画面の表示エリアという要素に表示させます。

index.html

<html>
  <head>
    <script src="./js/canvas-all.js"></script>
    <script src="./js/jsforce.min.js"></script>
  </head>
  <body>
    <h1>埋め込みテスト</h1>
    <div id="js-canvasArea">表示エリア</div>
    <button d="js-insertBtn">取引先作成ボタン</button>
    <script>
      Sfdc.canvas.client.refreshSignedRequest(function(data) {
        if (data.status === 200) {

          const signedRequest =  data.payload.response;
          const part = signedRequest.split('.')[1];
          const parseSignedRequest = Sfdc.canvas.decode(part);
          const conn = new jsforce.Connection({ signedRequest: parseSignedRequest });
           // 作成
          const insertBtn = document.getElementById('js-insertBtn');
          insertBtn.addEventListener('click', function () {
            conn.sobject('Account').create({ Name : '株式会社 Salesforce Canvas' }, function(err, ret) {
              if (err || !ret.success) { return console.error(err, ret); }
              console.log("Created record id : " + ret.id);
            });
          });

          // 検索
+         conn.query('SELECT Id, Name FROM Account LIMIT 1', function(err, res) {
+           if (err) {
+             console.error(err)
+           }
+           const canvasArea = document.getElementById('js-canvasArea');
+           canvasArea.innerHTML = JSON.stringify(res);
+         });
        }
      });
    </script>
  </body>
</html>

動かしてみる

無事１件レコードが取得できました。

株式会社-Salesforce-Canvas-Salesforce (1).png

今回はSOQLでしたが、SalesforceのレコードIDがキャンバス側でわかっているのであれば

公式のサンプルにもあるように、SOQLを書かずにレコードを取得することができます。

// Single record retrieval
conn.sobject("Account").retrieve("0017000000hOMChAAO", function(err, account) {
  if (err) { return console.error(err); }
  console.log("Name : " + account.Name);
  // ...
});

最後に

JSforceでのレコードの操作、キャンバスアプリケーションでのイベント操作をいままでやってきました。
やってみると非常に強力で
Salesforceは使ってるけど、一部請求系のような複雑なシステムは外部の自前のシステムを使っている
みたいな場合に Salesforce の Canvasは活躍するのではないでしょうか？

次回はAuraでのCanvasの使い方を書いてみようと思います。

参考

5
0
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
Sign upLogin
5
0