Aura コンポーネントの基本その5【Trailhead】

こんにちは、アンダーソンです。
今回は上級デベロッパー試験でかなりの確率で出題されていたLightningコンポーネント関連の
Trailheadをやっていきます。

モジュールごとに分けています。
今回はその5です。

サーバ側コントローラを使用した 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.メソッド名で呼び出し。

結構時間かかりましたが、かなり理解が深まってきました。

その他の開発に関する記事はこちらです。

Developerも含めた試験問題にチャレンジしてみましょう。