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

ステップ 2: ユーザ入力用のコンポーネントを作成する

コンポーネントは、アプリケーションのビルディングブロックです。コンポーネントを Apex コントローラクラスに接続して、データを読み込むことができます。このステップで作成するコンポーネントにより、経費の金額や日付など、経費に関するユーザ入力を受け入れるフォームが提供されます。

[File (ファイル)] | [New (新規)] | [Lightning コンポーネント] をクリックします。
[New Lightning Bundle (新規 Lightning バンドル)] ポップアップウィンドウの [Name (名前)] 項目に、「form」 (フォーム) と入力します。これにより、form.cmp という新しいコンポーネントが作成されます。

ソースコードエディタで、次のコードを入力します。

次のコードは、経費を作成するためにユーザ入力を受け入れる入力フォームを作成します。これは、スタンドアロンアプリケーションと Salesforce1 および Lightning Experience で動作します。Salesforce1 および Lightning Experience に固有のアプリケーションでは、force:createRecord を使用してレコードの作成ページを開くことができます。

メモ

1<aura:component implements="force:appHostable">
2  <aura:attribute name="expenses" type="Expense__c[]"/>
3  <aura:attribute name="newExpense" type="Expense__c"
4         default="{ 'sobjectType': 'Expense__c',
5                         'Name': '',
6                         'Amount__c': 0,
7                         'Client__c': '', 
8                         'Date__c': '',
9                         'Reimbursed__c': false
10                       }"/>
11  <!-- If you registered a namespace, replace the previous aura:attribute tags with the following -->
12  <!-- <aura:attribute name="expenses" type="myNamespace.Expense__c[]"/> 
13  <aura:attribute name="newExpense" type="myNamespace__Expense__c"
14               default="{ 'sobjectType': 'myNamespace__Expense__c',
15                          'Name': '',
16                          'myNamespace__Amount__c': 0,
17                          'myNamespace__Client__c': '',
18                          'myNamespace__Date__c': '',
19                          'myNamespace__Reimbursed__c': false
20                         }"/> -->
21  <!-- Attributes for Expense Counters -->
22  <aura:attribute name="total" type="Double" default="0.00" />
23  <aura:attribute name="exp" type="Double" default="0" />
24
25  <!-- Input Form using components -->
26  <div class="container">
27    <form class="slds-form--stacked">
28      <div class="slds-form-element slds-is-required">
29        <div class="slds-form-element__control">
30
31       <!-- If you registered a namespace,
32            the attributes include your namespace.
33            For example, value="{!v.newExpense.myNamespace__Amount__c}" -->
34
35          <ui:inputText aura:id="expname" label="Expense Name"
36                        class="slds-input"
37                        labelClass="slds-form-element__label"
38                        value="{!v.newExpense.Name}"
39                        required="true"/>
40         </div>
41       </div>
42       <div class="slds-form-element slds-is-required">
43         <div class="slds-form-element__control">
44           <ui:inputNumber aura:id="amount" label="Amount"
45                           class="slds-input"
46                           labelClass="slds-form-element__label"
47                           value="{!v.newExpense.Amount__c}"
48                           placeholder="20.80" required="true"/>
49          </div>
50        </div>
51        <div class="slds-form-element">
52          <div class="slds-form-element__control">
53            <ui:inputText aura:id="client" label="Client"
54                          class="slds-input"
55                          labelClass="slds-form-element__label"
56                          value="{!v.newExpense.Client__c}"
57                          placeholder="ABC Co."/>
58           </div>
59         </div>
60         <div class="slds-form-element">
61           <div class="slds-form-element__control">
62             <ui:inputDateTime aura:id="expdate" label="Expense Date"
63                               class="slds-input"
64                               labelClass="slds-form-element__label"
65                               value="{!v.newExpense.Date__c}"
66                               displayDatePicker="true"/>
67            </div>
68          </div>
69          <div class="slds-form-element">
70            <ui:inputCheckbox aura:id="reimbursed" label="Reimbursed?"
71                              class="slds-checkbox"
72                              labelClass="slds-form-element__label"
73                              value="{!v.newExpense.Reimbursed__c}"/>
74            <ui:button label="Submit" 
75                       class="slds-button slds-button--neutral"
76                       labelClass="label"
77                       press="{!c.createExpense}"/>
78           </div>
79    </form>
80  </div><!-- ./container-->
81
82  <!-- Expense Counters -->
83  <div class="container slds-p-top--medium">
84        <div class="row">
85            <div class="slds-tile ">
86                <!-- Make the counter red if total amount is more than 100 -->
87                <div class="{!v.total >= 100 
88                     ? 'slds-notify slds-notify--toast slds-theme--error slds-theme--alert-texture' 
89                     : 'slds-notify slds-notify--toast slds-theme--alert-texture'}">
90                    <p class="slds-tile__title slds-truncate">Total Expenses</p>
91                    $<ui:outputNumber class="slds-truncate" value="{!v.total}" format=".00"/>
92                </div>
93            </div>
94            <div class="slds-tile ">
95                <div class="slds-notify slds-notify--toast slds-theme--alert-texture">
96                      <p class="slds-tile__title slds-truncate">No. of Expenses</p>
97                      <ui:outputNumber class="slds-truncate" value="{!v.exp}"/>
98                  </div>
99            </div>
100        </div>
101    </div>
102          <!-- Display expense records -->
103          <div class="container slds-p-top--medium">
104              <div id="list" class="row">
105                 <aura:iteration items="{!v.expenses}" var="expense">
106
107                     <!-- If you’re using a namespace, 
108                          use the format 
109                          {!expense.myNamespace__myField__c} instead. -->
110
111                     <p>{!expense.Name}, {!expense.Client__c}, 
112                        {!expense.Amount__c}, {!expense.Date__c}, 
113                        {!expense.Reimbursed__c}</p>                     
114                </aura:iteration>
115              </div>
116          </div> 
117</aura:component>

