Lightningコンポーネント(標準コンポーネント)

ボタン

<lightning:button variant="neutral" 
 onclick="{!c.closeDialog}">キャンセル</lightning:button>
<lightning:button aura:id="addButton" variant="brand" 
 onclick="{!c.saveData}" disabled="{!v.isShowSaveButton ? '' : 'true'}">保管</lightning:button>

Lightning:button
LDS button(CSSの説明)
variant="neutral"
variant="brand"
variant="destructive"

テキストボックス

<ui:inputText value="{!v.value}" maxlength="10" size="10"
   change="{!c.valueChanged}" aura:id="inputData" />

valueChanged : function(cmp, event, helper){
    var newValue = event.getSource().get("v.value");
    ....
}

ui:inputText

テキストエリア

//rowsのデフォルトは2
<ui:inputTextArea value="{!file.Description}" rows="5"/>

ui:inputTextarea

チェックボックス

//コンポーネントを使用
<ui:inputCheckbox label="重要" click="{!c.update}" text="任意の属性値"/>

//plain htmlを使用
<input aura:id="checkbox" type="checkbox" 
 class=" uiInput uiInputCheckbox uiInput--default uiInput--checkbox" 
 data-id="{!xxx}" />

ui:inputCheckbox

>コントローラでの値の取得

//aura:idをキーに全てのコンポーネントを取得
var cboxes = cmp.find('checkbox');

//ui:inputBoxでの値の取得
for(var i=0; i<cboxes.length; i++){
    if (cboxes[i].get('v.value')){ //チェック時はtrueになる
        var id = cboxes[i].get('v.text'); //text属性の値
        ....
    }
}

//input type="checkbox"での取得
for(var i=0; i<cboxes.length; i++){
    if (cboxes[i].getElement().checked){
        var id = cboxes[i].getElement().dataset.id;
        ....
    }
}

イメージの表示

<lightning:icon iconName="standard:task" size="xx-small"/>`

 #iconNameの例
  action:apex
  custom:custom5
  doctype:csv
  standard:apps
  utility:upload
#size
  xx-small、x-small、medium、large 

アイコン一覧
lightning:icon

パス

単なるPicklist項目をパス形式で表示する。パス設定している項目をを表示するにはlightning:path コンポーネントを使用する。

<lightning:picklistPath aura:id="picklistPath" 
  recordId="{!v.invoiceDirectionId}"
  variant="linear"
  picklistFieldApiName="Status__c">
</lightning:picklistPath>

Lightning:picklistPath

パスコンポーネント

force:recordEdit

標準のレイアウトを使った編集画面を表示するコンポーネント。

<aura:If isTrue="{! v.newRecordId!=null}">
  <force:recordEdit aura:id="NewOutsourceWork" recordId="{! v.newRecordId}"/>
</aura:If>

/*
 * handler: '保管' button is clicked.
 */
onSaveData: function(cmp, event, helper) {
    cmp.find("NewOutsourceWork").get("e.recordSave").fire();  
},

/*
 * Fired after successfully updating the record.
 */
onRecordSaveSuccess : function(cmp, event, helper) {
    event.stopPropagation();
    $A.get('e.force:refreshView').fire(); //refresh
    cmp.set('v.newRecordId', null);
    helper.common.closeModalDialog(cmp);
},

spinner

処理実行中にくるくる回るスピナーを画面トップに表示

<div style="position:relative">
  <lightning:spinner aura:id="lspinner2" class="slds-hide" variant="brand" size="medium" />
・・・・
</div>
<!-- position:relative の中にspinnerをコンポーネントを含めるのがミソ -->

//spinner on
var spinner = cmp.find("lspinner");
$A.util.removeClass(spinner, "slds-hide");

//spinner off
var spinner = cmp.find("lspinner2");
$A.util.addClass(spinner, "slds-hide");

lightning:spinner

unescape

HTMLタグをエスケープせずに表示するには aura:unescapedHtml を利用

{!v.dispValue} 
 => 1<br/>2
<aura:unescapedHtml value="{!v.dispValue}" />
 => 1
    2

背景のスクロール防止

カスタムダイアログボックスを表示した時に、マウスホイールで背景画像がスクロールしないようにするコード。

ダイアログの表示の時に指定

//背景のHTML要素がスクロールしないようにする
document.body.style.overflow = 'hidden';

ダイアログボックスのクローズの時に指定

//背景のHTML要素をスクロールできるようにする
document.body.style.overflow = null;