2018.06.04

はじめてのSkyVisualEditor

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

はじめに

みなさん、こんにちは。
2018年2月にSkyVisualEditorチームにジョインした平谷です。

初投稿の記事は、SkyVisualEditor歴4ヶ月の私がお送りする初心者向け記事「はじめてのSkyVisualEditor」です。少しボリュームのある記事になってしまいましたが、最後まで読んでいただけると幸いです。

本記事では、「はじめてSkyVisualEditorをご利用になられる方向け」にSkyVisualEditorの基本的な操作方法をご紹介します。SkyVisualEditorの初期設定から画面デザイン、作成した画面をSalesforceで表示するまでの一通りの流れを理解できることが本記事のゴールとなります。

SkyVisualEditorを利用するためには、事前に会員登録が必要となります。アカウントをお持ちでない方は、こちらの「無料登録」よりアカウントを取得ください。ユーザー登録に関して、詳細な情報はヘルプドキュメント「2-3. ユーザー登録」をご確認ください。

前提条件

  • Salesforceアカウント
  • SkyVisualEditorアカウント
  • SkyVisualEditorのStudioが動作するPC

    *SkyVisualEditorは、Microsoft Internet Explorer 且つ Microsoft Silverlight に準拠します。サポート対象のブラウザは「7-3-1. サポート対象ブラウザ、バージョンは?」をご確認ください。

    *Salesforceの環境は、「Salesforce Classic」を使用しております。

作業の流れ

  1. SkyVisualEditor Studio環境へログイン
  2. SkyVisualEditor Studio環境での画面作成
  3. 作成した画面をSalesforceへデプロイ
  4. Salesforceで表示するための設定

作業

SkyVisualEditor Studio環境へログイン

SkyVisualEditor Studio環境は、最新の機能が常に利用可能な本番環境と一世代前の環境が利用可能な旧環境が存在します。Studio環境に関して、詳細な情報はブログ記事「新・旧2つのStudio環境を活用して任意のタイミングでバージョンアップ!」をご覧ください。

本記事では、本番環境を利用するためこちらからログインください。ログイン後、Salesforce組織へのログインダイアログが表示されますので、作成した画面をデプロイするSalesforce組織を指定ください。Salesforce組織への接続に関して、詳細な情報はヘルプドキュメント「3-4. Studio画面(Salesforce接続)」をご確認ください。

実際にログインすると以下の画面が表示されます。

SkyVisualEditor Studio環境の画面構成に関して、詳細な情報はヘルプドキュメント「3-5. Studio画面(画面作成)」をご確認ください。

SkyVisualEditor Studio環境での画面作成

SkyVisualEditorでは、ウィザード形式で短時間で画面を作成することができるテンプレートを使って画面を作成する方法とSalesforce標準ページレイアウトを取得して画面を作成する方法があります。今回は、より簡単に画面を作成することができるSalesforce標準ページレイアウトから画面を作成する方法をご紹介します。SkyVisualEditorが提供するテンプレートを使った画面の作成方法に関して、詳細な情報はヘルプドキュメント「4-1-1. 新規」をご確認ください。

メニューエリアの[ファイル>ページレイアウト取得]をクリックします。

Salesforce標準ページレイアウトを取得したいオブジェクトとページレイアウトを選択し、「開く」をクリックします。今回は、「取引先」オブジェクトの「マスタ」レコードタイプを取得します。

無事取得ができれば、下記画面が表示されます。これでSalesforce標準ページレイアウトの取得は完了です。

次に、Salesforce標準ページレイアウトを使って画面を作成します。今回は下記3点をやりたいと思います。

  • コンポーネント(ページブロックセクション)のカラム数を増やしてみる
  • コンポーネント(、オブジェクト項目)を削除してみる
  • コンポーネント、オブジェクト項目を配置してみる

コンポーネント(ページブロックセクション)のカラム数を増やしてみる

「取引先情報」と記載されたページブロックセクションのカラム数を1つ追加します。

ページブロックセクションをクリックします。するとデザインキャンバス右上に「列追加」「列削除」と記載されたダイアログが表示されます。今回は列を追加するのでダイアログ左にある「列追加」をクリックします。

するとカラムが1つ追加されます。カラムの追加作業はこれだけですが、見た目的にも、作業内容的にも少し寂しいので、今回は、取引先情報に配置されているオブジェクト項目の一部を、追加したカラムにドラッグ&ドロップで移動させてみます。

移動させた後の画面が下記になります。

なお、上記画面では左右にあった小画面が非表示になっていますが、SkyVisualEditorでは小画面の表示/非表示を切り替えることができます。表示/非表示の切り替えは、下記画面のように各画面に表示されている小さい矢印のエリアをクリックすることで可能です。こちらの機能は、デザインキャンバスが見づらいときなどに重宝します。

コンポーネント(、オブジェクト項目)を削除してみる

次に、Salesforce標準ページレイアウトからコンポーネントを削除してみます。コンポーネントに配置されているオブジェクト項目をすべて削除したい場合は、該当のコンポーネントを削除することでオブジェクト項目も自動的に削除されます。反対にオブジェクト項目を個別に削除したい場合は、該当のオブジェクト項目の上で右クリックすることで削除することが可能です。今回は、コンポーネントを削除したいと思います。

「追加情報」と記載されているページブロックセクションを右クリックし、削除メニューに表示されている「削除」をクリックします。

クリックすると確認ダイアログが表示されるので、問題がなければ「OK」をクリックします。

「追加情報」と記載されたページブロックセクションが削除されました。

