tyoshikawa1106のブログ

- Force.com Developer Blog -

SFDC:Lightningアプリ開発『データ作成』処理の流れ

f:id:tyoshikawa1106:20141031223253p:plain

Lightningアプリで取引先などのオブジェクトのデータを作成する処理について勉強しました。Lightning Components Developer's Guideに記載されたQuick Startのサンプルコードにもデータ作成の処理があったのですが、その部分がイマイチ理解できなかったので、もっとシンプルな処理で試してみました。


サンプルコードはこちらになります。


ボタンクリック時に画面で入力した値をつかって取引先のレコードを作成するシンプルな機能です。ファイル構成は次のとおりです。

  • LightningAccountCreateApp.app
  • LightningAccountCreateApp.css
  • LightningAccountCreateCmp.cmp
  • LightningAccountCreateCmpController.js
  • LightningAccountCreateCmpHelper.js
  • LightningAccountCreateController.cls


上の2つのファイルはコンポーネントを呼び出すアプリケーション側のファイルなのであまり気にする必要ありません。残りのファイルがコンポーネント関係のファイルとApexクラスになります。このサンプルを元にLightningでデータ登録する処理の流れを説明したいと思います。

データ作成処理の流れ

①LightningAccountCreateCmp.cmp

まずコンポーネントからです。コンポーネントでは『controller=』で使用するApexクラスを宣言します。RemoteActionのように呼び出し時に宣言するわけでないので忘れずに宣言しましょう。


『aura:attribute』タグで登録用のオブジェクト変数を宣言します。『aura:attribute』タグは『apex:attribute』タグと違い呼び出し元からパラメータを受け取るだけではなくcontroller.jsなどのJS側の処理結果を受け取るのにも使用します。『default=』で初期値をセットすることも可能です。

f:id:tyoshikawa1106:20141031225244p:plain


入力用のテキストボックスやボタンは次のコードで表示できます。

f:id:tyoshikawa1106:20141031225604p:plain


『value="{!v.newAccount.Name}"』の部分がaura:attributeで宣言したオブジェクト変数になります。『newAccount』はaura:attributeの『name=』で宣言した値になります。sobjectTypeがAccountであることを宣言しているので『newAccount.Name』というようにAccountの各項目を使用することができます。


先頭の『v.』ですがおそらくコンポーネント内で宣言した変数にアクセスする場合に付ける必要があります。もう一つ『c.』というのもあるのですが、こちらはJS側やApexクラスで宣言したものにアクセスする際に付ける必要があるみたいです。


『ui:button』の『press="{!c.createAccount}"』でボタン押下時にcontroller.jsのcreateAccountを呼び出す処理となります。

②LightningAccountCreateCmpController.js

LightningのJS側の処理を記載する『controller.js』です。aura:component内ではscriptタグは使用できずJS側の処理は必ずこちらで行うようになっています。今回のサンプルではボタン押下時にcreateAccountが呼び出されて処理を実行するようになっています。

f:id:tyoshikawa1106:20141031230506p:plain


LightningのJSファイルは『controller.js』の他に『helper.js』が用意されています。『helper.createAccount(component);』と記載してある箇所で『helper.js』の処理を呼び出しています。細かい処理はこの『helper.js』の方で行うみたいです。

③LightningAccountCreateCmpHelper.js

この中で取引先の登録処理を行っています。

f:id:tyoshikawa1106:20141031233600p:plain


『component.get()』でコンポーネントの変数にアクセスできます。

var newAccount = component.get("v.newAccount");

aura:idを指定して値を取得したい場合は次のようになります。

var nameField = component.find('acc-name');
var accountName = nameField.get('v.value');

これで変数『accountName』に入力した値がセットされていることが確認できると思います。今回のサンプルでは行っていませんが、入力時の必須判定などで使用すると思います。


次の処理で同じコンポーネント内にある取引先登録処理を呼び出しています。{}内にある『console.log(a);』の処理は登録処理が終了後に実行されます。(同じコンポーネント内のものにアクセスする場合は『this』をつけるみたいです。)

this.saveAccount(component, newAccount, function(a) {
    console.log(a);
});


これで呼び出す処理の内容がこちらです。

f:id:tyoshikawa1106:20141031232019p:plain

まず『component.get("c.saveAccount")』でApexクラスから呼び出す処理を宣言します。

var action = component.get("c.saveAccount");


次に『action.setParams』の部分で引数として使用する変数に値をセットします。

action.setParams({
    "account": account
});


コールバックの処理も記載できます。今回はログを表示しているだけですが、必要に応じて使用することになると思います。

if (callback) {
    action.setCallback(this, callback);
}


引数やコールバックの指定が済んだら『$A.enqueueAction』で実際に処理を実行します。

$A.enqueueAction(action);

④LightningAccountCreateController.cls

『$A.enqueueAction(action);』で実行されるApexクラスの処理は次のとおりです。今回はInsertとreturnのみ行っています。戻り値にはsObject型を指定しても問題ありませんでした。@AuraEnabledとstaticの宣言は忘れないようにしましょう。

f:id:tyoshikawa1106:20141031232708p:plain


これで取引先オブジェクトにデータが作成されることを確認できると思います。ちょっと長くなりましたが、Lightningアプリでのデータ作成処理はだいたいこんな感じでできると思います。