Salesforceの画面カスタマイズをノーコードで ―RaySheetPage Designerで複数の一覧を表示する方法―

「RaySheetPage Designer」を利用すると、RaySheetのビューを用いて、Salesforceの画面をノーコードでレイアウト設定することができます。
この記事ではRaySheetPage Designerを利用して、RaySheetのビューを一画面に複数表示する方法とそのポイントをご紹介します。

RaySheetPage Designerとは

RaySheetPage Designerは、2つ以上のRaySheetのビューを一画面に表示する時にデザイン設定の役割を担います。業務用途に合った画面レイアウトをノーコードで設定できる点が大きな魅力です。

様々なレイアウトが実現できる

今回は[取引先-取引先責任者-商談] のオブジェクトで構成する 、「3画面構成」のレイアウトの設定方法と設定時のポイントをご紹介します。

3画面レイアウトでRaySheetを表示する

ここから先は設定方法をご紹介しますが、動画でも設定方法をご紹介していますので、実際に操作を確認されたい方はご覧ください。

vimeo.com

RaySheetPage Designerで複数の一覧を表示するための設定方法

設定は次の3ステップで行います。

    1. RaySheetアプリで一覧を作成
    2. RaySheetPage Designerで画面レイアウトを設定
    3. 作成したページをRaySheetPageで確認

RaySheetPage を利用する大きな手順

【1】RaySheetアプリでビューを作成

はじめに、RaySheetアプリでビューの作成を行います。
フォルダモードでビューを複数作成する場合は、各ビューが異なるフォルダに所属していても問題ありません。

RaySheetアプリで作成したビュー

【共有範囲の設定】

ここで1つポイントとなるのは、「RaySheetの一覧の共有範囲」です。
RaySheetでは、ビューが所属しているフォルダに対して共有範囲を設定できます。
この後に作成するRaySheetPageを公開したい方に対して、RaySheetアプリの該当ビューを公開状態にする必要があります。設定は所属するフォルダで行います。

RaySheetアプリの共有範囲の設定

【2】RaySheetPage Designerでの設定

次にRaySheetPage Designerで画面レイアウトの設定を行います。
ページを新規作成し、設定を開始します。レイアウトは全18種類から選択することができます。

今回は「2行-下部左右2分割」というレイアウトを選択します。レイアウトをクリックすると画面構成が切り替わりますので、実際に確認しながら設定を行ってみてください。
また、各エリアに表示させるビューはここで選択します。

RaySheetPage Designerの設定

【親子関係を持つオブジェクトの設定】

今回利用する3つのオブジェクト(取引先 – 取引先責任者 – 商談) は親子関係を持ちます。
RaySheetPage Designerでは、親画面とオブジェクト同士を関連付けるキー項目を指定することで他のオブジェクトとの紐づけを設定します。
※オブジェクトを紐づけるキー項目は、RaySheetのビュー上に項目として保持しなくても紐づけを行うことが可能です。

親子関係を持つオブジェクトの設定

【ページの共有範囲設定】

RaySheetアプリでビューを作成した際にフォルダに対する共有設定を行いましたが、RaySheetPageにも同様に共有範囲設定を行います。ここでの設定は「RaySheetPageにアクセスするための設定」となります。

RaySheetPage Designerでのページの共有範囲設定

【3】作成したRaySheetPageの確認

RaySheetPage Designerで設定を行ったら、RaySheetPageに画面を切り替えて作成したページを確認します。
※RaySheetPage Designerで「プレビュー」をクリックした場合にも、自動的にRaySheetPageに画面が切り替わります。

作成したRaySheetPage の確認

【RaySheetPageをタブで利用する】

作成したRaySheetPageはSalesforceのタブに追加して利用することができます。
設定はRaySheetPageで次のように行います。

RaySheetPageを確認する

トライアル

トライアル版でぜひ実際の動作をお試しください。

raykit.grapecity.com