2018.04.18

LightningコミュニティでSkyVisualEditorのページを使う

  • このエントリーをはてなブックマークに追加
  • follow us in feedly
Salesforceのコミュニティ機能では、コミュニティ作成時にテンプレートを選択することができます。
「SalesforceタブとVisualforce」テンプレートを使用する場合は、SkyVisualEditorで作成したページをSalesforceのクラシック表示と同じような手順で公開することができます。
しかし、「カスタマーサービス(Napili)」や「Partner Central」テンプレート等のLightningコミュニティを使用する場合、SkyVisualEditorで作成したページを表示するために一工夫する必要があります。

今回は、Lightningコミュニティで、SkyVisualEditorで作成したページを使用する方法についてご紹介します。

事前準備 Visualforceページの設定を変更する

SkyVisualEditorからデプロイしたページは、そのままの設定ではLightningコミュニティ上で使用することができません。
下記の手順でページの設定を変更する必要があります。

Visualforceの編集画面を開く

下記手順に従ってVisualforceの一覧画面を開きます。

(Lightning Experienceの場合) 「設定」-> 「プラットフォームツール」 -> 「カスタムコード」 -> 「Visualforce ページ」
(Classicの場合) 「設定」-> 「ビルド」 -> 「開発」 -> 「Visualforce ページ」

開いた一覧画面から、コミュニティで表示したいページの編集画面を開きます。

Visualforceページの設定を変更する

「Lightning Experience、Lightning コミュニティ、およびモバイルアプリケーションで利用可能」にチェックを入れて保存します。

Salesforce標準のVisualforce表示コンポーネントを使用する

ここでは、コミュニティビルダーで新規ページを追加し、Salesforceが標準提供している「Visualforce Page」コンポーネントを使用してページを表示する方法を紹介します。

コミュニティビルダーのヘッダーから、新規ページを追加します。

ページの種別を選択します。ここでは標準ページを選択します。

左側のコンポーネントメニューから、「Visualforce Page」コンポーネントを画面上にドラッグ&ドロップで配置します。

Visualforce Pageコンポーネントの「Visualforce ページ名」プロパティを選択することで、画面上にSkyVisualEditorからデプロイしたページを表示することができます。

設定後に画面を表示したサンプル画面です。 この方式を使用するとナビゲーションバーにリンクを表示することができますが、配置するページの高さを固定しなければならないためスクロールバーが二重に表示されることがあります。

Visualforceページを開くためのリンクを作成する

コンポーネントを使用する方法のほかに、リンクを追加することでVisualforceページを表示する方法があります。
ここでは、コミュニティのHomeページにVisualforceページへのリンクを追加する方法を紹介します。
Lightningコミュニティでは、
/s/sfdcpage/[/apex/ページ名をパーセントエンコードした文字列]
にアクセスすることで、Visualforceを表示することができます。
よって、「HTMLエディタ」コンポーネントを使用して上記URLへのリンクを作成することで、Visualforceページを表示するためのリンクを作成することができます。

Homeページの編集画面で、「HTMLエディタ」コンポーネントを画面上に配置します。

HTMLエディタ画面で、リンクを表示するためのHTMLを記述します。 記述内容は下記の通りです。
<a href="./sfdcpage/%2Fapex%2F[Visualforceページ名]">[リンク文]</a>
hrefに設定した内容の"./sfdcpage/%2Fapex%2F"部分は固定値になります。

設定後にページを表示した画面です。 この方式だとナビゲーションバーにリンクを表示することはできませんが、ページの高さが画面と同期するのでスクロールバーの表示は1つになります。

おわりに

今回は、LightningコミュニティでSkyVisualEditorで作成したページを表示する方法を紹介しました。
旧来のClassic環境からLightning環境への移行の参考になれば幸いです。

SkyVisualEditor資料ダウンロード

25 件

関連する記事