この文章は Salesforce 機械翻訳システムを使用して翻訳されました。詳細はこちらをご参照ください。
英語に切り替える

Lightning コンポーネント開発者ガイド

Clouds with binary code floating aboveCloud with binary code floating above

No Results

Search Tips:

  • Please consider misspellings
  • Try different search keywords
PDF

ステップ 5: 新しい経費の入力を有効化する

テキストをフォームに入力して [送信] を押すときに、新しい経費レコードを挿入します。このアクションは、press 属性でボタンコンポーネントに結び付けられます。
まず、レコードを挿入または更新する新しいメソッドで Apex コントローラを更新します。
  1. ExpenseController クラスで、次のコードを getExpenses() メソッドの下に入力します。 
    1swfobject.registerObject("clippy.codeblock-0", "9");@AuraEnabled
2public static Expense__c saveExpense(Expense__c expense) {
3    upsert expense;
4    return expense;
5}
    saveExpenses() メソッドでは、upsert 操作を使用して経費レコードを挿入または更新できます。

    upsert 操作についての詳細は、『Apex コード開発者ガイド』を参照してください。

    メモ

  2. [送信] ボタンが押されたときに新しい経費レコードを作成するコントローラ側のアクションを作成します。formController.js で、doInit アクションの後に次のコードを追加します。 
    1swfobject.registerObject("clippy.codeblock-1", "9");createExpense : function(component, event, helper) {
2    var amtField = component.find("amount");
3    var amt = amtField.get("v.value");
4    if (isNaN(amt)||amt==''){
5        amtField.setValid("v.value", false);
6        amtField.addErrors("v.value", [{message:"Enter an expense amount."}]);
7    }
8    else {
9        amtField.setValid("v.value", true);
10        var newExpense = component.get("v.newExpense");
11        helper.createExpense(component, newExpense);
12        }
13},//Delimiter for future code

    createExpense では、ui:inputDefaultError で表されるエラーメッセージを追加するデフォルトのエラー処理を使用して、名前項目と金額項目を検証します。コントローラでは、setValid(false) を使用して入力値を無効化し、setValid(true) を使用してエラーをクリアします。項目検証についての詳細は、項目の検証を参照してください。

    引数を helper.createExpense() というヘルパー関数に渡すと、saveExpense という Apex クラスがトリガされます。

    ステップ 2: ユーザ入力用のコンポーネントを作成するで aura:id 属性を追加したことを思い出してください。aura:id により、コンポーネントとそのコントローラの範囲内で、構文 component.find("amount") を使用してコンポーネントを名前で検索できます。

    メモ

  3. レコードの作成を処理するヘルパー関数を作成します。updateTotal 関数の後に次のヘルパー関数を追加します。 
    1swfobject.registerObject("clippy.codeblock-2", "9");createExpense: 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},
9  upsertExpense : 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    }
19

    createExpense から upsertExpense がコールされ、saveExpense というサーバ側のアクションのインスタンスが定義されて、expense オブジェクトがパラメータとして設定されます。サーバ側のアクションが返された後にコールバックが実行され、レコード、ビュー、およびカウンタが更新されます。$A.enqueueAction(action) により、サーバ側のアクションがアクション実行キューに追加されます。

    さまざまなアクションの状態を使用でき、コールバックでそれらの動作をカスタマイズできます。アクションのコールバックについての詳細は、サーバ側のアクションのコールを参照してください。

    メモ

  4. 変更を保存し、ブラウザを再読み込みします。Breakfast, 10, ABC Co., Apr 30, 2014 9:00:00 AM と入力してアプリケーションをテストします。日付項目では、日付ピッカーを使用して、日時値を設定することもできます。[送信] ボタンをクリックします。レコードがコンポーネントのビューとレコードの両方に追加され、カウンタが更新されます。

    Apex コードをデバッグするには、開発者コンソールの [Logs (ログ)] タブを使用します。たとえば、日時項目の入力規則がない場合に無効な日時形式を入力すると、INVALID_TYPE_ON_FIELD_IN_RECORD 例外が発生する可能性があります。これは、開発者コンソールの [Logs (タブ)] とブラウザの応答ヘッダーの両方にリストされます。入力規則がある場合は、Apex エラーがブラウザに表示されます。JavaScript コードのデバッグについての詳細は、JavaScript コードのデバッグを参照してください。

    メモ

以上でこのステップは完了です。いくつかのコンポーネント、クライアント側およびサーバ側のコントローラ、ヘルパー関数が含まれる簡単な経費追跡アプリケーションを正常に作成できました。これで、アプリケーションは、ビューおよびデータベースを更新するユーザ入力値を受け入れるようになります。また、カウンタは新しいユーザ入力値を入力するたびに動的に更新されます。次のステップでは、インタラクティブにイベントを使用するレイヤを追加する方法について説明します。