Lightning コンポーネント開発者ガイド
jステップ 5: 新しい経費の入力を有効化する
テキストをフォームに入力して [送信] を押すときに、新しい経費レコードを挿入します。このアクションは、press 属性でボタンコンポーネントに結び付けられます。
次のフローチャートに、新しい経費を作成するときの、アプリケーションでのデータフローを示します。コンポーネント form.cmp で [送信] ボタンをクリックするとデータが取得され、JavaScript コードで処理され、サーバ側のコントローラに送信してレコードとして保存されます。レコードのデータは、前のステップで作成したネストされたコンポーネントに表示されます。
まず、レコードを挿入または更新する新しいメソッドで Apex コントローラを更新します。
-
ExpenseController クラスで、次のコードを getExpenses() メソッドの下に入力します。
1swfobject.registerObject("clippy.codeblock-0", "9"); 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17@AuraEnabled 18public static Expense__c saveExpense(Expense__c expense) { 19 upsert expense; 20 return expense; 21}saveExpenses() メソッドでは、upsert 操作を使用して経費レコードを挿入または更新できます。 -
[送信] ボタンが押されたときに新しい経費レコードを作成するコントローラ側のアクションを作成します。formController.js で、doInit アクションの後に次のコードを追加します。
1swfobject.registerObject("clippy.codeblock-1", "9"); 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17createExpense : function(component, event, helper) { 18 var amtField = component.find("amount"); 19 var amt = amtField.get("v.value"); 20 if (isNaN(amt)||amt==''){ 21 amtField.setValid("v.value", false); 22 amtField.addErrors("v.value", [{message:"Enter an expense amount."}]); 23 } 24 else { 25 amtField.setValid("v.value", true); 26 var newExpense = component.get("v.newExpense"); 27 helper.createExpense(component, newExpense); 28 } 29},//Delimiter for future codecreateExpense では、ui:inputDefaultError で表されるエラーメッセージを追加するデフォルトのエラー処理を使用して、金額項目を検証します。コントローラでは、setValid(false) を使用して入力値を無効化し、setValid(true) を使用してエラーをクリアします。項目検証についての詳細は、「項目の検証」を参照してください。
引数を helper.createExpense() というヘルパー関数に渡すと、saveExpense という Apex クラスがトリガされます。 -
レコードの作成を処理するヘルパー関数を作成します。updateTotal 関数の後に次のヘルパー関数を追加します。
1swfobject.registerObject("clippy.codeblock-2", "9"); 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17createExpense: function(component, expense) { 18 this.upsertExpense(component, expense, function(a) { 19 var expenses = component.get("v.expenses"); 20 expenses.push(a.getReturnValue()); 21 component.set("v.expenses", expenses); 22 this.updateTotal(component); 23 }); 24}, 25 upsertExpense : function(component, expense, callback) { 26 var action = component.get("c.saveExpense"); 27 action.setParams({ 28 "expense": expense 29 }); 30 if (callback) { 31 action.setCallback(this, callback); 32 } 33 $A.enqueueAction(action); 34 } 35createExpense から upsertExpense がコールされ、saveExpense というサーバ側のアクションのインスタンスが定義されて、expense オブジェクトがパラメータとして設定されます。サーバ側のアクションが返された後にコールバックが実行され、レコード、ビュー、およびカウンタが更新されます。$A.enqueueAction(action) により、サーバ側のアクションがアクション実行キューに追加されます。
-
変更を保存し、ブラウザを再読み込みします。Breakfast, 10, ABC Co., Apr 30, 2014 9:00:00 AM と入力してアプリケーションをテストします。日付項目では、日付ピッカーを使用して、日時値を設定することもできます。[送信] ボタンをクリックします。レコードがコンポーネントのビューとレコードの両方に追加され、カウンタが更新されます。
以上でこのステップは完了です。いくつかのコンポーネント、クライアント側およびサーバ側のコントローラ、ヘルパー関数が含まれる簡単な経費追跡アプリケーションを正常に作成できました。これで、アプリケーションは、ビューおよびデータベースを更新するユーザ入力値を受け入れるようになります。また、カウンタは新しいユーザ入力値を入力するたびに動的に更新されます。次のステップでは、インタラクティブにイベントを使用するレイヤを追加する方法について説明します。