2019.04.11

今まで使っていた書類がSalesforceで再現できちゃう?!SkyVisualEditorの自由レイアウトとは #シス管見習いの備忘録 vol.07

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

まだまだ、改善の余地アリ!

これまでSkyVisualEditorを使って、名刺の入力画面や取引先の検索画面を作ってきました。
同僚からの評判も良く、役に立っている実感がじわじわと出始めてきたところです。

しかし、まだまだ使いづらい部分もあるようで…
今日は、同期のまりちゃんからこんな相談がありました。
「扶養控除申請書のデータをSalesforceに入力することになったんだ。
 自分で入力ページを作ってみたんだけれども、項目が多くて2列しか配置できないから困っていて…
 画面が長くなっちゃし、紙の申請書と勝手が違うから入力しづらいし。
 SkyVisualEditorで何とかならないかな?」
ということで、まずはまりちゃん自作の標準画面を見せてもらうことに。

なっがい。。。

そっと、画面を閉じたくなりました。
これは何とかしてあげないといけません!

SkyVisualEditorを使えば、1行に項目をたくさん配置できるので
「画面が長くなってしまう」という悩みは解決できます。
ただ「紙の申請書と勝手が違うから入力しづらい」という点はどうでしょう…?

二人でうーん、うーんと悩んでいたら、通りがかりのノブ先輩が、教えてくれました。
「今使っている書類と近い形の画面を作りたいなら、自由レイアウトがいいかもしれないねぇ」

自由レイアウトとは

自由レイアウトとは、なんでしょう?
テラスカイのホームページを見てみましょう。
”Salesforceのデザインにとらわれず、自由に画面をデザインできます。
既存書類と同等のレイアウトを作成したり、他のシステムやアプリケーションの入力フォームをSalesforceに再現したい場合などに利用します。”
今使っているフォーマットを”背景画像”にして、そのうえに自由に項目を配置できるそうです。
見た目は既存の書類とほぼ変わらないので、これまでのやり方に近い形で運用できる、と。

本当にそんなことが出来たら、まりちゃんも喜ぶはず!
さっそく使ってみましょう。

①背景画像の準備 ②背景画像の取り込み ③項目の配置 ④項目の設定
という流れで進めていきます。

まずは背景画像を準備します

SkyVisualEditorを開く前に、まずは背景画像をSalesforceに登録します。
お使いのフォーマットがExcelやPDFの場合は、サポートされている形式(※)に変換してください。
扶養控除申請書の入力フォーマットはPDFで提供されているので、jpegに変換しました。
(※)2019年2月時点では、jpeg、pjpeg、png、x-png、gif、bmpがサポートされています

背景画像が準備できたら、Salesforceの「静的リソース」に保存します。
設定からプラットフォームツール→カスタムコード→静的リソース と進みます。
画面中央にある「新規」ボタンをクリックしてください。

ファイルをアップロードして、「保存」ボタンを押します。
これで、Salesforceに背景画像が登録されました。

エディターで背景画像を取り込みます

ここまで来たら、SkyVisualEditorの出番です。
ログインして、新規作成ボタンを押すと、レイアウトマネージャーが出てきます。
「自由レイアウト」を選んで、オブジェクトを選択。
Visualforceページ名を入力して、「OK」を押します。

すると真っ白な画面が出てきますが、エラーではないので、安心してください。
まだ背景画像を選択していないので、真っ白な画面が出てくるだけなんです(^^)

早速、背景画像の取り込みをしましょう。
ページプロパティの中に「背景画像」という項目がありますので、まずはそれを探します。
「参照」ボタンをクリックして、先ほど静的リソースに登録した画像を選択しましょう。

扶養控除申請書の入力フォーマットが、背景画像として取り込まれましたね。
今のままだと画面から見切れてしまうので、調節します。

ページプロパティの「背景画像」の下に、色々と文言が追加されたことにお気づきでしょうか?
「画像をページサイズに合わせる」ボタンをクリックすると、背景画像がページ内に収まるようになります。
サイズの調整で縦横比がずれてしまった場合は、そのうえにある「縦横比を維持する」にチェックをつけてください。

項目を配置していきます

背景画像の取り込みができたら、後はいつも通りです。
左側にある項目一覧(オブジェクトペインと呼ぶそうです)から項目をドラッグして、ページ内に配置していきます。
配置後、マウスで位置や大きさを調整しましょう。

今回は項目数がとても多いので、途中でどこにどの項目を置いたか分からなくなってしまいました。

焦ってアレコレいじっているうちに気が付いたのですが、枠の上にカーソルを当てると、項目名が出てくるようです。

コントロールキーを押しながら複数項目を選択すると、まとめて大きさを揃えることができます。

終わった~!デプロイしよう!

そんなこんなで、全項目の配置が終わりました!
果たして、フォーマット上に入力ができるようになっているのでしょうか。
試しにデプロイしてみましょう。

スゴイ。
ちゃんと、背景画像に設定したフォーマットの上に入力できるようになってます!
これなら、紙の申請書と入力画面の差異が少ないので、まりちゃんの手間もだいぶ減りそうです。

ただ、よ~く画面を見てみると、いくつか残念なところがあります。
・謎の[2019/03/01]という文字がある
・項目の位置が不ぞろい
・入力欄の文字のサイズが、枠の大きさと合っていない …などなど。

これらも、ちゃんと解決する方法がありますよ。
次回のブログでご紹介します。

続きは、次回!

今回、4つのステップのうち
①背景画像の準備 ②背景画像の取り込み ③項目の配置
まで終わりました。

次回は ④項目の設定 に挑戦してみます!

これまでSalesforceライクな画面しか作ってきませんでしたが、既存の書類に近い形の画面が作れるとは…。
まだまだSkyVisualEditorには、私の知らない魅力がありそう。
完成するのが今から楽しみです。

「自分も画面を作ってみたい!」という方には、体験セミナーがおすすめです!
シナリオに沿って、SkyVisualEditorでの画面開発が体験できるそうですよ。
自社で活用する際のイメージがより具体的になると思います♪
毎月開催していますので、ご都合の良いタイミングでぜひ足を運んでみてください。

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

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

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

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

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

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

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

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

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

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

36 件
     
  • banner
  • banner

関連する記事