Lightningコンポーネント開発
本セクションにはLightningコンポーネントの作成とクライアントコントローラーの使い方を紹介いたします。
簡単に言えば、下図の赤線中の部分は紹介対象です。
Lightningコンポーネントとサーバ間の通信流れ
Lightningコンポーネントから直接サーバへ通信できない、必ずクライアントコントローラー（JavaScriptのController）を経由して、サーバへ通信しなければならない。
Lightningバックエンドコントローラー作成
記事【salesforce】Lightning基本知識ーLightningクライアントコントローラーに、簡単なコンポーネントとクライアントコントローラー作成手順を紹介いたしましたので、こちらのコンポーネントとクライアントコントローラー作成手順は割愛します。
-
事前準備
下記二つオブジェクトを作成する。- Expense
- Camping Item
オブジェクト情報
| No. | 項目名 | 値 |
|---|---|---|
| 1 | 表示ラベル | Expense |
| 2 | 表示ラベル(複数形) | Expenses |
| 3 | 母音で始まる場合はチェック | checked |
| 4 | 項目１ | Amount |
| 5 | 項目２ | Client |
| 6 | 項目３ | Date |
| 7 | 項目４ | Reimbursed |
項目詳細下記の通り
| 項目名 | データ型 | サイズ | 必須 | デフォルト値 |
|---|---|---|---|---|
| Amount | Number | (16,2) | Yes | - |
| Client | Text | 50 | Yes | - |
| Date | Date | - | Yes | - |
| Reimbursed | Checkbox | - | - | - |
| No. | 項目名 | 値 |
|---|---|---|
| 1 | 表示ラベル | Camping Item |
| 2 | 表示ラベル(複数形) | Camping Items |
| 3 | 母音で始まる場合はチェック | Unchecked |
| 4 | 項目１ | Quantity |
| 5 | 項目２ | Price |
| 6 | 項目２ | Packed |
| 項目名 | データ型 | サイズ | 必須 | デフォルト値 |
|---|---|---|---|---|
| Quantity | Number | (18,0) | Yes | - |
| Price | Currency | (16,2) | Yes | - |
| Packed | Checkbox | - | - | Unchecked |
- コンポーネント作成
下記のソース張り付けて、「lc0003.cmp」コンポーネントを作成する。
lc0003.cmp
<aura:component implements="force:appHostable">
<aura:attribute name="expense" type="Expense__c"/>
<!-- Color the item green if the expense is reimbursed -->
<lightning:card title="{!v.expense.Name}" iconName="standard:scan_card"
class="{!v.expense.Reimbursed__c ?
'slds-theme--success' : ''}">
<aura:set attribute="footer">
<p>Date: <lightning:formattedDateTime value="{!v.formatdate}"/></p>
<p class="slds-text-title"><lightning:relativeDateTime value="{!v.formatdate}"/></p>
</aura:set>
<p class="slds-text-heading--medium slds-p-horizontal--small">
Amount: <lightning:formattedNumber value="{!v.expense.Amount__c}" style="currency"/>
</p>
<p class="slds-p-horizontal--small">
Client: {!v.expense.Client__c}
</p>
<p>
<lightning:input type="toggle"
label="Reimbursed?"
name="reimbursed"
class="slds-p-around--small"
checked="{!v.expense.Reimbursed__c}"
messageToggleActive="Yes"
messageToggleInactive="No"
onchange="{!c.clickReimbursed}"/>
</p>
</lightning:card>
</aura:component>
- クライアントコントローラー作成
- バックエンドコンポーネント作成
- 動作確認
参考資料
Aura コンポーネントの基本
Build a Lightning Component to Override a Standard Action
※「Install the Trailhead Package 」の場合、リンク直接クリックしないで、自分のplaygroupの「.com」直後に「/packagingSetupUI/ipLanding.app?apvId=04t6A000000SG0F」を貼り付けて、「Enter」キーをクリックして、インストール画面に遷移できます。
クイックスタート: Aura コンポーネント