ポスト
目次
（これまでの経緯）
プログラミング歴0年、Salesforce歴1年の私が、Salesforceの画面カスタマイズを担当することになりました。
マウス操作だけで画面の開発ができる「SkyVisualEditor」を使って、先輩に頼りながら、時には泣きつきながら、使いやすい画面づくりに挑戦していきます。
超・初心者がどこまで食らいつけるか？！ぜひ、応援してやってください。
↓↓これまでのブログはこちら↓↓
プログラム経験は不要？誰でもできちゃうSalesforceの画面カスタマイズ #シス管見習いの備忘録 - TerraSkyBase
10分でできる！SkyVisualEditorの初期設定 #シス管見習いの備忘録 - TerraSkyBase
今日は、名刺入力用の画面を作ります！
みなさま、「Salesforce World Tour Tokyo 2018」には参加されましたか？
テラスカイのブースは大盛況で、担当スタッフは嬉しい悲鳴をあげていました。
そして、私はその後の名刺入力に忙殺されました…。
標準画面で名刺の情報を入力しようとすると、
・まず、新規取引先を作成して
・そのあと、新規取引先責任者を作成して…
と、2つの画面を使わなくてはいけません。
名刺1枚なら大した手間ではないですが、これが何十枚にもなると、なかなか大変。
取引先と取引先責任者を、同じ画面で入力できたら、だいぶ効率が良くなるはず。
ということで、今回は名刺入力用の画面を作成したいと思います！
こんな感じにできたらいいな。
…って、何からしたらよいんだ？
息まいてSkyVisualEditorにログインした私ですが、何から始めたらよいのか分かりません。
そこで、実際にSkyVisualEditorの開発を担当している李さんに助けてもらうことにしました！
わたし「李さん！取引先と取引先責任者をいっぺんに入力できる画面を作りたいのですが、何から手を付けてよいのか分かりません」
李さん「OK、そうしたらまずは左上にある『新規作成』ボタンを押してみよう」
こんな感じで、一から丁寧に教えてもらいました。
ここからは、その流れを説明していきます。
新規作成ボタンはここにあります！
まずは、レイアウトとオブジェクトを選ぼう
新規作成ボタンを押すと、「レイアウトマネージャー」が表示されます。
どのような画面を作りたいかによって、レイアウトもしくはテンプレートを選ぶことができます。
わたし「親子オブジェクト登録っていうのがありますよ！取引先と取引先責任者の登録画面だから、今回はこれじゃないですか？」
李さん「これでも作成できるけど、江田さんの書いているようなレイアウトにしたいなら、Salesforceレイアウトのほうが良いね。こっちの方が、細かい調整もしやすいんだ」
というわけで、Salesforceレイアウトに決定です。
「オブジェクト」の選択欄では、その画面で取り扱うオブジェクトを選択します。
今回のように対象となるオブジェクトが2つある場合は、主となるオブジェクトの方を選択します。
「Visualforceページ名」は、Salesforce側でページを呼び出す時に使うページ名です。
今回は分かりやすく「meishi」としました。
ここまで終わったら、「OK」のボタンを押します。
つぎに、入力項目を入れよう
ずらずらっといろんなものが並んできました…！
真ん中の白い枠が「ページブロック」で、緑の枠が「セクション」というそうです。
とりあえず出来そうなところからやってみましょう。
まずは、新規取引先の入力欄を作成します。
左の列から入力したい項目を選んで、セクションの中にドラッグしていきます。
こんな感じです。↓
この調子で、他の項目も入れていきましょう。
今回は、取引先名、住所、電話番号、FAX、WEBサイトの項目欄を配置しました。
全て揃うと、このような画面になります！
あとは、形を整えるだけ
続いて形を整えていきます。
郵便番号・都道府県・市区郡という3つの項目を同じ行に配置したいので、列を足す必要がありますね。
セクション上の空白部分でクリックして「列追加」を押すと、もう1列追加されます！
右に3列目ができあがりました
そしたら、項目をドラッグして、好きな列に置いていきましょう♪
こんな感じで、簡単にできますよ。
ここまではサクサクっと進んだのですが…
あれれ、思っていたのと違うレイアウトになってしまいました。
本当は取引先名の行と、郵便番号～市区郡の行にしたいんですが、都道府県と市区郡が取引先名の行に来てしまっています。
都道府県と市区郡を、もうひとつ下にずらしたい…。
ここは助っ人の出番です。
助けて李さん！
李さん「こういう時は、空白スペースというコンポーネントを使うといいよ」
…どうやら、左タブから「コンポーネント」を選んで、空白スペースをドラッグドロップすればいいみたいです！
早速やってみましょう。
あと、情報を入力したらちゃんと保存できなくてはいけないですよね。
コンポーネントから、保存ボタンを選んで、配置します。
キャンセルボタンも入れておこうっと。
これで、新規取引先の入力欄ができました！
わたし「とりあえずここまで終わりました…休憩しようっと」
李さん「休憩の前に、江田さん ちゃんと保存した？」
おっと、忘れていました。
左上に「保存」ボタンがあるので、ぽちっとしておきましょう。
保存ボタンはここにあります！
続きはまた次回…
ここまで、大丈夫そうですか？
私は内心ドキドキで操作していましたが、使っているうちに段々と楽しくなってきました。
この後は新規取引先責任者の入力欄を作っていきます。
続きは、次回のブログでお届けしますね。
「次のブログなんて待ってられん！無料で使える間に、色々試してみたい」という方は、こちらをご覧ください。
実際に他の方が活用している画面の作成方法が載っています！
「シス管見習いの備忘録」バックナンバー
01.プログラム経験は不要？誰でもできちゃうSalesforceの画面カスタマイズ
02.10分でできる！SkyVisualEditorの初期設定
03.まずはやってみよう。ささっと作れる名刺入力画面(本投稿)
04.ボタンひとつでLEXっぽいデザインに！入力フォームのレイアウト変更
05.作ったページをユーザーさんに利用してもらおう！の手続き。
07.今まで使っていた書類がSalesforceで再現できちゃう？！自由レイアウトとは