コンポーネントなどの削除方法は、キーボード「Delete」キーの押下、オブジェクト/コンポーネントペインにドラッグ&ドロップすることでも可能です。なお、ドラッグ&ドロップでの削除に関しては、各ペインにドラッグした時点でごみ箱のアイコンが表示されるため、削除可能な範囲の目安にすることができます。詳細な情報はヘルプドキュメント「(2)-c. オブジェクトペイン、コンポーネントペイン」をご確認ください。

コンポーネント、オブジェクト項目を配置してみる

コンポーネント、オブジェクト項目の追加は、オブジェクト/コンポーネントペインからドラッグ&ドロップで配置します。

配置したいコンポーネントをコンポーネントペインからドラッグ&ドロップで配置します。各コンポーネントには配置可能、不可能があります。ドラッグ&ドロップした際にアイコンで可・不可が判断できるようになっているので、配置可能な範囲の目安にすることができます。

次に、配置したいオブジェクト項目をオブジェクトペインからドラッグ&ドロップで配置します。

コンポーネントとオブジェクト項目の配置は以上で完了です。

以上で、SkyVisualEditor Studio環境での画面の作成は終了になります。
次に作成した画面をSalesforceにデプロイし、表示確認したいと思います。

作成した画面のSalesforceへのデプロイ

作成した画面を、SkyVisualEditor Studio環境にログインした際に指定したSalesforce組織にデプロイしたいと思います。

ヘッダーにあるデプロイボタンをクリックします。

デプロイボタンをクリックすると、デプロイ確認ダイアログが表示されます。デプロイ先組織を指定し、問題がなければ「デプロイ」をクリックします。今回は、SalesforceのDeveloper Edition環境を使用しているため、「テスト環境」を指定してデプロイします。デプロイ確認ダイアログに関して、詳細な情報はヘルプドキュメント「(1)-g. デプロイ」をご確認ください。

デプロイが正常に終了すると下記デプロイ完了画面が表示されます。画面内「ページを開く」をクリックすると作成した画面がSalesforceで表示されます。なお、Salesforceに未ログインの場合、Salesforceのログイン画面が表示されますので、SkyVisualEditor Studio画面で指定したSalesforce組織のアカウントでログインください。

作成した画面に問題がなければ、作成した画面がSalesforceに表示されます。

以上で、作成した画面のSalesforceへのデプロイは完了です。

デプロイ後のSalesforceの設定

デプロイ後、Salesforceにて作成した画面へのアクセスを有効化、ならびに作成した画面を開くための設定が必要になります。今回は、Salesforceで以下の設定をします。

  • 作成した画面へのアクセスの有効化
  • 各ボタン(新規、編集)で作成した画面を開くための設定

作成した画面へのアクセスの有効化

作成した画面は、作成したユーザーのプロファイルであればデフォルトで表示することができますが、作成したユーザー以外のプロファイルに属するユーザーにも表示させるには作成した画面へのアクセスを有効化をする必要があります。

[設定>管理>ユーザの管理>プロファイル]にアクセスし、作成した画面へのアクセスを有効化したいプロファイルを選択します。今回は、「標準ユーザ」プロファイルに作成した画面へのアクセスの有効化をしたいと思います。

[有効な Visualforce ページアクセス]セクションで「編集」をクリックします。

作成した画面を選択し、「追加」をクリックします。有効化されたVisualforceページに移動されたことを確認し、「保存」をクリックします。

Apexクラスも有効化する必要があるので、同様の手順でApexクラスを有効化していきます。[有効な Apexクラス]セクションで「編集」をクリックします。

作成した画面のApexクラスを選択し、「追加」をクリックします。有効化されたApexクラスに移動されたことを確認し、「保存」をクリックします。(追加するApexクラス名は、デフォルトでは先ほど追加した画面と同名となっております。)

以上で作成した画面へのアクセスの有効化は完了です。

各ボタン(新規、編集)で作成した画面を開くための設定

次に、オブジェクトの各ボタン(新規、編集)で作成した画面を開くための設定をします。

なお、作成した画面を開くための方法は複数あります。詳細な情報は、ヘルプドキュメント「4-12-2. ページを開く為に行う設定」をご確認ください。

[設定>カスタマイズ>対象のオブジェクト>ボタン、リンク、およびアクション]をクリックします。

ボタン、リンク、およびアクションの表示ラベル「新規」の左横にある「編集」をクリックします。

「Salesforce Classicの上書き」にあるVisualforceページのプルダウンリストから、先ほど作成した画面を選択し、「保存」をクリックします。

「編集」も同様に、先ほど作成した画面を設定してください。

以上で、デプロイ後のSalesforceの設定は完了です。

なお、「参照」に関しては別途参照画面を作成し、設定する必要があります。詳細な情報はヘルプドキュメント「4-11. 参照画面作成」をご確認ください。

レコードを作成してみよう

それでは、実際に作成した画面を使ってレコードを作成してみましょう。

対象のオブジェクトにアクセスし、「新規」をクリックします。

すると、先ほど作成した画面が表示されます。必要事項を記入し、「保存」をクリックします。

記入内容に問題がなければ、下記画面が表示されます。これでレコードの作成は完了です。

なお、「取引先の詳細」上部にある「編集」をクリックすると、先ほど作成した画面でレコードの編集ができるようになっていますので、ぜひお試しください。

おわりに

いかがでしたでしょうか。以上が、SkyVisualEditorを使ったSalesforce画面の作成方法になります。今回ご紹介した内容のほかにも、SkyVisualEditorには様々な機能が備えられています。ドキュメントなども充実しておりますので、ご興味のある方はこちらよりご覧ください。

また、SkyVisualEditorでは定期的にセミナーなども開催しております。SkyVisualEditorを使っていてわからないこと等ありましたらぜひご活用ください。

SkyVisualEditor資料ダウンロード

60 件

関連する記事