社内にあるExcelをSalesforce+RaySheetでシステム化する際に、「どこまで元々のExcelに近い見た目にできるのか」を気にされる方は意外と多いんじゃないでしょうか？
もちろん、100%これまでと同じにするのがベストではないですが、馴染みのある画面であれば入力時の障壁も下がりますし、純粋に見やすいから前と同じように設定したい場合も多いと思います。
今回は、こちらの 項目の色や背景色を変更しているExcelを、RaySheetではどのように再現できるのか解説したいと思います。
はじめに
Excelファイルの概要
今回使用するExcelファイルはこちらです。
- 上下で親子関係を持つ項目
- 項目にデザインを設定している
・項目の背景色を変更している
・項目名の色を変更している（忘れずに入力してほしい時にやりがちですよね）
・項目名の隣に説明を追加している（これも多いですよね）
RaySheetで作成したビュー
先ほどのExcelをRaySheetで再現したのがこちらです。元のExcelと同じように項目行のデザインを調整しているので、どっちがRaySheetなのか分からないくらいですよね。
※マスタ情報はオブジェクトを分けた形で構成しています。
この先は、同様の画面を作成するためにどんな設定をしているのかポイントをお話します。
項目行のデザインを変更する
RaySheetでビューを作成した最初の段階では、このようなビューが作成されます。
今回のExcelでポイントとなるのは、「項目行のデザイン」です。項目のデザインを行うためにRaySheetの「列ヘッダー」機能を使用しています。
上下で親子関係を持つ項目
項目同士の関連を見せたいときに行いたいのが、セルのグループ化です。グループ単位で項目を見せることができます。この機能は、表示しているビュー同士を自由にグループ化することのできる機能です。
設定方法
1. グループ化するセルを選択する
2. 1の状態で「グループ化」をクリックする
3. 「カスタム列名」に親となる項目の項目名を入力する
◎列ヘッダー -ヘルプ
https://docs.raykit.grapecity.com/raysheet/ja/howto/create_view/grouping_header/column_header_setting_screen/
参照項目の自動グループヘッダー
親オブジェクトの項目を自動でグループ化する「参照項目の自動グループヘッダー」機能もあります。
分かりやすい例ですと、商談オブジェクトのビューに表示した取引先情報をグループ化します。
◎参照項目をグループ化する -ヘルプ
https://docs.raykit.grapecity.com/raysheet/ja/howto/create_view/grouping_header/reference_group_header/
項目にデザインを設定している
項目の背景色を変更している
続いて、項目列の背景色の設定についてです。
背景色は、同じく列ヘッダーの設定画面で行います。
項目名の色を変更している
項目名の色設定も同じく列ヘッダーの設定画面内で行います。
項目名の隣に説明を追加している
項目名+説明を付加することもできます。
これは、「カスタム列名」に任意のテキストを入力します。
RaySheetの表示上の列名を変更する機能ですね。
さいごに
Excelで行っている業務をシステム関する時のエッセンスとして、列ヘッダー機能をぜひ使ってみてください。
