まだまだ、改善の余地アリ!
これまでSkyVisualEditorを使って、名刺の入力画面や取引先の検索画面を作ってきました。
同僚からの評判も良く、役に立っている実感がじわじわと出始めてきたところです。
しかし、まだまだ使いづらい部分もあるようで…
今日は、同期のまりちゃんからこんな相談がありました。
同僚からの評判も良く、役に立っている実感がじわじわと出始めてきたところです。
しかし、まだまだ使いづらい部分もあるようで…
今日は、同期のまりちゃんからこんな相談がありました。
「扶養控除申請書のデータをSalesforceに入力することになったんだ。
自分で入力ページを作ってみたんだけれども、項目が多くて2列しか配置できないから困っていて…
画面が長くなっちゃし、紙の申請書と勝手が違うから入力しづらいし。
SkyVisualEditorで何とかならないかな?」
自分で入力ページを作ってみたんだけれども、項目が多くて2列しか配置できないから困っていて…
画面が長くなっちゃし、紙の申請書と勝手が違うから入力しづらいし。
SkyVisualEditorで何とかならないかな?」
ということで、まずはまりちゃん自作の標準画面を見せてもらうことに。
なっがい。。。
そっと、画面を閉じたくなりました。
これは何とかしてあげないといけません!
SkyVisualEditorを使えば、1行に項目をたくさん配置できるので
「画面が長くなってしまう」という悩みは解決できます。
ただ「紙の申請書と勝手が違うから入力しづらい」という点はどうでしょう…?
二人でうーん、うーんと悩んでいたら、通りがかりのノブ先輩が、教えてくれました。
「今使っている書類と近い形の画面を作りたいなら、自由レイアウトがいいかもしれないねぇ」
これは何とかしてあげないといけません!
SkyVisualEditorを使えば、1行に項目をたくさん配置できるので
「画面が長くなってしまう」という悩みは解決できます。
ただ「紙の申請書と勝手が違うから入力しづらい」という点はどうでしょう…?
二人でうーん、うーんと悩んでいたら、通りがかりのノブ先輩が、教えてくれました。
「今使っている書類と近い形の画面を作りたいなら、自由レイアウトがいいかもしれないねぇ」
自由レイアウトとは
自由レイアウトとは、なんでしょう?
テラスカイのホームページを見てみましょう。
テラスカイのホームページを見てみましょう。
”Salesforceのデザインにとらわれず、自由に画面をデザインできます。
既存書類と同等のレイアウトを作成したり、他のシステムやアプリケーションの入力フォームをSalesforceに再現したい場合などに利用します。”
既存書類と同等のレイアウトを作成したり、他のシステムやアプリケーションの入力フォームをSalesforceに再現したい場合などに利用します。”
今使っているフォーマットを”背景画像”にして、そのうえに自由に項目を配置できるそうです。
見た目は既存の書類とほぼ変わらないので、これまでのやり方に近い形で運用できる、と。
本当にそんなことが出来たら、まりちゃんも喜ぶはず!
さっそく使ってみましょう。
①背景画像の準備 ②背景画像の取り込み ③項目の配置 ④項目の設定
という流れで進めていきます。
見た目は既存の書類とほぼ変わらないので、これまでのやり方に近い形で運用できる、と。
本当にそんなことが出来たら、まりちゃんも喜ぶはず!
さっそく使ってみましょう。
①背景画像の準備 ②背景画像の取り込み ③項目の配置 ④項目の設定
という流れで進めていきます。
まずは背景画像を準備します
SkyVisualEditorを開く前に、まずは背景画像をSalesforceに登録します。
お使いのフォーマットがExcelやPDFの場合は、サポートされている形式(※)に変換してください。
扶養控除申請書の入力フォーマットはPDFで提供されているので、jpegに変換しました。
(※)2019年2月時点では、jpeg、pjpeg、png、x-png、gif、bmpがサポートされています
背景画像が準備できたら、Salesforceの「静的リソース」に保存します。
設定からプラットフォームツール→カスタムコード→静的リソース と進みます。
画面中央にある「新規」ボタンをクリックしてください。
お使いのフォーマットがExcelやPDFの場合は、サポートされている形式(※)に変換してください。
扶養控除申請書の入力フォーマットはPDFで提供されているので、jpegに変換しました。
(※)2019年2月時点では、jpeg、pjpeg、png、x-png、gif、bmpがサポートされています
背景画像が準備できたら、Salesforceの「静的リソース」に保存します。
設定からプラットフォームツール→カスタムコード→静的リソース と進みます。
画面中央にある「新規」ボタンをクリックしてください。
ファイルをアップロードして、「保存」ボタンを押します。
これで、Salesforceに背景画像が登録されました。
これで、Salesforceに背景画像が登録されました。
エディターで背景画像を取り込みます
ここまで来たら、SkyVisualEditorの出番です。
ログインして、新規作成ボタンを押すと、レイアウトマネージャーが出てきます。
「自由レイアウト」を選んで、オブジェクトを選択。
Visualforceページ名を入力して、「OK」を押します。
ログインして、新規作成ボタンを押すと、レイアウトマネージャーが出てきます。
「自由レイアウト」を選んで、オブジェクトを選択。
Visualforceページ名を入力して、「OK」を押します。
すると真っ白な画面が出てきますが、エラーではないので、安心してください。
まだ背景画像を選択していないので、真っ白な画面が出てくるだけなんです(^^)
早速、背景画像の取り込みをしましょう。
ページプロパティの中に「背景画像」という項目がありますので、まずはそれを探します。
「参照」ボタンをクリックして、先ほど静的リソースに登録した画像を選択しましょう。
まだ背景画像を選択していないので、真っ白な画面が出てくるだけなんです(^^)
早速、背景画像の取り込みをしましょう。
ページプロパティの中に「背景画像」という項目がありますので、まずはそれを探します。
「参照」ボタンをクリックして、先ほど静的リソースに登録した画像を選択しましょう。
扶養控除申請書の入力フォーマットが、背景画像として取り込まれましたね。
今のままだと画面から見切れてしまうので、調節します。
ページプロパティの「背景画像」の下に、色々と文言が追加されたことにお気づきでしょうか?
「画像をページサイズに合わせる」ボタンをクリックすると、背景画像がページ内に収まるようになります。
サイズの調整で縦横比がずれてしまった場合は、そのうえにある「縦横比を維持する」にチェックをつけてください。
今のままだと画面から見切れてしまうので、調節します。
ページプロパティの「背景画像」の下に、色々と文言が追加されたことにお気づきでしょうか?
「画像をページサイズに合わせる」ボタンをクリックすると、背景画像がページ内に収まるようになります。
サイズの調整で縦横比がずれてしまった場合は、そのうえにある「縦横比を維持する」にチェックをつけてください。
項目を配置していきます
背景画像の取り込みができたら、後はいつも通りです。
左側にある項目一覧(オブジェクトペインと呼ぶそうです)から項目をドラッグして、ページ内に配置していきます。
配置後、マウスで位置や大きさを調整しましょう。
左側にある項目一覧(オブジェクトペインと呼ぶそうです)から項目をドラッグして、ページ内に配置していきます。
配置後、マウスで位置や大きさを調整しましょう。
今回は項目数がとても多いので、途中でどこにどの項目を置いたか分からなくなってしまいました。
焦ってアレコレいじっているうちに気が付いたのですが、枠の上にカーソルを当てると、項目名が出てくるようです。
焦ってアレコレいじっているうちに気が付いたのですが、枠の上にカーソルを当てると、項目名が出てくるようです。
コントロールキーを押しながら複数項目を選択すると、まとめて大きさを揃えることができます。
終わった~!デプロイしよう!
そんなこんなで、全項目の配置が終わりました!
果たして、フォーマット上に入力ができるようになっているのでしょうか。
試しにデプロイしてみましょう。
果たして、フォーマット上に入力ができるようになっているのでしょうか。
試しにデプロイしてみましょう。
スゴイ。
ちゃんと、背景画像に設定したフォーマットの上に入力できるようになってます!
これなら、紙の申請書と入力画面の差異が少ないので、まりちゃんの手間もだいぶ減りそうです。
ただ、よ~く画面を見てみると、いくつか残念なところがあります。
・謎の[2019/03/01]という文字がある
・項目の位置が不ぞろい
・入力欄の文字のサイズが、枠の大きさと合っていない …などなど。
これらも、ちゃんと解決する方法がありますよ。
次回のブログでご紹介します。
ちゃんと、背景画像に設定したフォーマットの上に入力できるようになってます!
これなら、紙の申請書と入力画面の差異が少ないので、まりちゃんの手間もだいぶ減りそうです。
ただ、よ~く画面を見てみると、いくつか残念なところがあります。
・謎の[2019/03/01]という文字がある
・項目の位置が不ぞろい
・入力欄の文字のサイズが、枠の大きさと合っていない …などなど。
これらも、ちゃんと解決する方法がありますよ。
次回のブログでご紹介します。
続きは、次回!
今回、4つのステップのうち
①背景画像の準備 ②背景画像の取り込み ③項目の配置
まで終わりました。
次回は ④項目の設定 に挑戦してみます!
これまでSalesforceライクな画面しか作ってきませんでしたが、既存の書類に近い形の画面が作れるとは…。
まだまだSkyVisualEditorには、私の知らない魅力がありそう。
完成するのが今から楽しみです。
「自分も画面を作ってみたい!」という方には、体験セミナーがおすすめです!
シナリオに沿って、SkyVisualEditorでの画面開発が体験できるそうですよ。
自社で活用する際のイメージがより具体的になると思います♪
毎月開催していますので、ご都合の良いタイミングでぜひ足を運んでみてください。
①背景画像の準備 ②背景画像の取り込み ③項目の配置
まで終わりました。
次回は ④項目の設定 に挑戦してみます!
これまでSalesforceライクな画面しか作ってきませんでしたが、既存の書類に近い形の画面が作れるとは…。
まだまだSkyVisualEditorには、私の知らない魅力がありそう。
完成するのが今から楽しみです。
「自分も画面を作ってみたい!」という方には、体験セミナーがおすすめです!
シナリオに沿って、SkyVisualEditorでの画面開発が体験できるそうですよ。
自社で活用する際のイメージがより具体的になると思います♪
毎月開催していますので、ご都合の良いタイミングでぜひ足を運んでみてください。
「シス管見習いの備忘録」バックナンバー
01.プログラム経験は不要?誰でもできちゃうSalesforceの画面カスタマイズ
02.10分でできる!SkyVisualEditorの初期設定
04.ボタンひとつでLEXっぽいデザインに!入力フォームのレイアウト変更
05.作ったページをユーザーさんに利用してもらおう!の手続き。
07.今まで使っていた書類がSalesforceで再現できちゃう?!自由レイアウトとは(本投稿)