2019.01.18

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

ポスト

前回のおさらい

昨年のSalesforce World Tour Tokyoで名刺入力に忙殺された私。
画面カスタマイズの第一弾として、「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から作成した画面にアクセスするための方法を学んでいきます。
お楽しみに！

「こんなにサクサクできるなら、自分でもやれるかもしれない…！」と思った方は、ぜひこちらから無料登録をしてみてください。

SkyVisualEditor 無料ユーザー登録

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