ポスト
Salesforceのコミュニティ機能では、コミュニティ作成時にテンプレートを選択することができます。
「SalesforceタブとVisualforce」テンプレートを使用する場合は、SkyVisualEditorで作成したページをSalesforceのクラシック表示と同じような手順で公開することができます。
しかし、「カスタマーサービス(Napili)」や「Partner Central」テンプレート等のLightningコミュニティを使用する場合、SkyVisualEditorで作成したページを表示するために一工夫する必要があります。
今回は、Lightningコミュニティで、SkyVisualEditorで作成したページを使用する方法についてご紹介します。
「SalesforceタブとVisualforce」テンプレートを使用する場合は、SkyVisualEditorで作成したページをSalesforceのクラシック表示と同じような手順で公開することができます。
しかし、「カスタマーサービス(Napili)」や「Partner Central」テンプレート等のLightningコミュニティを使用する場合、SkyVisualEditorで作成したページを表示するために一工夫する必要があります。
今回は、Lightningコミュニティで、SkyVisualEditorで作成したページを使用する方法についてご紹介します。
事前準備 Visualforceページの設定を変更する
SkyVisualEditorからデプロイしたページは、そのままの設定ではLightningコミュニティ上で使用することができません。
下記の手順でページの設定を変更する必要があります。
下記の手順でページの設定を変更する必要があります。
Visualforceの編集画面を開く
下記手順に従ってVisualforceの一覧画面を開きます。
(Lightning Experienceの場合) 「設定」-> 「プラットフォームツール」 -> 「カスタムコード」 -> 「Visualforce ページ」
(Classicの場合) 「設定」-> 「ビルド」 -> 「開発」 -> 「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ページへのリンクを追加する方法を紹介します。
ここでは、コミュニティのHomeページにVisualforceページへのリンクを追加する方法を紹介します。
Lightningコミュニティでは、
/s/sfdcpage/[/apex/ページ名をパーセントエンコードした文字列]
にアクセスすることで、Visualforceを表示することができます。
よって、「HTMLエディタ」コンポーネントを使用して上記URLへのリンクを作成することで、Visualforceページを表示するためのリンクを作成することができます。
/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環境への移行の参考になれば幸いです。
旧来のClassic環境からLightning環境への移行の参考になれば幸いです。
25 件
