2021.06.09

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

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

みなさんこんにちは。 製品営業本部の髙杉です。

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

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

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

動的に入力項目を表示・非表示させる

検索結果で注目させたい部分に色を付ける

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

SkyVisualEditorの開発環境の準備

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

SkyVisualEditorのStudioでJavaScriptを書く

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

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

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

レイアウトマネージャの画面

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

alert('Hello, SkyVisualEditor!');
サンプルコード1

ページスクリプトエディタの画面

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

デプロイ確認の画面

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

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

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

JavaScriptのAlertダイアログ

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

まとめと次回やること

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

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

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

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

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

21 件
     
  • banner
  • banner

関連する記事