2019.07.01

SalesforceでホームページのカスタムLightningページテンプレートを作成する

猫山さん

はじめに

Salesforceにはホームページという、ユーザのログイン後に最初に表示されるページがあります。
このページにはユーザ固有の情報を様々なコンポーネントを使って表示することができます。

Lightning Experienceでカスタムのホームページを作成する場合、以下の2種類の方法があります。

1. テンプレートを使用して最初から作成する
2. 既存のホームページを編集する

テンプレートを使用する場合、デフォルトでは[標準ホームページテンプレート]というテンプレートしか選択できません。
[標準ホームページテンプレート]は以下のような構成になっています。

画面上部はサイドバーが含まれる２列構成になっており、
画面下部は２つのコンポーネントを配置できるテンプレートになっています。

[アプリケーションページ]や[レコードページ]には標準で様々なテンプレートが用意されていますが、[ホームページ]にはこのテンプレート1つしかありません。

上記の構成だと、たとえば[リストビュー]など横に情報が多い[Lightningコンポーネント]を設定すると、項目数によってはすべて表示されないことがあります。

そこで今回はWinter'18のリリースで可能になったカスタムのホームページテンプレートを作成して、画面いっぱいに[リストビュー]を表示したいと思います。

■1.「私のドメイン」を有効にする

カスタムテンプレートを使用する場合、事前に組織で [私のドメイン] を有効にする必要があります。手順は以下になります。

1. [設定] から、[クイック検索] ボックスに[ドメイン]と入力し、[私のドメイン] を選択します。
2. 任意のドメイン名を入力して[ドメインの登録]をクリックします。
3. ドメインの準備ができたら[ユーザにリリース]をクリックします。

有効にすることでテンプレート選択時の[カスタム]の画面表示が以下のように変わります。

■2. テンプレートコンポーネントの作成

カスタムLightningページテンプレートコンポーネントは以下のページがサポートされています。

・アプリケーションホページ
・ホームページ
・レコードページ

ページごとに実装するインターフェースが異なり、1つの[.cmpリソース]と[デザインリソース]で構成されます。まずは新規に[LightningComponent]を作成して、[.cmpリソース]と[デザインリソース]を以下のように編集します。
<aura:component implements="lightning:homeTemplate" description="one column layout for lightning home page layout">
        <aura:attribute name="main" type="Aura.Component[]" />
        {!v.main}
</aura:component>
SingleColumnHomePageTemplate.cmp
[.cmpリソース]ではテンプレートインターフェースとして[lightning:homeTemplate]を実装し、
テンプレート領域ごとに Aura.Component[] 型の属性を宣言する必要があります。
[description]属性は、省略可能ですが設定することが推奨されています。
定義すると、Lightning アプリケーションビルダーの新規ページウィザードのテンプレート画像の下に説明文として表示されます。
<design:component>
        <flexipage:template>
                <flexipage:region name="main" defaultWidth="Xlarge">
                </flexipage:region>
        </flexipage:template>
</design:component>
SingleColumnHomePageTemplate.design
[デザインリソース]では、テンプレートを使用するページの領域や使用可能なコンポーネントの種別を設定することができます。
[flexipage:region]の属性を設定することでテンプレートの領域を設定できます。
今回設定した属性の詳細は以下になります。
属性 説明
name Aura.Component[] 型としてマークされる .cmp リソースの属性の名前(今回であれば[main])。領域として属性にフラグを設定します。
defaultWidth 領域のデフォルトの幅を指定します。この属性はすべての領域で必須です。有効な値は、Small、Medium、Large、Xlarge です。

■3. カスタムホームページの作成

再度[Lightning アプリケーションビルダー]でカスタムホームページのテンプレート選択画面を表示すると、作成したテンプレートが選択できるようになっています。
[description]属性で設定した説明文も表示されています。

このテンプレートでカスタムホームページを作成し、[Lightningコンポーネント]から[リストビュー]を選択して任意のオブジェクトを設定します。
ホームページを表示すると以下のようになりました。いい感じです。

参考サイト

・リリースノートWinter'18 リリースノート [Lightning コンポーネントを使用したカスタムページテンプレートの作成]
・カスタム Lightning ページテンプレートコンポーネントの作成
22 件
    　
  • banner
  • banner

関連する記事

関連するキーワード