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