Salesforce Platform Developer I：Aura コンポーネントの基本

Auraコンポーネントの基本

「私のドメイン」は、Lightning コンポーネントを使用した開発に必要です
　トライアル組織には：デフォルトで[私のドメイン]が用意されています。
　本番：「設定」>「私のドメイン」設定必要

事前準備

カスタムオブジェクト作成


Plural Label変更

Aura コンポーネントの使用開始

Lightningコンポーネントフレームワーク：モバイルデバイス用とデスクトップデバイス用の Webアプリケーションを開発するUIフレームワークです。

SLDS：Salesforce Lightning Design System

MVCC(ビュー（.cmp）-クライアントコントローラ（controller.js,help.js）-サーバのコントローラ（apex）-データベース（object）)

cmpの利用できるタグ
<>、<>、<>また<>（uiタグがお勧めではない、サポートされないタグが多くになる）

Auraコンポーネント作成

● helloWorld — コンポーネントバンドル
　○ helloWorld.cmp — Component :コンポーネントの定義（HTMLをベースにLightningタグをマークアップ）
　○ helloWorldController.js — Controller :コンポーネントのコントローラ (メインJavaScript ファイル、JavaScriptでアクションを記述)
　○ helloWorldHelper.js — Helper :コンポーネントのヘルパー (セカンダリJavaScript ファイル、JavaScriptで横断的なビジネスロジックを記述)
　○ helloWorld.css — Style: コンポーネントのCSSを定義
　○ helloWorld.auradoc — Documentation :コンポーネントの使用方法を定義
　○ RhelloWorldRenderer.js — renderer :レンダリングフェーズにおける特殊な挙動を定義
　○ helloWorld.design — Design :アプリケーションビルダーでの設定項目を定義
　○ helloWorld.svg — SVG :アプリケーションビルダー上のアイコンを定義

コンテナアプリケーション作成

段階的なコンポーネント作成可能

helloHeading.cmp

<aura:component>
    <h1>W E L C O M E</h1>
</aura:component>

helloWorld.cmp

<aura:component>
    <c:helloHeading/>
    <p>Hello Lightning!</p>
</aura:component>

harnessApp.app

<aura:application>
    <c:helloWorld/>
</aura:application>

CHALLENGE

campingList.cmp

<aura:component >
	<ol>
        <li>Bug Spray</li>
        <li>Bear Repellant</li>
        <li>Goat Food</li>
    </ol>
</aura:component>

campingHeader.cmp

<aura:component >
    <h1>Camping List</h1>
</aura:component>

campingHeader.css

.THIS {
}
h1.THIS{
    font-size:18px;
}

camping.cmp

<aura:component >
    <c:campingHeader/>
    <c:campingList/>
</aura:component>

コンポーネントの属性と式

コンポーネント属性定義（Parameter）

<>タグを使用して定義され、name属性とtype属性の値が必要です。省略可能なdefault属性、description属性、required
<aura:attribute name="message" type="String"/>

作成

helloMessage.cmp

<aura:component>
    <aura:attribute name="message" type="String"/>
    <p>{!$Label.c.Greeting + v.message}</p>
</aura:component>

<>
・[name]はパラメータ名です、該当コンポーネントにこのパラメータ利用する時、設定のname値で呼び出し。
・[type]はパラメータの型です、利用できるデータ型は
　①プリミティブデータ型：Boolean、Date、DateTime、Decimal、Double、Integer、Long、String など
　②標準オブジェクト型とカスタムオブジェクト型：Account、MyCustomObject__cなど
　③コレクション型：List、Map、Setなど
　④カスタムApexクラス
　⑤Aura.Component、Aura.Component[]などのフレームワーク固有の型。

[$Label]と[v.message]は値プロバイダ、[値プロバイダ]のタグ参照してください。

呼び出し

test.app

<aura:application >
	<c:helloMessage message="You look nice today."/>
</aura:application>

※値プロバイダ

オブジェクトがプロパティやメソッドをカプセル化する場合と同じようなやり方で関連する値をまとめてカプセル化します。

コンポーネントの値プロバイダ

**・[v.]：**コンポーネント属性セット
**・[c.]：**コンポーネントのコントローラ

グローバル値プロバイダ

**[globalID]：**コンポーネントのグローバル ID を返します。すべてのコンポーネントには一意の globalId があります。
**[$Browser]：**アプリケーションにアクセスしているブラウザのハードウェアおよびオペレーティングシステムに関する情報を返します。
**[$ContentAsset]：**Lightning コンポーネントのアセットファイルとして使用される画像、スタイルシート、JavaScript を参照できます。
**[$Label]：**コードの外部に保存されたラベルにアクセスできます。
**[$Locale]：**現在のユーザが選択しているロケールに関する情報を返します。
**[$Resource]：**静的リソースにアップロードした画像、スタイルシート、JavaScript コードを参照できます。

