SkyVisualEditor V7新機能で実現するポータル画面

皆さん、SkyVisualEditor V7新機能使ってますか？？？
2017年7月2日にバージョンアップし、便利な機能をリリースしています。
今回はその内容と、新機能のユースケースとして「ポータル画面」を作成する方法をご紹介します。

V7新機能概要

まずは、V7新機能をざっくりご紹介します。個々の機能の詳細についてはヘルプ及びリリースノートをご参照ください。

ライトデータテーブル

描画速度を高速化した新しいデータテーブルの登場です。
従来のデータテーブル同様のページングやソートの機能も兼ね備えつつ、個々のレコードの操作はモーダルウインドウで実行する新しいタイプのデータテーブルです。
https://doc.terrasky.com/pages/viewpage.action?pageId=14063727

主オブジェクトの保存をスキップ

主オブジェクトと関連オブジェクトの親子画面で、関連オブジェクトのみ保存を実行できるようになりました。
これにより、データテーブルのみ配置した画面上でレコードの追加や編集を行うことが可能となります。
https://doc.terrasky.com/pages/viewpage.action?pageId=10003253

検索画面にAppComponentが配置可能に

検索画面にAppComponentが配置できるようになりました。
検索条件項目に独自のUIを組み込んだり、ヘッダやフッタを追加してデザインをカスタマイズしたりして、検索画面を更にグレードアップ可能です。
https://doc.terrasky.com/pages/viewpage.action?pageId=14063781

住所補完AppComponentの機能強化

郵便番号入力後に住所を補完する項目を1項目に設定可能となりました。
カスタムの住所項目を使用している場合にご活用いただけます。
https://s3.amazonaws.com/www.skyvisualeditor.com/AppComponent/SkyVisualEditor/appcomponent_skyvisualeditor_guide.pdf#pagemode=bookmarks&zoom=100&page=14

新機能ユースケース：ポータル画面の実装

V7新機能の「ライトデータテーブル」を使用して、日々の業務で便利に使えるポータル画面を作成してみたいと思います。
ポータル画面は「Dashboardレイアウト」を使用して作成します。Dashboardレイアウトは今まで読み取り専用でしかデータテーブルを置けませんでしたが、ライトデータテーブルを使うと画面遷移せずに行追加できますので、Dashboardレイアウト+ライトデータテーブルの組み合わせはポータル画面に最適です。
その他の従来機能も組み合わせて実装しますので、いい感じにご利用いただける画面になっていると思います。

出来上がり画面イメージとその特徴

行動と商談のライトデータテーブル。絞込条件を設定して必要な情報にすぐアクセス。
レコードの追加はモーダルウインドウで今風（？）に。
Chatterフィードで最新情報も見逃さない。
オリジナルヘッダを画像で配置してポータルを華やかに。

使用したレイアウト：Dashboardレイアウト（ポータル画面）、Salesforceレイアウト（行動/商談登録画面）
作成画面数：3（ポータル用画面✕1、行動登録用画面✕1、商談登録用画面✕1）
使用した主なコンポーネント：ライトデータテーブル、自由テキスト、画像、Chatterフィード

実装手順

ポータル画面は以下の手順で実装します。運用に合わせて、適宜必要な箇所を参考にして実装してみてください。

1.下準備（ヘッダ用画像の作成、SkyVisualEditor標準AppComponentのインストール）

まず、ヘッダ用画像を作成します。今回は「TerraSkyPortal」というタイトルヘッダ画像を準備しました。
用意した画像を静的リソースにアップロードします。静的リソースまたはWeb上にアップロードしておくことで、SkyVisualEditorの画像コンポーネントから呼び出せるようになります。
ラベルや名前は任意のものをご使用ください。

次に、まだSalesforce組織にSkyVisualEditor標準AppComponentがインストールされていない場合はインストールします。
SkyVisualEditor標準AppComponentをインストールすると、Chatterフィードコンポーネントが利用可能になります。

2.行動登録用画面の作成

メインのポータル画面を作成する前に、行追加時に開くモーダル用の画面を作成します。
ライトデータテーブルは詳細画面をモーダルで開くので、別途Visualforceページを準備しておく必要があります。

Salesforceレイアウトで主オブジェクトを「行動」にした画面を新規作成するか、「ページレイアウト取得」機能を使用して行動の編集画面を新規作成します。
ページプロパティの「ヘッダー表示」「サイドバー表示」はOFFにしておきます。
モーダル用なので、今回は少し小さめにレイアウトしておきました（幅800px、高さ400px）。
作成が完了したらデプロイしておきます。