2019.01.18

ボタンひとつでLEXっぽいデザインに!入力フォームのレイアウト変更 #シス管見習いの備忘録 vol.04

前回のおさらい

昨年のSalesforce World Tour Tokyoで名刺入力に忙殺された私。
画面カスタマイズの第一弾として、「1つの画面で取引先と取引先責任者をいっぺんに入力できる画面」を作ることに。
前回は新規取引先の入力欄を作成しました。
今回は、新規取引先責任者の入力欄を作成します!

こんな感じの画面を作りたい。今回は下半分にチャレンジ!

関連オブジェクトは「データテーブル」を使う

取引先と同じように、入力欄を画面にドラッグ&ドロップしていけば良さそう。
ただし、取引先責任者は「関連オブジェクト」になりますので
最初に「データテーブル」というコンポーネントを配置します。

やり方は以下の通りです。
①コンポーネントから「データテーブル」を選ぶ
②対象オブジェクトとして「取引先責任者」を選ぶ
③何列のテーブルを作りたいかを指定する(今回は7つにしました)

データテーブルが出来上がったので、
部署、役職、姓、名…と 順番に入力したい項目をドラッグ&ドロップで配置しました。

いったん、これでデプロイしてみましょう。
「ページを開く」をクリックすると…

こんな感じの画面になりました。
もともとは1画面で1枚の名刺を想定していましたが、これなら「行追加」をすれば、同じ取引先の名刺が複数枚、いちどに入力できちゃうわけですね。
この方が便利そう…!

気になる部分を直していきます

出来上がった画面を改めて見てみると、直したいところがいくつか出てきました。

1.デフォルトで入力欄を表示

この状態だと、新規取引先責任者を入力するときに毎回「行追加」を押さないといけません。
デフォルトで、入力スペースが表示されていると良いですね。

変更すべきは、データテーブルの設定です。
右タブの「コンポーネント」から、「初期追加行数」を変更すれば、デフォルトで入力欄が表示されます!

2.入力データのコピー

複数名の方から名刺をいただく場合、部署や電話番号が同じだったりしますよね。
なので、1行目の人の情報をコピーして使えたら便利そうです!

同じく「コンポーネント」で「行コピーボタン有り」にチェックを入れます。

3.タイトルを変更

画面の左上に、「Component1」「Component2」という文字があります。
各コンポーネントのタイトルを設定していなかったため、コンポーネントの番号が表示されてしまっているようです。
「新規取引先」など、画面の内容にあった名前にしたいですね。

各コンポーネントの設定で変えてしまいましょう。
右タブ「テキスト」の下の「タイトル」を変更すればOKです。

そろそろ「コンポーネントってなに?」という質問が来そうですが、画面レイアウトを作成するための部品をコンポーネントと呼んでいます。
入力項目が入ったデータテーブルや、保存ボタン、セクションなど、これらすべて「コンポーネント」となります。

これで再度デプロイして…

・デフォルトで入力スペースが表示されている
・行コピーができる は、クリアです!

ただ、ここでひとつ問題が。
「▼新規取引先」はあるけれども「▼新規取引先責任者」のタイトルがないのは変ですね。

さっきと同じように、コンポーネントの設定を変更すればいいかな?と思ったのですが、データテーブルにはタイトル欄がありません。
フリーテキストや何やら試行錯誤してみましたが、解決策が見つからず…
これは李さんの助けが必要そうです。

李さん「ページブロックをもうひとつ作って、データテーブルをそのブロックの中に入れたらどうかな。で、『新規取引先責任者』の文言は、ページブロックのタイトルとして設定したらいいよ」

瞬殺でした。
さすが李さん…!

というわけで、アドバイス通りにやってみます。

新しくページブロックを作成しました。
このタイトルを「新規取引先責任者」に変更して、ミッションクリアです。

その他に、下記の変更を加えてデプロイをすることにしました。
・一番上に「セクションヘッダー」というコンポーネントを追加
・タイトルの文言を変更
・保存ボタン、キャンセルボタンの位置を変更

デプロイしたら、こんな感じになりました。
うむ、満足です!

ボタンひとつで”Lightningっぽいデザイン”に変更できる

色々といじっている間に「LEXデザイン」というチェックボックスを見つけてしまいました…!

SkyVisualEditorは2018年7月のバージョンアップで、Lightning Experienceユーザーのニーズを叶えるべく、進化を遂げていたそうです!
LEXデザイン有効化は、Lightning Experienceになじむデザインに自動で変更してくれる優れた機能。
その他にも、「VisualforceページのLightningコンポーネント化」や「レスポンシブ対応」など、お役立ち機能が追加されているそうですよ。
(もっと詳しく知りたい方は、こちらをご覧ください)

さて、今回はLEXデザインを試してみたいと思います。
「有効化」にチェックを入れて、デプロイしてみましょう。

わくわく…

おおおお!!
想像以上に、Lightningっぽいデザインになりました!

まっさらなページを立ち上げてからここまで完成するのに、半日もかかっていません。
自分がカスタマイズした内容がデプロイしたらすぐに反映されるので、ちょっと試して、デプロイしてみて…と、短い時間で改善を重ねていくことができます。
きっと慣れてくれば、もっとサクサクと思い通りの画面が作れるはず…!

おわりに

自分が作ったものがSalesforce上で綺麗に表示される…というのは、嬉しいものがありますね。
好きな部品を選んで、好きなところに置いていくという過程で、なぜだか図画工作をしていたころの思い出がよみがえりました。

と、満足していた私ですが…
今のままでは、せっかくの画面をSalesforceから呼び出すことができません!
次回は、Salesforceから作成した画面にアクセスするための方法を学んでいきます。
お楽しみに!
「こんなにサクサクできるなら、自分でもやれるかもしれない…!」と思った方は、ぜひこちらから無料登録をしてみてください。

無料登録してからの流れは、こちらのページに詳しく書いてありますよ~♪

「シス管見習いの備忘録」バックナンバー

01.プログラム経験は不要?誰でもできちゃうSalesforceの画面カスタマイズ

02.10分でできる!SkyVisualEditorの初期設定

03.まずはやってみよう。ささっと作れる名刺入力画面

04.ボタンひとつでLEXっぽいデザインに!入力フォームのレイアウト変更(本投稿)

05.作ったページをユーザーさんに利用してもらおう!の手続き。

06.人気ナンバーワン!検索画面テンプレートを使ってみよう

07.今まで使っていた書類がSalesforceで再現できちゃう?!自由レイアウトとは

08.自由レイアウトで、ユーザーさんがサクサク快適に入力できる画面を作ろう!

09.入力画面さえあれば、すぐに参照用の画面が作れるらしいぞ!

41 件
     
  • banner
  • banner

関連する記事