データ型サンプル

expenseItem.cmp

<aura:component>
    <aura:attribute name="expense" type="Expense__c"/>
    <p>Amount:
        <!-- 通貨型表示フォーマット -->
        <lightning:formattedNumber value="{!v.expense.Amount__c}" style="currency"/>
    </p>
    <p>
        Client: {!v.expense.Client__c}
    </p>
    <p>
        <!-- チェックボックス設定 -->
        <lightning:input type="toggle"
                         label="Reimbursed?"
                         name="reimbursed"
                         checked="{!v.expense.Reimbursed__c}" />
     </p>
    <!-- Other markup here -->
</aura:component>

属性と式で遊ぶ

helloPlayground.cmp

<aura:component>
    <aura:attribute name="messages" type="List"
        default="['You look nice today.',
            'Great weather we\'re having.',
            'How are you?']"/>
    <h1>Hello Playground</h1>
    <p>Silly fun with attributes and expressions.</p>
    <h2>List Items</h2>
    <p><c:helloMessage message="{!v.messages[0]}"/></p>
    <p><c:helloMessage message="{!v.messages[1]}"/></p>
    <p><c:helloMessage message="{!v.messages[2]}"/></p>
    <h2>List Iteration</h2>
    <aura:iteration items="{!v.messages}" var="msg">
        <p><c:helloMessage message="{!msg}"/></p>
    </aura:iteration>
    <h2>Conditional Expressions and Global Value Providers</h2>
    <aura:if isTrue="{!$Browser.isIPhone}">
        <p><c:helloMessage message="{!v.messages[0]}"/></p>
    <aura:set attribute="else">
        <p><c:helloMessage message="{!v.messages[1]}"/></p>
        </aura:set>
    </aura:if>
</aura:component>

CHALLENGE

campingListItem.cmp

<aura:component >
    <aura:attribute name="item" type="Camping_Item__c" required="true"/>
    <p>Name:
        <ui:outputText value="{!v.item.Name}"/>
    </p>
    <p>Price:
        <lightning:formattedNumber value="{!v.item.Price__c}" style="currency"/>
    </p>
    <p>Quantity:
        <lightning:formattedNumber value="{!v.item.Quantity__c}"/>
    </p>
    <p>Packed:
        <lightning:input type="toggle" label="Packed" name="togglevalue" checked="{!v.item.Packed__c}"/>
    </p>
</aura:component>

コントローラを使用したアクションの処理

onclick()アクション

helloMessageInteractive.cmp

<aura:component>
    <aura:attribute name="message" type="String"/>
    <p>Message of the day: {!v.message}</p>
    <div>
        <lightning:button label="You look nice today."
            onclick="{!c.handleClick}"/>
        <lightning:button label="Today is going to be a great day!"
            onclick="{!c.handleClick2}"/>
        <lightning:button label="tomorrow is going to be a great day!"
            onclick="{!c.handleClick3}"/>
    </div>
</aura:component>

helloMessageInteractiveController.js

({
    handleClick: function(component, event, helper) {
        let btnClicked = event.getSource();         // アクションボタン取得
        let btnMessage = btnClicked.get("v.label"); // ボタンの属性取得
        component.set("v.message", btnMessage);     // 画面のパラメータ再設定
    },
    handleClick2: function(component, event, helper) {
        let newMessage = event.getSource().get("v.label");         // 関数のチェーニング
        console.log("handleClick2: Message: " + newMessage);       // JavaScriptコンソールにログメッセージ表示
        component.set("v.message", newMessage);
    },
    handleClick3: function(component, event, helper) {
        component.set("v.message", event.getSource().get("v.label"));    // 関数のチェーニング
    }
})

