Lightningコンポーネント (cmp)

Lightningコンポーネントで開発する場合はMyDomainの登録を忘れないように（作成した後は、「私のドメイン」設定からユーザーにリリースするのを忘れないように）

####aura:componentタグ
controllerにはサーバー側Apexクラス名を指定する。extendsを使って継承することも可能

implementsの種類はここから

<aura:component implements="flexipage:availableForAllPageTypes,force:hasRecordId" 
access="global" controller="Xxx_LC_Ctrl" extends="c:Xxx_CommonUtil">

[新規] や「編集など]の既存の標準ボタンを上書きするコンポーネントを作成する場合h lightning:actionOverride を実装する。

####基本的な構造
特にルールはないが、下記がお薦め

<aura:component implements="flexipage:availableForAllPageTypes,force:hasRecordId" access="global">
  <!-- attribute -->
  <aura:attribute name="recordId" type="String"/>
  ....

  <!-- handler -->
  <aura:handler name="init" value="{!this}" action="{!c.init}" />
  ....

  <!-- event -->  
  <aura:handler name="xxxEvent" event="c:xxEvent" action="{!c.showOpenSearchDialog}" />

  <!-- contents -->
  <div>
    ...  コンポーネントのHTMLタグ
  </div>
</aura:component> 

####Lightningタブに登録するコンポーネント
Lightningタブに登録するコンポーネントは、appHostableをimplementsする必要がある。また MyDomainを作成する必要がある。
注意: Lightningタブ化できるコンポーネントが組織に1つもない場合は、タブメニューに「Lightningタブ」は出てこない（「Lightningページ」のみ）

<aura:component implements="force:appHostable" access="global">

####属性定義
nameとtypeは必須。typeには String, Boolean, Date, Datetime, Integer, Long, Object, オブジェクト名（Account, Opportunity）などが使える

aura:attribute
type
<aura:attribute name="recordId" type="String" default="xxx"/>
####属性の参照
Using expressions

{!v.recordId}
{!v.listvalue[0]}  //リスト値の参照
{!v.location == '/active' ? 'selected' : ''}  //条件
isTrue="{!v.files.length==0}"  //v.filesはarray
// ="slds-xx {!v.classname}"といった指定はNG
{! 'slds-xx ' + v.classname}  
✖️ {! isEditable && isSuccess ? 'xx':'xx'} //この指定はNG
◯ {! and(isEditable, isSuccess) ? 'xx':'xx'} //and()を使う。条件は2つしか指定できないので、3つある場合は and()をネストさせること。 => and(A, and(B,C))

####外部JS、CSSの読み込み
静的リソースから読み込み

####繰り返し
aura:iterationを使う
ループ内の変数には v を付けないことに注意。
カウンタには indexVar属性を利用。0から始まる

<aura:iteration items="{!v.metadata}" var="field" indexVar="indx">
  <div class="slds-size--1-of-2">
    <div class="slds-grid">
      <div class="slds-size--1-of-3">{!indx}</div> //0,1,2..
      <div class="slds-size--1-of-3">{!field.Label}</div>
      <div class="slds-size--1-of-3">{!field.ApiName}</div>
    </div>    
  </div>
</aura:iteration>

####IDの指定
aura:idを使ってidを指定すると、コントローラでcmp.find()を使ってコンポーネントを取得できるようになる。
コンポーネント以外の通常のタグにも指定可能。

<lightning:button aura:id="okbtn" variant="brand" 
 onclick="{!c.xx}" />
<button aura:id="cancelBtn" onclick="{!c.xxx}"`

var okbtn = cmp.find('okbtn');
var cancelbtn = cmp.find('cancelBtn').getElement();

aura:idの指定にはexpression表記({!v.xxid})は使えないことに注意する。リテラルのみ

####IF文
aura:ifを使う(aura:renderIfはdeprecated)

<aura:If isTrue="{!(tab.Type=='Summary')}">
  12345
</aura:If>

<aura:If isTrue="{!(v.files.length>0)}">
  12345
<aura:set attribute="else">
  56789
</aura:set>
</aura:If>

<aura:If isTrue="{!(item.DataType=='Picklist')}">
  12345
  <aura:set attribute="else">
    6789 （注：このタグのBody部をnull状態で実行するとエラーになる）
  </aura:set>
</aura:If>

####カスタムラベル
cを付けるところがミソ
{!$Label.c.XXX_XXXX}

####HTMLタブをunescapeして表示
ここを参照

####システムエラーのキャッチとコンソールへの表示

<aura:handler event="aura:systemError" action="{!c.logSystemError}"/>

/*
 * log system error
 */
logSystemError : function(cmp, event, helper){
    console.log(event.getParams().auraError.message);
    console.log(event.getParams().auraError.stackTrace);
}