1

データ入力の効率が向上する画面を簡単作成
RaySheetPage - チュートリアル

2

テーマ

RaySheetPageで実現できる2つのパターンを紹介
３つの関連オブジェクトの俯瞰表示明細一覧の埋め込み

セル選択した取引先に関連する契約、注文のデータを1画面で俯瞰的に表示できる

入力効率が求められる明細の入力にRaySheetを利用できる

セル選択

１つの画面に複数のRaySheetを配置した画面の作成
設定手順： 本資料の14〜26ページ

レコードページにRaySheetを埋め込む方法
設定手順： 本資料の27〜33ページ

3

4

RaySheetの基本

RaySheetの構成

5すべてSalesforce内で完結
Salesforce①一覧のデザイン②実行部分

柔軟に一覧ビューを作成できるデザイン機能

Excel感覚で入力と表示

SalesforceとRaySheetの役割
Salesforce

SFA／CRM• 顧客／商談／見込み客管理• レポート／ダッシュボードの作成• ワークフロー など

一覧詳細設定• 一覧のレイアウト• 一覧の各種設定

Salesforceで設定したプロファイル・アクセス権等は引き継いで動作可能6本資料ではこの機能を解説

RaySheetの利用シーン

基本利用
Sales Cloudで使う

7

拡張利用
簡単設定で自由にレイアウト

Visualforceページで使う

AppExchangeからインストールしてLightning Platformを利用してあらゆるVisualforceページを利用してローコード

そのまますぐに利用する

領域で利用するの開発に利用する一覧を含む業務画面を簡単に開発

Salesforceのタブに追加

視認性が高い一覧画面で大量のデータを簡単に編集／閲覧

画面上に複数の一覧を表示して利用
Lightningページに埋め込んで利用（※1）

利用する機能1画面に親子関係を持つ関連データを表示可能

RaySheetアプリ

利用する機能利用する機能RaySheetPage/RaySheetPage Designer

どこでもView※1 Lightningアプリケーションビルダーで設定することが可能8

ご利用開始の準備
RaySheetインストール

RaySheetを使用するための準備

１

２

AppExchangeからRaySheetをインストール
https://appexchangejp.salesforce.com/appxListing
Detail?listingId=a0N3A00000ERkgOUATRaySheetの起動
アプリケーションランチャーから起動「今すぐ入手」ボタンをクリック
30日間無料でお試し可能
有償版と同一機能を利用可能
30日後に自動的に課金されることはありません「RaySheet」をクリック
アプリケーションランチャーからRaySheetを起動します
Salesforce Classicでは画面右上のアプリケーションメニューから「RaySheet」をクリック

9

10

RaySheetPageとは

RaySheetPageでできること

11• 複数のRaySheetを配置した画面を作成できる• 専用デザイナにより18種類の画面レイアウトを誰でもカンタンに設定できる
RaySheetPage Designer• レイアウトの設定画面を提供• 18種類の画面レイアウトから選択可能• ビュー間の親子関係の設定が可能
RaySheetPage

RaySheetPage Designerで作成したページは様々な場面で利用可能

Salesforceのタブに追加

タブに追加すれば、よく使うビューに簡単にアクセスできる
Lightningページに埋め込み

Lightningアプリケーションビルダーで以下にRaySheetPageを配置できる①ホームページ②レコードページ③アプリケーションページ

RaySheetPageの主な画面機能一覧でチェックしたRaySheetPageを一括削除します
RaySheetPageを新規作成します

RaySheetPageの管理画面を表示
作成済みのRaySheetPageの設定ができる
編集：RaySheetPageの設定画面（デザイン画面）を表示します
プレビュー：新規のブラウザタブを開いてプレビューを表示します
共有設定：RaySheetPageの共有状態の設定画面を表示します
複製：RaySheetPageを複製します
削除：RaySheetPageを削除します

作成済みのRaySheetPageは一覧画面で管理

12

RaySheetPageはデザイン画面で作成
RaySheetPage名
ページ名の設定

13

RaySheetPageをレコードページに埋め込む場合に使用する設定

画面レイアウト
選択した画面レイアウトを画面下部に表示

フォルダ表示するRaySheetのビューが属するフォルダを選択

ビュー

歯車アイコン
エリアごとの外観と詳細を設定する画面を表示

このエリアに表示するRaySheetのビューを選択

親画面
オブジェクトを関連付けて表示する
場合に親オブジェクトのエリアを選択

参照項目
親オブジェクトの参照項目を選択

デザイン画面はRaySheetPage Designer
一覧画面の「新規」または「編集」から起動

14