コントローラ関数を常に宣言してこの 3 つのパラメータを取る必要があります
handleClick: function(component, event, helper) {
・component — コンポーネント。この場合は、helloMessageInteractive です。
・event — アクションハンドラをコールする原因となったイベント。
・helper — コンポーネントのヘルパー。再利用可能な関数の別の JavaScript リソースです。

CHALLENGE

campingListItem.cmpの最後にボタン追加

campingListItem.cmp

<aura:component >
    ・・・・・
    <!-- ボタン追加、packItem呼び出し -->
    <lightning:button label="Packed！" onclick="{!c.packItem}"/>
</aura:component>

campingListItemController.js

({
    packItem : function(component, event, helper) {
        let a = component.get("v.item",true);
        a.Packed__c = true;
        component.set("v.item",a);
        let btnClicked = event.getSource();
        btnClicked.set("v.disabled",true);
    }
})

フォームを使用したデータの入力

アプリにSLDSのエクステンド（導入）

Lightningアプリケーションを作成し、SLDS導入声明する（このハーネスアプリケーションは、単なるラッパー、つまりシェルです。）
<aura:application extends="force:slds">

SLDSを付けている

SLDSを付けない

expenses.cmp

<aura:component>
    <aura:attribute name="expenses" type="Expense__c[]"/>
    <aura:attribute name="newExpense" type="Expense__c"
         default="{ 'sobjectType': 'Expense__c',
                        'Name': 'test',
                        'Amount__c': 0,
                        'Client__c': '',
                        'Date__c': '2021-10-21',
                        'Reimbursed__c': true }"/>
    <!-- PAGE HEADER -->
    <lightning:layout class="slds-page-header slds-page-header_object-home">
        <lightning:layoutItem>
            <lightning:icon iconName="standard:scan_card" alternativeText="My Expenses"/>
        </lightning:layoutItem>
        <lightning:layoutItem padding="horizontal-small">
            <div class="page-section page-header">
                <h1 class="slds-text-heading_label">Expenses</h1>
                <h2 class="slds-text-heading_medium">My Expenses</h2>
            </div>
        </lightning:layoutItem>
    </lightning:layout>
    <!-- / PAGE HEADER -->
    <!-- NEW EXPENSE FORM -->
    <lightning:layout>
        <lightning:layoutItem padding="around-small" size="6">
            <!-- CREATE NEW EXPENSE -->
            <div aria-labelledby="newexpenseform">
                <!-- BOXED AREA -->
                <fieldset class="slds-box slds-theme_default slds-container_small">
                <legend id="newexpenseform" class="slds-text-heading_small
                  slds-p-vertical_medium">
                  Add Expense
                </legend>
                <!-- CREATE NEW EXPENSE FORM -->
                <form class="slds-form_stacked">
                    <lightning:input aura:id="expenseform" label="Expense Name"
                                     name="expensename"
                                     value="{!v.newExpense.Name}"
                                     required="true"/>
                    <lightning:input type="number" aura:id="expenseform" label="Amount"
                                     name="expenseamount"
                                     min="0.1"
                                     formatter="currency"
                                     step="0.01"
                                     value="{!v.newExpense.Amount__c}"
                                     messageWhenRangeUnderflow="Enter an amount that's at least $0.10."/>
                    <lightning:input aura:id="expenseform" label="Client"
                                     name="expenseclient"
                                     value="{!v.newExpense.Client__c}"
                                     placeholder="ABC Co."/>
                    <lightning:input type="date" aura:id="expenseform" label="Expense Date"
                                     name="expensedate"
                                     value="{!v.newExpense.Date__c}"/>
                    <lightning:input type="checkbox" aura:id="expenseform" label="Reimbursed?"
                                     name="expreimbursed"
                                     checked="{!v.newExpense.Reimbursed__c}"/>
                    <lightning:button label="Create Expense"
                                      class="slds-m-top_medium"
                                      variant="brand"
                                      onclick="{!c.clickCreate}"/>
                </form>
                <!-- / CREATE NEW EXPENSE FORM -->
              </fieldset>
              <!-- / BOXED AREA -->
            </div>
            <!-- / CREATE NEW EXPENSE -->
        </lightning:layoutItem>
    </lightning:layout>
    <!-- / NEW EXPENSE FORM -->
</aura:component>

expensesControll.js

({
    clickCreate: function(component, event, helper) {
        let validExpense = component.find('expenseform').reduce(function (validSoFar, inputCmp) {
            // Displays error messages for invalid fields
            inputCmp.showHelpMessageIfInvalid();
            return validSoFar && inputCmp.get('v.validity').valid;
        }, true);
        // If we pass error checking, do some real work
        if(validExpense){
            // Create the new expense
            let newExpense = component.get("v.newExpense");
            console.log("Create expense: " + JSON.stringify(newExpense));
            helper.createExpense(component, newExpense);
        }
    }
})

expensesHelper.js

({
    createExpense: function(component, expense) {
        let theExpenses = component.get("v.expenses");
        // Copy the expense to a new object
        // THIS IS A DISGUSTING, TEMPORARY HACK
        let newExpense = JSON.parse(JSON.stringify(expense));
        theExpenses.push(newExpense);
        component.set("v.expenses", theExpenses);
    }
})

CHALLENGE

campingHeader.cmp

<aura:component >
    <lightning:layout class="slds-page-header slds-page-header--object-home">
        <lightning:layoutItem>
            <lightning:icon iconName="action:goal" alternativeText="My Camping"/>
        </lightning:layoutItem>
        <lightning:layoutItem padding="horizontal-small">
            <div class="page-section page-header">
                <h1 class="slds-text-heading--label">Camping</h1>
                <h2 class="slds-text-heading--medium">Camping List</h2>
            </div>
        </lightning:layoutItem>
    </lightning:layout>
</aura:component>

campingList.cmp

<aura:component >
    <aura:attribute name="items" type="Camping_Item__c[]"/>
        <aura:attribute name="newItem" type="Camping_Item__c" default="{'Name':'',
            'Quantity__c':0,
            'Price__c':0,
            'Packed__c':false,
            'sobjectType':'Camping_Item__c'}"/>
            
            <!-- NEW Campaing FORM -->
            <div class="slds-col slds-col--padded slds-p-top--large">
                
                
                <c:campingHeader/>
                <div aria-labelledby="newCampaingForm">
                    
                    <!-- BOXED AREA -->
                    <fieldset class="slds-box slds-theme--default slds-container--small">

                        <legend id="newCampaingForm" class="slds-text-heading--smallslds-p-vertical--medium">
                            Add Expense
                        </legend>

                        <!-- CREATE NEW Campaing FORM -->
                        <form class="slds-form--stacked">

                        <!-- For Name Field -->
                        <lightning:input aura:id="expenseform" label="Camping Name"
                            name="expensename"
                            value="{!v.newItem.Name}"
                            required="true"/>
                        <!-- For Quantity Field -->
                        <lightning:input type="number" aura:id="campingform" label="Quantity"
                            name="expenseamount"
                            min="1"
                            value="{!v.newItem.Quantity__c}"
                            messageWhenRangeUnderflow="Enter minimum 1 Quantity"/>
                        <!-- For Price Field -->
                        <lightning:input aura:id="campingform" label="Price"
                            formatter="currency"
                            name="expenseclient"
                            value="{!v.newItem.Price__c}"/>
                        <!-- For Check Box -->
                        <lightning:input type="checkbox" aura:id="campingform" label="Packed"
                            name="expreimbursed"
                            checked="{!v.newItem.Packed__c}"/>

                        <lightning:button label="Create Camping"
                            class="slds-m-top--medium"
                            variant="brand"
                            onclick="{!c.clickCreateItem}"/>
                        </form>
                        <!-- / CREATE NEW EXPENSE FORM -->
                    </fieldset>
                    <!-- / BOXED AREA -->
                                        
                </div>
            <!-- / CREATE NEW EXPENSE -->
            </div>
            <!-- ITERATIING ITEM LISTS -->
            <div class="slds-card slds-p-top--medium">
                
                <c:campingHeader/>
                
                <section class="slds-card__body">
                    <div id="list" class="row">
                        <aura:iteration items="{!v.items}" var="item">
                            <c:campingListItem item="{!item}"/>
                        </aura:iteration>
                    </div>
                </section>
            </div>
            <!-- / ITERATIING ITEM LISTS -->
</aura:component>

campingListController.js

({
clickCreateItem : function(component, event, helper) {
    var validCamping = component.find('campingform').reduce(function (validSoFar, inputCmp) {
        // Displays error messages for invalid fields
        inputCmp.showHelpMessageIfInvalid();
        return validSoFar && inputCmp.get('v.validity').valid;
    }, true);
     
    if(validCamping){
        var newCampingItem = component.get("v.newItem");
        //helper.createCamping(component,newCampingItem);
        var campings = component.get("v.items");
        var item = JSON.parse(JSON.stringify(newCampingItem));
         
        campings.push(item);
         
        component.set("v.items",campings);
        component.set("v.newItem",{ 'sobjectType': 'Camping_Item__c','Name': '','Quantity__c': 0,
        'Price__c': 0,'Packed__c': false });
    }
}
})

campingListItem.cmp

<aura:component >
    <aura:attribute name="item" type="Camping_Item__c" required="true"/>
    <lightning:card title="Camping">
        <p class="slds-p-horizontal--small">
            <p>Name:<ui:outputText value="{!v.item.Name}"/></p>
            <p>Price:<lightning:formattedNumber value="{!v.item.Price__c}" style="currency"/></p>
            <p>Quantity:<lightning:formattedNumber value="{!v.item.Quantity__c}"/></p>
            <p>Packed:<lightning:input type="toggle" label="Packed" name="togglevalue" 
                                       checked="{!v.item.Packed__c}"/></p>
        </p>
    </lightning:card>
    <lightning:button label="Packed！" onclick="{!c.packItem}"/>
</aura:component>

campingListItemController.js

({
    packItem : function(component, event, helper) {
        let a = component.get("v.item");
        a.Packed__c = true;
        component.set("v.item",a);
        let btnClicked = event.getSource();
        btnClicked.set("v.disabled",true);
    }
})

サーバ側コントローラを使用した Salesforce への接続

画像リンク

参考