Lightning コンポーネント開発者ガイド
jカスタム Lightning ページテンプレートコンポーネントの作成
- lightning:appHomeTemplate
- lightning:homeTemplate
- lightning:recordHomeTemplate
1.テンプレートコンポーネント構造の構築
カスタムテンプレートは、1 つの .cmp リソースとデザインリソースが含まれている必要のある Lightning コンポーネントバンドルです。.cmp リソースでは、テンプレートインターフェースを実装し、テンプレート領域ごとに Aura.Component[] 型の属性を宣言する必要があります。Aura.Component[] 型では、コンポーネントのコレクションとして属性を定義します。
次に、lightning:layout コンポーネントと Salesforce Lightning Design System (SLDS) を使用してスタイルを設定する 2 列のアプリケーションページテンプレートの .cmp リソースの例を示します。
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 horizontalAlign="spread">
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 リソースの属性の名前。領域として属性にフラグを設定します。 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" defaultWidth="Large"> 2 <flexipage:formFactor type="Large" width="Large" /> 3 <flexipage:formFactor type="Medium" width="Small" /> 4 </flexipage:region>
1<design:component label="Two Column 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" defaultWidth="MEDIUM">
6 <flexipage:formfactor type="MEDIUM" width="SMALL" />
7 </flexipage:region>
8 <flexipage:region name="right" defaultWidth="SMALL" />
9 </flexipage:template>
10</design:component>3.(省略可能) テンプレート画像の追加
.cmp リソースに description を追加した場合、ユーザが Lightning アプリケーションビルダーの新規ページウィザードでテンプレートを選択したときに説明とテンプレート画像の両方が表示されます。
SVG リソースを使用して、カスタムテンプレート画像を定義できます。
SVG リソースのサイズは 150KB 以下、高さは 160px 以下、幅は 560px 以下にすることをお勧めします。