SkyVisualEditorでJavaScriptを活用する！その1「Hello World」

みなさんこんにちは。

アドミンカフェなどで Salesforce の画面作成の相談を受けますが、SkyVisualEditorの意外と知られていない機能や使い方を知っていれば、解決できる場面が多くあります。

しかし、高度な内容になってくると SkyVisualEditor の標準機能だけでは実現できないこともあります。そんな時は、ページスクリプトで JavaScript を記述する方法をご提案しています。
JavaScriptを活用すると、このようなことが実現できます。

• チェックした値に応じて、動的に入力項目を表示・非表示させる
• 検索結果で注目させたい部分に色を付ける
• 親オブジェクトや子オブジェクトの詳細情報を別ウィンドウで表示する
• 画面を表示したときに一定時間だけ注意文言を表示させる

そこで今回は、SkyVisualEditorを便利に活用できるJavaScriptのテクニックについて、シリーズでご紹介したいと思います。
第一回目は、「JavaScriptの書き方」と題し、SkyVisualEditorで最もポピュラーなJavascriptの記載方法である「ページスクリプト」を試してみましょう。
今回のゴールは、Hello SkyVisualEditor!という文字をJavaScriptで表示できるようになることです。

本Blogでは、SkyVisualEditorにおけるJavaScriptの書き方を説明しています。記載した内容を試される場合、下記の準備をお願いします。
既にSkyVisualEditorをご契約いただいており、Salesforceの本番以外の組織をお持ちの場合は、この事前準備は不要です。

• 本番以外のSalesforce組織（Developer EditionやSandboxなど）
• 上記組織へのSkyVisualEditor VFのインストールなどの事前準備
• SkyVisualEditorのユーザー登録
• Windows版Studioのインストール

SkyVisualEditorのStudio（以後、Studio）では、JavaScriptを記載できる箇所がいくつかありますが、まずは最もポピュラーな「ページスクリプト」を利用します。
「ページスクリプト」とは、JavaScriptのコードを記述するエディターのことです。ここに記載された内容は、SalesforceへデプロイするときにそのままJavaScriptのコードとして出力されます。

今回は、書いたJavaScriptが動くことを体感していただくため、下記の流れでStudioにJavaScriptを記述してみてください。

　１．Studioにログインし、「ファイル」→「新規」で”Salesforceレイアウト”を選択
　２．オブジェクトは”取引先”、Visualforceページ名は”JSSample_Account”を指定し、OKを押す

　３．ページタブにある「ページスクリプト」→「ページスクリプト編集」をクリック（下図の赤枠の部分）し、ページスクリプトエディタを起動（下図の真ん中にあるダイアログ）
　４．ページスクリプトエディタに下記コードを記述し、OKを押す

　５．左上のデプロイボタン（下図の赤枠の部分）を押し、デプロイ確認で「テスト環境（Sandbox、Developer Edition）」を選択し、デプロイを押す

デプロイが完了したら、完了時に表示されるダイアログの「ページを開く」をクリックするか、もしくは下記のようなドメイン名の後ろに「/apex/JSSample_Account」を付けたURLをブラウザに入力し、デプロイ後の画面を表示してください。

URLの例：https://sampleurl-dev-ed–c.ap15.visual.force.com/apex/JSSample_Account

下図のようなダイアログが表示されていれば成功です。

JavaScriptを書く場合、「Script」タグの中に処理を記述しますが、SkyVisualEditorではデプロイ時に自動でScriptタグを出力するので、記載は不要です。

今回は、StudioでJavaScriptを扱うための2つのポイントについて説明しました。

• JavaScriptはページスクリプトに記述できる
• Scriptタグの記述は不要で、処理部分のみの記述でOK

SkyVisualEditorは、Scriptタグを自動で出力するだけでなく、jQueryというJavaScriptをより便利に利用するためのライブラリも自動で読み込みます。
通常は、このようなライブラリを利用するための記述も必要なのですが、そのような手間をかけずにjQueryが利用できますので、これを活用しない手はありません。
次回は、このjQueryを利用し、画面上に表示される値を操作する方法を解説します。

TerraSkyBaseでは、弊社製品だけでなくSalesforceを活用する上で役に立つ情報を発信しております。最新情報をメールでお知らせしておりますので、この機会に登録いただけますと幸いです。

「SkyVisualEditorでJavaScriptを活用する！」シリーズは下記もご参考ください。

• SkyVisualEditorでJavaScriptを活用する！その１「Hello World」(本ブログ）
• SkyVisualEditorでJavaScriptを活用する！その２「画面上の文字を操る」
• SkyVisualEditorでJavaScriptを活用する！その３「画面表示時に背景色を指定する」
• SkyVisualEditorでJavaScriptを活用する！その４「表示内容を出し分ける」
• SkyVisualEditorでJavaScriptを活用する！その５「データテーブルで繰り返し処理を実行する」