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

1<aura:application>
2    <ltng:require styles="/resource/slds090/assets/styles/salesforce-lightning-design-system.min.css"/>
3    
4    <div class="slds">
5        <div class="slds-page-header">
6          <div class="slds-grid">
7            <div class="slds-col slds-has-flexi-truncate">
8              <p class="slds-text-heading--label">Expenses</p>
9              <div class="slds-grid">
10                <div class="slds-grid slds-type-focus slds-no-space">
11                  <h1 class="slds-text-heading--medium slds-truncate" title="My Expenses">My Expenses</h1>
12                </div>
13              </div>
14            </div>
15          </div>
16        </div>
17        
18        <div class="slds-col--padded slds-p-top--large">
19            <c:form />
20        </div>
21    </div>
22    </aura:application>

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

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

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

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

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

関連項目: