こんにちは、アンダーソンです。
今回は上級デベロッパー試験でかなりの確率で出題されていたLightningコンポーネント関連の
Trailheadをやっていきます。
モジュールごとに分けています。
今回はその5です。
Contents
サーバ側コントローラを使用した Salesforce への接続
今回の要件はずばりサーバー側の呼び出しです。
どんな風にやっていくかというと、

クライアント側のコントローラから@AuraEnabledのついたApexメソッドを呼び出します。
この際に注意するのが、JavaScriptからApexの呼び出しも『c.』が着くということです。
cmpからJavaScriptの呼び出しも『c.』でした。
そして、名前空間も『c:』であることに注意しましょう。
覚え方としてはcmpで実行するc.はJavaScriptの呼び出し。コントローラの実行はApexです。
名前空間は:がつくので別で覚えちゃいましょう。
あとはコントローラに渡す値をしっかり把握しておくことが大事です。
今回ハマってしまったのが、単一のsObjectに対して配列を渡していたために、
全然saveができずレスポンスエラーが返ってきていました。
その際のエラーがこちらです。

型が違うからだめよってことですね。
JavaScript見たりApex見たりと大変なLightningコンポーネントさんです。
Visualforceがほんとに簡単な作りだったんだなぁと改めて実感してます。
下記正解コードです。
CampingListController.js
public with sharing class CampingListController {
@AuraEnabled
public static List<Camping_Item__c> getItems(){
return [SELECT Id,Name,Price__c,Quantity__c,Packed__c FROM Camping_Item__c];
}
@AuraEnabled
public static Camping_Item__c saveItem(Camping_Item__c saveRec){
upsert saveRec;
return saveRec;
}
}
campingListController.js
({
clickCreateItem : function(component, event, helper) {
var validCamping = component.find('CampingItem').reduce(function(validsoFar,inputCmp){
inputCmp.showHelpMessageIfInvalid();
return validsoFar && inputCmp.get('v.validity').valid;
},true );
if (validCamping) {
var newCamp = component.get("v.newItem");
var campList = component.get("v.items");
var addCamp = JSON.parse(JSON.stringify(newCamp));
campList.push(addCamp);
component.set("v.items",campList);
helper.createItem(component,addCamp);
component.set("v.newItem",{ 'sobjectType': 'Camping_Item__c',
'Name': '',
'Quantity__c': 0,
'Price__c': 0,
'Packed__c': false});
}
},
})
campingListHelper.js
({
createItem : function(component,item) {
var action = component.get("c.saveItem");
action.setParams({
"saveRec" : item
});
action.setCallback(this, function(response){
var state = response.getState();
if ( state === "SUCCESS" ) {
var items = component.get("v.items");
console.log(response.getReturnValue());
items.push(response.getReturnValue());
component.set("v.items", items);
} else {
var errors = response.getError();
console.log(errors[0].message);
}
});
$A.enqueueAction(action);
}
})
まとめ
今回使ったのはこちら。
- controller コンポーネントのApexコントローラの指定。ここはVFと変わらない。でもこれを忘れると一生呼び出しできないので注意。
- @AuraEnabled付きApexメソッド publicもしくはglobalである必要があり、必ずstaticです。
- c. サーバの呼び出しに使用。c.メソッド名で呼び出し。
結構時間かかりましたが、かなり理解が深まってきました。
コメント