RaySheetPageの作成 Part 1
３つの関連オブジェクトの俯瞰表示

RaySheetPage作成前の下準備
RaySheetのフォルダとビューを作成

15

ビューの項目列、検索パネル、関連オブジェクトを設定
取引先検索パネルの設定• 取引先名• 業種
列項目の設定••••作成するフォルダ
• 契約管理作成するビュー（標準オブジェクト）
• 取引先
• 契約
• 注文

取引先名
取引先 電話業種
都道府県 (請求先)契約
列項目の設定• 契約番号• 契約 期間• 契約開始日• 契約終了日• 状況• 有効日

ワンポイントアドバイス
フォルダとビューの設定手順が分からない場合は以下のチュートリアル（PDF）を参照してください。
• 商談管理ビュー作成 - チュートリアル

注文列項目の設定
•••
•
•
•
•

注文番号
Price Book (価格表)
状況
注文種別
注文 金額
注文開始日
有効化日注文商品 (注文の関連オブジェクト)
列項目の設定•••価格表エントリ単価数量

1-1. RaySheetPageのデザイン画面を表示
RaySheetPage Designerを開く

以下のRaySheetPage Designerをクリック• アプリケーションランチャーの[すべての項目]• RaySheetアプリ内のタブ

新規ボタンをクリック

16

1-2. 画面レイアウトの指定
ページ名と画面レイアウトを設定

契約管理画面［レコードページで使用する］
チェック OFF

２列-左側上下2分割• 画面レイアウトは18種類の中から選択可能• 最大で4分割の画面レイアウトを用意

17

1-3. RaySheetビューの割り当て
各エリアに表示するRaySheetビューの設定

フォルダ：契約管理
ビュー：取引先親画面：なしフォルダ：契約管理
ビュー：契約
親画面：エリアＡ
参照項目：取引先(取引先)親子関係を持つ３つのオブジェクトの設定• ここでは「RaySheetPage作成前の下準備」で用意したフォルダとビューを指定• 取引先、契約、注文は「親 - 子 - 孫」の関係を持つ• RaySheetPageで関連するオブジェクトを表示するには「親画面」項目の設定が必要

フォルダ：契約管理
ビュー：注文親画面：エリアＢ
参照項目：契約(契約)作成したRaySheetPageは一覧上で管理される

18

ブレークタイム：オブジェクトの親子関係の設定を解説
RaySheetPageは親子関係を持つオブジェクトのデータを連動して表示できます。

19

RaySheetPageのデザイン画面で親子関係を簡単設定

親オブジェクト
親オブジェクト子オブジェクト子オブジェクト①

取引先の一覧（上部）で選択したデータに関連するデータを絞り込んで取引先責任者のデータを表示②

設定方法
親子関係の設定は子オブジェクトのエリアで設定します。
① 親オブジェクトの表示エリアを指定② 親オブジェクトの参照項目を指定

1-4. RaySheetPageの確認一覧からプレビューをクリックしてRaySheetPageのレイアウトを確認

ワンポイントアドバイス• RaySheetPageのデザイン画面で設定した内容はプレビューで確認できます。

20

1-5. RaySheetPageの外観・機能の設定（実行画面）

21

RaySheetPageの外観・機能の設定• エリアごとに設定が可能• 関連オブジェクトや検索パネルの初期表示状態を設定可能• ツールバーの各ボタンやビューのデザイン画面の表示状態を設定可能

1-5. RaySheetPageの外観設定（設定）22

一覧から編集をクリックしてRaySheetPageのデザイン画面を表示

歯車アイコンからエリアごとの外観・機能の設定画面を表示

1-5. RaySheetPageの外観設定（設定）エリアCの外観・機能を設定
以下の項目をチェック ON• タイトルバーを表示する• ツールバーを表示する[関連オブジェクトを表示する]チェック ON

タイトルバーの表示
ツールバーの表示※以下のボタンは非表示• 検索• エクスポート• 作業ウィンドウ
関連オブジェクトの表示• 高さ：350• 幅：200• 位置：下

設定前の画面以下のツールバーの設定項目をチェック OFF• 検索ボタンを表示する• エクスポートボタンを表示する• 作業ウィンドウボタンを表示する

タイトルバーは非表示

ツールバーに以下のボタンが表示されている• 検索• エクスポート• 作業ウィンドウ
関連オブジェクトは折り畳まれて表示

23

1-5. RaySheetPageの外観設定（設定）エリアA・Bの外観・機能を設定[外観]-[一般設定]
以下の項目をチェック ON• タイトルバーを表示する• ツールバーを表示する[外観]-[検索パネルの設定]
以下の項目をチェック ON• 検索パネルを表示する[外観]-[一般設定]
以下の項目をチェック ON• タイトルバーを表示する• ツールバーを表示する