コンポーネントでは、豊富な属性セットが提供され、ブラウザイベントがサポートされます。属性は型付けされた項目で、コンポーネントの特定のインスタンスに設定されており、式の構文を使用して参照できます。すべての aura:attribute タグには、名前とデータ型の値があります。詳細は、「サポートされる aura:attribute の型」を参照してください。

この属性と式は、アプリケーションを作成していく過程で明確になります。{!v.exp} は経費レコード数を評価し、{!v.total} は合計金額を評価します。{!c.createExpense} は、[Submit (実行)] ボタン (1) をクリックしたときに実行されるクライアント側のコントローラアクションを表します。このアクションにより、新しい経費が作成されます。ui:button の press イベントでは、ボタンをクリックしたときのアクションを結び付けられます。

式 {!v.expenses} は、コンポーネントを経費オブジェクトに接続します。var="expense" は、反復内の各項目に使用する変数の名前を示します。{!expense.Client__c} は、経費オブジェクトのクライアント項目にバインドするデータを表します。

Expense__c 型の newExpense のデフォルト値は、sobjectType を含め正しい項目で初期化する必要があります。デフォルト値を初期化することで、経費が正しい形式で保存されます。

メモ

サイドバーで [STYLE] をクリックして、form.css という名前の新しいリソースを作成します。次の CSS ルールセットを入力します。
1.THIS .uiInputDateTime .datePicker-openIcon { 2 position: absolute; 3 left: 45%; 4 top: 45%; 5} 6 7.THIS .uiInputDateTime .timePicker-openIcon { 8 position: absolute; 9 left: 95%; 10 top: 70%; 11} 12 13.THIS .uiInputDefaultError li { 14 list-style: none; 15}
THIS は、CSS に名前空間を追加して別のコンポーネントとのスタイルの競合を回避するためのキーワードです。.uiInputDefaultError セレクタは、「ステップ 5: 新しい経費の入力を有効化する」で項目検証を追加するときのデフォルトのエラーコンポーネントのスタイルを設定します。
メモ

アプリケーションにコンポーネントを追加します。expenseTracker.app で、マークアップに新しいコンポーネントを追加します。

次の手順は、<c:form /> をマークアップに追加します。名前空間を使用している場合は、<myNamespace:form /> を代わりに使用できます。組織に名前空間プレフィックスを設定していない場合は、作成したコンポーネントを参照するときにデフォルトの名前空間 c を使用します。

1<aura:application extends="force:slds">  
2    <div class="slds">
3        <div class="slds-page-header">
4          <div class="slds-grid">
5            <div class="slds-col slds-has-flexi-truncate">
6              <p class="slds-text-heading--label">Expenses</p>
7              <div class="slds-grid">
8                <div class="slds-grid slds-type-focus slds-no-space">
9                  <h1 class="slds-text-heading--medium slds-truncate" title="My Expenses">My Expenses</h1>
10                </div>
11              </div>
12            </div>
13          </div>
14        </div>
15        
16        <div class="slds-col--padded slds-p-top--large">
17            <c:form />
18        </div>
19    </div>
20    </aura:application>

変更を保存し、サイドバーの [Update Preview (プレビューを更新)] をクリックしてアプリケーションをプレビューします。または、ブラウザを再読み込みします。

このステップでは、Apex コントローラクラスをまだ作成していないため、作成したコンポーネントにデータは表示されません。
メモ

成功です。入力フォームを提供し、経費を表示するコンポーネントが作成されました。次に、経費を表示する��ジックを作成します。

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

ステップ 2: ユーザ入力用のコンポーネントを作成する

関連項目: