2019.04.12

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

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

前回までのおさらい

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

おわりに

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

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

・標準画面では満足できない
・オリジナルの画面を作りたいけど、難しいことはやりたくない
・作成したらすぐに結果が見たい
という方には、SkyVisualEditorがお役に立てると思います!
ぜひ、ご検討くださいね。
「自分も画面を作ってみたい!」という方には、体験セミナーがおすすめです!
シナリオに沿って、SkyVisualEditorでの画面開発が体験できるそうですよ。
自社で活用する際のイメージがより具体的になると思います♪
毎月開催していますので、ご都合の良いタイミングでぜひ足を運んでみてください。

SkyVisualEditorご紹介&体験セミナー

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

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

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

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

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

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

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

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

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

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

お世話になった先輩方の記事も、ぜひご覧ください!

李さんの記事一覧
 SkyVisualEditorを開発している李さんのブログ。
 エンジニアさんならすぐ真似したくなるような、「作ってみた」系の記事が豊富です!

山下さんの記事一覧
 ユーザ向けイベント「アドミンカフェ」を運営している山下さんのブログです。
 画面を作ることなく、SkyVisualEditorの疑似体験ができる「業務アプリ」っていうのがあるんですね。

ノブさんの記事一覧
 マーケ部門のノブさんは、「男性社員の育休」についてブログを書いています。
 この記事、テラスカイ社内でもバズってました。

まりちゃんの記事一覧
 イベントレポートや人気ブログランキングなど、お役立ち記事が満載です!

27 件
     
  • banner
  • banner

関連する記事