2018.07.13

SkyVisualEditor バージョン9.0 新機能紹介 「Lightningコンポーネント化」

柳瀬 貴博
みなさんこんにちは。

SkyVisualEditorは2018年6月27日に、新バージョンであるバージョン9.0のプレリリース版をリリースしました。 今回は、バージョン9.0で新しく追加された機能である「Lightningコンポーネント化」機能について紹介したいと思います。

「Lightningコンポーネント化」機能とは

この機能は、SkyVisualEditorで作成したVisualforceページを、Lightningコンポーネントとしてそのまま使用できるようになる機能です。

使い方

ページプロパティの「Lightning Component」内にある、「Lightningコンポーネントを出力する」チェックをONにして画面をデプロイすると、Lightningコンポーネントとして使用することができます。

デプロイしたコンポーネントがLightningアプリケーションビルダーで表示されます。

使用可能な場所

Lightningコンポーネント化したページは、下記の場所で使用することができます。

  • Lightning アプリケーションビルダー
    • アプリケーションページ
    • レコードページ
    • ホームページ
  • ユーティリティバー
  • クイックアクション
  • Lightningコンポーネントタブ
  • コミュニティビルダー
  • カスタムコンポーネント
    • Lightningコンポーネント
    • Lightningアプリケーション

Lightningコンポーネント化機能でできること

SkyVisualEditorで作成したページがそのままコンポーネントとして使用できるだけでは、Salesforceが標準で提供しているVisualforceコンポーネントと大した違いがありませんが、コンポーネント化機能では、Visualforceコンポーネントでは実現できない機能があります。

1.ページ間連携

SkyVisualEditorから出力したLightningコンポーネントでは、コンポーネントで表示しているページ間をイベントで連携することができます。

例：左列の検索テンプレートページでレコードを検索し、詳細表示リンクをクリックすることで右列の詳細表示ページをきりかえる

設定方法

カスタムボタンとカスタムリンクのプロパティ「動作選択」の選択肢に、「Lightningコンポーネント連携」という値が追加されました。 Lightningコンポーネント連携プロパティのボタンを押下し「Lightningコンポーネント連携設定」画面を開き、連携先のページ名を「イベント連携先ページ名」に入力してOKボタンを押します。

送信パラメータには、連携先ページに渡したい値を設定します(idはデフォルトで設定されています)。 連携先のページでは、「URLパラメータ設定」に設定したパラメータキーを使用することで値を受け取ることができます。

デプロイしたコンポーネントは、Lightningアプリケーションビルダーで配置できます。 アプリケーションビルダーで、「アプリケーションページ」を使用してデプロイしたコンポーネントを配置すれば完了です。

2.Lightningイベント連携

作成したページ内から、JavaScriptを使用してLightningアプリケーションイベントを送信することができます。

設定方法

JavaScriptを呼び出せる設定箇所で、下記のコードを記述します。(この画面ではカスタムボタンのOnClickプロパティを使用しています)
SkyEditor.Lightning.fireEvent('[送信するLightningイベント名]',{送信するパラメータ});

// 今回の例では下記のコードを記述しています
SkyEditor.Lightning.fireEvent('force:showToast',{'message':'トースト表示！'});
sample.js

作成したサンプルページをアプリケーションビルダーで画面に配置すると、動画のような動作をします。 Visualforceページ内のボタンからLightning Experience上にアプリケーションイベントを送信できていることがわかります。

おわりに

今回は、2018年7月29日に公開されるバージョン9.0の新機能の1つを紹介しました。
現在、プレリリース環境でお試しいただけます。
興味のある方はぜひお試しください。
26 件
    　
  • banner
  • banner

関連する記事

関連するキーワード