2021.08.18
SkyVisualEditorでJavaScriptを活用する！その4「表示内容を出し分ける」
ポスト
みなさんこんにちは。
キャンペーンの応募フォームでメールアドレスを書くのを忘れ、送信ボタンを押したことありませんか？自分はあります。
SkyVisualEditorで作成したフォームでも入力を忘れていたときだけ、「メールアドレスを入力してください」と表示できたら親切ですよね？
今回は「SkyVisualEditorで特定の条件の時に表示が切り替わる画面を作る方法」を学びましょう。
１．JavaScriptの条件指定「if」について
下記の動画のように、特定の項目に値がない場合は注意文言を表示し、値があれば注意文言を出さない動きを実現しましょう。
今回は、例としてメールアドレスを入力するテキストボックスを対象にしていますが、もちろん他の入力項目でも利用できます。
メールアドレスが無い場合は注意文言を表示する
JavaScriptには特定条件を指定し、その条件に合致した場合に処理を実行させる「制御構文」と呼ばれる書き方があります。
「もし、メールアドレスが空だったら、メール項目の下に注意文言を表示する」という場合、「もし、メールアドレスが空だったら」が条件となり、「メール項目の下に注意文言を表示する」が実行する処理となります。これをJavaScriptで表現すると、
JavaScriptのifの制御構文
このようになります。
この「if」を使った書き方を「制御構文」といいます。「制御構文」はどのプログラミング言語でも似た書き方をするので覚えておくといざというときに便利です。
次にifの後の ( ) に注目してください。左と右の値を比較する条件を記載しています。制御構文を見てみると == で左と右の値を比較させており、この意味は 左と右の値が同じ であるかを判定しています。
また、制御構文の処理内容を見ると「{!record.Email} == ’’」のように書かれていますが、これは、{!record.Email} が空の場合に実行されるという意味です。 {!record.Email} について補足しますと、これはレコード内に存在するEmail項目の文字を取得する処理です。この書き方はマージフィールドといいます。
はい、ちょっとよくわかりませんね。このあと詳しく説明しますのでご安心を。
次に { } の部分を見てください。ここには条件に合致した際に実行させる処理を記述します。今回はjQueryを利用した処理を記載しています。append() はjQueryのメソッドで、()内で指定した文字をjQueryで取得した要素の後ろに追加します。
２．マージフィールドとは
先ほどの、{!record.Email} の部分、マージフィールドについて詳しく説明します。 マージフィールドとは、 HTMLに似たSalesforce独自の言語「Visualforce」 の書き方です。Visualforceでは取得したい変数(上記の場合は record.Email )を {! と } で囲みます。
Studioで作成した画面はVisualforceで書かれたHTMLも、Salesforceにデプロイできます。（※1)
※1 Studioからは、ApexとAuraもデプロイされますが、ここでの説明は割愛します。
Salesforceにデプロイすると、以下のようになります。
マージフィールドが変換された後
マージフィールドでは、オブジェクトの項目に保存された値、ログイン中のユーザ情報など、制御構文の条件で活用できる値が取得できます。便利だと思いませんか。
Studioでよく利用するマージフィールドの例をいくつか紹介します。
-
record.項目API参照名
Studioで配置した項目や主オブジェクト項目追加取得で設定した項目の値を取得します。
「項目API参照名」は、SalesforceのオブジェクトマネージャやStudioのコンポーネントプロパティにある「項目API参照名」で確認できます。 -
$UserRole.Name
ログイン中のユーザのロール名を取得します。 -
$Profile.Name
ログイン中のユーザのプロファイル名を取得します。
「$」がつくものは、Sslesforceが用意しているグローバル変数と呼ばれているもので、Studioに項目を配置しなくても参照できます。他にも組織の情報を取得する $Organization 等もあります。詳しくはこちらのヘルプをご確認ください。
３．項目を出し分ける画面を作る
ここからは学んだ知識を生かし、入力を忘れていたときにだけ、「メールアドレスを入力してください」というメッセージを表示する画面を作りましょう。
１．Studioにログインし、「ファイル」→「ページレイアウトを取得」で取引先責任者のマスタレイアウトを選択し、「開く」ボタンを押してください。
ページレイアウト取得
２．次に、参照用画面を作ります。「ツール」→「参照画面作成」を選択し、参照用ページ変換確認ダイアログを表示します。ここでは特に何も変えずに「OK」をクリックします。
参照用画面の作成
この中に「メール」という項目がありますので、これをクリックしてコンポーネントのプロ
パティを表示します。
画面上にメール項目が無い場合は、左のオブジェクトペインを表示に切り替え、メール項目を配置してください。
４．プロパティ内の「ID」と「項目API参照名」を確認し、その値をメモ帳などに記載しましょう。
この値はこの後で使います。
メール項目のIDとAPI参照名の確認
５．Studioの右のタブを「ページ」に切り替え、「ページスクリプト編集」をクリックしてページスクリプトエディタを開きます。
ページスクリプトエディタの表示
６．ページスクリプトエディタには下記のコードを記述しますがしてください。
2行目の「Email」の部分には先ほどメモした 項目API参照名 の値を、3行目の「Component129」 部分には、ID の値を記述してください。また、動きには直接関係がありませんが、LEXに画面を 配置する場合は「LEXデザイン」を有効化することをお勧めします。
見た目は本Blogの冒頭に表示した動画と同じになります。
jQuery(function(){
if ('{!record.Email}' == '') {
jQuery('[id$=Component129]').append('<br><font color="#FF0000">メールアドレスが分かる場合は入力してください。</font>');
}
});７．最後にSalesforceにデプロイし、取引先責任者のレコードページをアプリケーションビルダーで 開き、デプロイした画面（Visualforcce）を配置して完成です。
８．取引先責任者のレコードページを開き、メール項目の値を空にして保存してください。
メール項目の下にメッセージが表示されます。
メール項目にメールアドレスを入力して保存しますと、メッセージが消えるのも確認できます。
Studioからのデプロイとアプリケーションビルダーでの配置
まとめ
今回はJavaScriptの処理について、下記2つのポイントを説明しました。
- 制御構文 if を使うことで条件による出し分けができる
- Visualforceの機能の マージフィールド を使うことでレコードの値やログインユーザの情報を条件に指定できる
過去3回は、StudioにおけるJavaScriptの書き方の基本となる内容をご紹介しております。こちらで紹介しているテクニックも今回は利用しておりますので、詳細を確認したい方は合わせてご確認ください。
SkyVisualEditorでJavaScriptを活用する！その１「Hello World」
SkyVisualEditorでJavaScriptを活用する！その２「画面上の文字を操る」
SkyVisualEditorでJavaScriptを活用する！その３「画面表示時に背景色を指定する」
また、本ブログはシリーズでお届けしております。さらなる活用Tipsもありますので、下記もご覧ください。
SkyVisualEditorでJavaScriptを活用する！その５「データテーブルで繰り返し処理を実行する」
記述されたJavaScriptに関する質問はSkyVisualEditorの標準サポートではお答えできませんが、安心してください。
アドミンカフェではSkyVisualEditorの標準機能だけで解決できない動きをフォローさせていただきます。困ったことがありましたらSkyVisualEditorご契約者様の特典であるアドミンカフェのご利用をご検討ください。
TerraSkyBaseでは、弊社製品だけでなくSalesforceを活用する上で役に立つ情報を発信しております。最新情報をメールでお知らせしておりますので、この機会に登録いただけますと幸いです。