24

1-6. タブに追加
RaySheetPageを開く

RaySheetPageをタブに追加「契約管理画面」をナビゲーションバーに追加する「契約管理画面」を新しいタブで開く

25

完成

26

27

RaySheetPageの作成 Part 2
明細一覧の埋め込み

RaySheetPage作成前の下準備
RaySheetのフォルダとビューを作成

フォルダ名
商談管理

作成するビュー（標準オブジェクト）• 商談

ワンポイントアドバイス
フォルダとビューの設定手順が分からない場合は以下のチュートリアル（PDF）を参照してください。
• 商談管理ビュー作成 - チュートリアル

28

ビューの項目列を設定

商談列項目の設定• 商談名• 完了予定日• フェーズ• 確率(%)• 金額

2-1. RaySheetPageのデザイン画面を表示
RaySheetPage Designerを開く

以下のRaySheetPage Designerをクリック• アプリケーションランチャーの[すべての項目]• RaySheetアプリ内のタブ

新規ボタンをクリック

29

2-2. 画面レイアウト・レコードページの設定

30

ページ名と画面レイアウトを設定

商談一覧• レコードページで使用する：ON• その他のオブジェクトを表示する：OFF• レコードページのオブジェクト：取引先

分割なし
レコードページを設定したRaySheetPageは一覧上にチェックが表示される
フォルダ：商談管理
ビュー：商談親画面：レコードページ
参照項目：取引先(取引先)レコードページで使用する場合の設定• 画面上部の[レコードページで使用する]をONにするとエリアの[親画面]にレコードページを設定可能• レコードページの設定により、レコードページに関連するデータが絞り込まれてRaySheetPageに表示される

2-3. レコードページにRaySheetを配置
取引先のレコードページからLightning アプリケーションビルダーを起動

RaySheetPageコンポーネントを取引先のレコードページに追加

編集ページ

RaySheetPage31

2-4. RaySheetPageの設定

32

RaySheetPageのプロパティを設定保存して完了

商談一覧

300

完成

33

＋＠ RaySheetPageの共有（解説）34

RaySheetPageが共有されていない場合
RaySheetPage参照が可能

RaySheetPage自体を参照できない

RaySheetPage
RaySheetのビュー

RaySheetのビューが共有されていない場合（RaySheetPageは共有されている）

ユーザA
RaySheetPageの所有者

参照できないユーザB
他のRaySheetユーザ

既定の状態ではRaySheetPage所有者以外のユーザはRaySheetPageを参照できません。
他のユーザがRaySheetPageを参照するには以下の共有設定が必要です。
① RaySheetのビュー(RaySheetアプリで設定)② RaySheetPage (RaySheetPage Designerで設定)

RaySheetPageは表示できてもRaySheetのビューが表示できない

＋＠ RaySheetPageの共有（設定）35

RaySheetビューの共有設定
共有するビューが含まれる
フォルダを確認

共有状態を設定

共有するフォルダの「…」をクリック

全員に共有

共有状態の変更

参照のみ
共有設定したフォルダは「共有フォルダ」の配下に移動する

＋＠ RaySheetPageの共有（設定）36

RaySheetPageの共有設定
RaySheetPage Designerの一覧からRaySheetPageの共有状態を設定

共有状態を設定

全員に共有

参照のみ

共有設定したRaySheetPageは一覧上にチェックが表示される

＋＠ RaySheetPageの共有（解説）全員に共有した場合はすべての内部ユーザがRaySheetPageを参照可能になる

参照が可能

37

特定のユーザやロールに参照権限を設定することも可能
共有を追加

RaySheetPage
ユーザ
RaySheetPageを共有するユーザ

ユーザA
RaySheetPageの所有者

参照のみ全員が参照可能

ユーザB
参照可能

ユーザB

ユーザC

ユーザD

他のRaySheetユーザ

RaySheetPageの所有者以外ではユーザBだけが参照可能

ユーザC ユーザD
参照不可

＋＠ 関連性を持たないデータの表示（実行画面）

2019年度
ロスト商談

2020年度
ロスト商談

2019年度
成立商談

2020年度
成立商談

簡易ダッシュボードのように活用
４つの商談データを１つの画面に表示• 上段に2年分のロスト商談• 下段に2年分の成立商談

38

＋＠ 関連性を持たないデータの表示（設定）

すべてのエリアで「親画面」を未設定にすれば関連性を持たないデータを並べて表示可能

39