2018.01.24

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

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

皆さん、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レイアウト+ライトデータテーブルの組み合わせはポータル画面に最適です。
その他の従来機能も組み合わせて実装しますので、いい感じにご利用いただける画面になっていると思います。

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

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

  • 使用したレイアウト: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)。
作成が完了したらデプロイしておきます。

3.商談登録用画面の作成

行動と同様に、商談登録用画面を作成します。

作成が完了したらデプロイしておきます。

4.ポータル画面の作成

Dashboardレイアウトで画面を新規作成します。
「Dashboardレイアウトのテンプレート選択」ダイアログで3列を選択しておきます。

フレキシブルパネルをクリックし、プロパティでレイアウトを修正します。
1列目にChatterフィード、2列目は余白、3列目にライトデータテーブルを配置するので、1列目を3、2列目を1にしておきます。

1の手順で準備したヘッダ用画像を配置します。
「画像」をフレキシブルパネル外の画面上部に配置し、配置する画像としてアップロード済みの静的リソースを選択します。

「Chatterフィード」をフレキシブルパネルの1列目に配置します。

「自由テキスト」をフレキシブルパネルの3列目に2個配置し、それぞれタイトルを任意のテキストに修正します。
今回は「今後のスケジュール」と「私の商談(未完了)」としました。
文字の大きさや色等はお好みのものに設定してください。

1個目の自由テキストの下に「ライトデータテーブル」を配置します。
ライトデータテーブルのプロパティは以下のように設定します。

オブジェクト:行動(全て表示にチェックを入れてから選択します)
列数:5
ページング:True(ページ表示件数5)

ライトデータテーブルを配置したら、コンポーネントプロパティを以下のとおり設定します。

ページ幅に合わせる:True
行追加ボタン位置:上のみ
行追加ページ:2で作成した画面を選択
行追加ページサイズ指定:True
行追加ページ幅:800
行追加ページ高さ:400

更に、絞込条件を以下の通り設定します。

検索条件:開始日時 >= TODAY(「特別値設定」で今日を選択)
ソート条件:開始日時(昇順)

ライトデータテーブルに行動の項目を配置します。

同様に、商談用のライトデータテーブルも2個目の自由テキストの下に配置します。

コンポーネントプロパティは行動と同様ですが、行追加ページは3で作成した画面を選択し、絞込条件は以下のとおり設定します。

検索条件:所有者IDのユーザIDが{UserId}と一致する(「特別値」をクリックして入力)、完了フラグがFalseと一致する、のAND条件
ソート条件:完了予定日(昇順)

ライトデータテーブルに商談の項目を配置します。

以上でポータル画面の作成は完了です。デプロイして動きを確認してみましょう。
行動や商談が新規登録できれば成功です。

あとは作成した画面を実際に利用するための設定(Visualforceページアクセスの有効化設定、Visualforceタブの作成)を行えば、ユーザへのリリースも完了です。

今回はV7新機能から「ライトデータテーブル」にスポットを当ててご紹介しました。
他の新機能も是非お試しになっていただき、Salesforce/SkyVisualEditorの更なるご活用を促進していただければ幸いです!


SkyVisualEditorアドミンカフェのご案内

弊社エンジニアのアドバイスを受けながら、SkyVisualEditorで画面開発しませんか?
アドミンカフェは静かな環境で集中して作業できる自習形式のイベントです

38 件

関連する記事