この文章は Salesforce 機械翻訳システムを使用して翻訳されました。詳細はこちらをご参照ください。

UI コンポーネントの使用

ユーザは、値を選択または入力するために入力要素を使用してアプリケーションとやりとりします。ui:inputText や ui:inputCheckbox などのコンポーネントは、共通の入力要素に対応します。これらのコンポーネントは、ユーザインターフェースイベントのイベント処理を簡略化します。

すべての使用できるコンポーネントの属性とイベントについては、https://<myDomain>.lightning.force.com/auradocs/reference.app (<myDomain> は、Salesforce カスタムドメインの名前) のコンポーネント参照を参照してください。

メモ

独自のカスタムコンポーネントで入力コンポーネントを使用するには、.cmp または .app リソースに入力コンポーネントを追加します。次の例は、テキスト項目およびボタンの基本設定です。aura:id 属性は、cmp.find("myID"); を使用して JavaScript コードからコンポーネントを参照できるようにする一意の ID を定義します。

1<ui:inputText label="Name" aura:id="name" placeholder="First, Last"/>
2<ui:outputText aura:id="nameOutput" value=""/>
3<ui:button aura:id="outputButton" label="Submit" press="{!c.getInput}"/>

すべてのテキスト項目に、項目のテキスト表示ラベルを表す label 属性が指定されている必要があります。表示ラベルをビューで非表示にする必要がある場合は、labelClass="assistiveText" を設定して表示ラベルを支援技術で使用できるようにします。

メモ

ui:outputText コンポーネントは、対応する ui:inputText コンポーネントの出力値のプレースホルダとして機能します。ui:outputText コンポーネントの値は、クライアント側の次のコントローラアクションを使用して設定できます。

1getInput : function(cmp, event) {
2      var fullName = cmp.find("name").get("v.value");
3      var outName = cmp.find("nameOutput");
4      outName.set("v.value", fullName);
5    }

次の例は前の例と似ていますが、クライアント側コントローラなしで値のバインドを使用します。ui:outputText コンポーネントには、onkeyup ブラウザイベントが起動された時の ui:inputText コンポーネントの最新の値が反映されます。

1<aura:attribute name="first" type="String" default="John"/>
2<aura:attribute name="last" type="String" default="Doe"/>
3
4<ui:inputText label="First Name" value="{!v.first}" updateOn="keyup"/>
5<ui:inputText label="Last Name" value="{!v.last}" updateOn="keyup"/>
6
7<!-- Returns "John Doe" -->
8<ui:outputText value="{!v.first +' '+ v.last}"/>

Salesforce アプリケーションでレコードを作成および編集するには、force:createRecord および force:recordEdit イベントを使用して、組み込みのレコードの作成ページおよびレコードの編集ページを使用します。

ヒント

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

UI コンポーネントの使用