2019.04.10

入力画面さえあれば、すぐに参照用の画面が作れるらしいぞ！　 #シス管見習いの備忘録　vol.09

ポスト

前回までのおさらい

同期のまりちゃんから相談を受け、扶養控除申請書の入力フォームを作成することに。
自由レイアウトを使って、さながら申請書の上に文字を打っているかのような画面ができました♪

入力する画面だけではなく、データを見る「参照画面」もこのレイアウトだったら楽ですね。
今回のブログでは、参照画面の作り方をお伝えします。

参照画面は、ボタン1つで作れちゃう

ここで皆さんに質問です。
参照画面を作るための手順って、どんなものだと思いますか？

・もう一度SkyVisualEditorで、背景画像の設定～項目の配置をやり直す
・入力項目をひとつひとつクリックして、「入力用→参照用」に変更する

といった手順を想像した方もいるのではないでしょうか。

見出しに答えが書いてありますが（笑）、参照画面はとっても簡単に作成できます。
Studioで入力画面を開いたら、ヘッダーの「ツール」をクリックして「参照画面作成」を押すだけ！

必要に応じて参照画面のVisualforceページ名を変えたら、「OK」を押してください。
入力用に設定されていた項目を、Studioが自動的に変換してくれますよ。
これで、参照画面が作成されます。

入力画面では「保存」だったボタンが、「編集」に変わっていますね。
「キャンセル」ボタンだけは不要なので、削除しておきましょう。

…と、ものの10秒足らずで、画面ができてしまいました。
簡単すぎて、拍子抜けです(笑)

作った画面はどうやって表示させるの？

では、データを選んだ時にSkyVisualEditorで作った画面を呼び出すには、どうしたらよいでしょうか？
まず、現状の挙動をチェックしてみましょう。
田中さんのデータを見るためには、1行目「0000」となっている部分をクリックする必要があります。
押してみると…いつもの標準画面が出てしまいますね。

こんな時は、Salesforceの設定を変えてしまいましょう！
「0000」をクリックする、すなわち、参照画面を見ようとした時に遷移するリンク先を変更するのです。

これだけではよく分からないと思うので、具体的な手順を説明しますね。

まず、オブジェクトマネージャで対象のオブジェクトを開きます。
左側にある「ボタン、リンク、およびアクション」というボタンを押します。
「参照」という行を見つけたら、右の▼を押して、「編集」をクリックしましょう。

すると、「参照ボタンを押した時のリンク先」を設定する画面が開きます。
これが「上書きしない（デフォルトを使用）」となっているから、標準画面が開くのですね。
変えてしまいましょう。

「Salesforce Classic の上書き」を、「上書きしない（デフォルトを使用）」から「Visualforceページ」に変えて、作成した参照画面を選びます。
これで「保存」ボタンを押せば、完了です！

これで、遷移先が標準画面からSkyVisualEditorで作成した画面に変更されたはずです。
きちんとその通りになっているか、テストしてみましょう。
もういちど、田中さんのデータをクリックすると…

今度は、SkyVisualEditorで作成した画面が表示されましたね！

おわりに

最後までお読みくださり、ありがとうございました。

「標準画面には違和感があるけれど、プログラミングは出来ないし、我慢するしかないのかな…」と諦めていた私ですが、SkyVisualEditorを使えば簡単に画面をカスタマイズできることが分かりました。
勇気を出してチャレンジしてみて、よかったです♪

・標準画面では満足できない
・オリジナルの画面を作りたいけど、難しいことはやりたくない
・作成したらすぐに結果が見たい
という方には、SkyVisualEditorがお役に立てると思います！
ぜひ、ご検討くださいね。