Lightning Aura Components Developer Guide (Lightning Aura コンポーネント開発者ガイド)
jカスタム Lightning ページテンプレートコンポーネントの作成
すべての標準 Lightning ページは、ページの領域とページに含まれるコンポーネントを定義するデフォルトテンプレートコンポーネントに関連付けられています。カスタム Lightning ページテンプレートコンポーネントでは、定義した構造とコンポーネントを使用して、ビジネスニーズに合ったページテンプレートを作成できます。カスタムテンプレートを実装すると、ページ作成者は Lightning アプリケーションビルダーの新規ページウィザードでそのカスタムテンプレートを使用できます。
1.テンプレートコンポーネント構造の構築
カスタムテンプレートは、少なくとも 1 つの .cmp リソースとデザインリソースが含まれている必要のある Aura コンポーネントバンドルです。.cmp リソースでは、テンプレートインターフェースを実装し、テンプレート領域ごとに Aura.Component[] 型の属性を宣言する必要があります。Aura.Component[] 型では、コンポーネントのコレクションとして属性を定義します。
次に、lightning:layout コンポーネントと Salesforce Lightning Design System (SLDS) を使用してスタイルを設定する 2 列のアプリケーションページテンプレートの .cmp リソースの例を示します。
テンプレートがデスクトップで表示される場合、右列が 30% (4 つの SLDS 列) を占めます。左列はページ幅の残りの 70% を占めます。デスクトップ以外のフォーム要素以外の場合、列は 50/50 で表示されま��。
1<aura:component implements="lightning:appHomeTemplate" description="Main column
2 and right sidebar. On a phone, the regions are of equal width">
3 <aura:attribute name="left" type="Aura.Component[]" />
4 <aura:attribute name="right" type="Aura.Component[]" />
5
6 <div>
7 <lightning:layout>
8 <lightning:layoutItem flexibility="grow"
9 class="slds-m-right_small">
10 {!v.left}
11 </lightning:layoutItem>
12 <lightning:layoutItem size="{! $Browser.isDesktop ? '4' : '6' }"
13 class="slds-m-left_small">
14 {!v.right}
15 </lightning:layoutItem>
16 </lightning:layout>
17 </div>
18
19</aura:component>aura:component タグの description 属性は、省略可能ですが推奨属性です。description を定義すると、Lightning アプリケーションビルダーの新規ページウィザードのテンプレート画像の下にテンプレートの説明として表示されます。
2.デザインリソースでのテンプレート領域とコンポーネントの設定
デザインリソースは、テンプレートで作成できるページの種別を制御します。デザインリソースでは以下を指定します。
- テンプレートを使用するページに必要な領域。
- ページ領域に挿入可能なコンポーネントの種別。
- 表示されるデバイス種別に基づいたページ上のコンポーネントの占有スペース。
- コンポーネントがサポートするデバイスのフォームファクタ。
領域は、.cmp リソースの設定に従って、ページ全体に設定されたインターフェースの割り当てを継承します。
次のタグを使用して、領域とコンポーネントを指定します。
- flexipage:template
- このタグには属性はなく、flexipage:region タグのラッパーとして動作します。テキストリテラルは使用できません。
- flexipage:region
- このタグには次の属性があり、テンプレートの領域を定義します。テキストリテラルは使用できません。
属性 説明 name Aura.Component[] 型としてマークされる .cmp リソースの属性の名前。領域として属性にフラグを設定します。 label 領域の表示ラベル。ユーザが領域のコンテンツを新しいテンプレートに対応付けると、この表示ラベルは Lightning アプリケーションビルダーのテンプレート切り替えウィザードに表示されます。 defaultWidth 領域のデフォルトの幅を指定します。この属性はすべての領域で必須です。有効な値は、Small、Medium、Large、Xlarge です。 - flexipage:formFactor
- このタグを使用して、表示されるデバイス種別に基づいてページ上のコンポーネントの占有スペースを指定します。このタグを flexipage:region タグの子として追加します。flexipage:region ごとに複数の flexipage:formFactor タグを使用して、フォーム要素の柔軟な動作を定義します。
属性 説明 type テンプレートが表示されるフォーム要素またはデバイス (デスクトップやタブレットなど) の種別。有効な値は、Medium (タブレット) と Large (デスクトップ) です。Small フォーム要素 (電話) の適切な幅の値は Small のみなので、Small 種別を指定する必要はありません。その関連付けは、Salesforce によって自動的に行われます。 width この領域のコンポーネントが表示される領域の使用可能なサイズ。有効な値は、Small、Medium、Large、Xlarge です。 たとえばこのコードスニペットでは、テンプレートが Large のフォーム要素に表示されるときに、領域の表示幅は Large になります。テンプレートが Medium のフォーム要素に表示されるときは、領域の表示幅が Small になります。1<flexipage:region name="right" label="Right Region" defaultWidth="Large"> 2 <flexipage:formFactor type="Large" width="Large" /> 3 <flexipage:formFactor type="Medium" width="Small" /> 4</flexipage:region>
次に、サンプル .cmp リソースで使用するデザインファイルを示します。デザインファイルの表示ラベルテキストは、新規ページウィザードのテンプレートの名前として表示されます。
1<design:component label="Two Region Custom App Page Template">
2 <flexipage:template >
3 <!-- The default width for the "left" region is "MEDIUM". In tablets,
4 the width is "SMALL" -->
5 <flexipage:region name="left" label="Left Region" defaultWidth="MEDIUM">
6 <flexipage:formfactor type="MEDIUM" width="SMALL" />
7 </flexipage:region>
8 <flexipage:region name="right" label="Right Region" defaultWidth="SMALL" />
9 </flexipage:template>
10</design:component>アプリケーションページのコンポーネントがサポートするデバイスは、<design:suppportedFormFactors> タグセットで指定します。アプリケーションページでカスタムテンプレートコンポーネントを作成する場合は、[Large (デスクトップ)] と [Small (電話)] の両方のフォームファクタを割り当てる必要があります。
次に、デスクトップと電話の両方をサポートするように設定された同じアプリケーションページのデザインファイルを示します。
1<design:component label="Two Region Custom App Page Template">
2 <flexipage:template >
3 <!-- The default width for the "left" region is "MEDIUM". In tablets,
4 the width is "SMALL" -->
5 <flexipage:region name="left" label="Left Region" defaultWidth="MEDIUM">
6 <flexipage:formfactor type="MEDIUM" width="SMALL" />
7 </flexipage:region>
8 <flexipage:region name="right" label="Right Region" defaultWidth="SMALL" />
9 </flexipage:template>
10 <design:supportedFormFactors>
11 <design:supportedFormFactor type="Small"/>
12 <design:supportedFormFactor type="Large"/>
13 </design:supportedFormFactors>
14</design:component>3.(省略可能) テンプレート画像の追加
.cmp リソースに description を追加した場合、ユーザが Lightning アプリケーションビルダーの新規ページウィザードでテンプレートを選択したときに説明とテンプレート画像の両方が表示されます。
SVG リソースを使用して、カスタムテンプレート画像を定義できます。
SVG リソースのサイズは 150 KB 以下、高さは 160 ピクセル以下、幅は 560 ピクセル以下にすることをお勧めします。