2021.08.18

SkyVisualEditorでJavaScriptを活用する!その4「表示内容を出し分ける」

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

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

キャンペーンの応募フォームでメールアドレスを書くのを忘れ、送信ボタンを押したことありませんか?自分はあります。
SkyVisualEditorで作成したフォームでも入力を忘れていたときだけ、「メールアドレスを入力してください」と表示できたら親切ですよね?
今回は「SkyVisualEditorで特定の条件の時に表示が切り替わる画面を作る方法」を学びましょう。

1. JavaScriptの条件指定「if」について
2. マージフィールドとは
3. 項目を出し分ける画面を作る

1.JavaScriptの条件指定「if」について

下記の動画のように、特定の項目に値がない場合は注意文言を表示し、値があれば注意文言を出さない動きを実現しましょう。
今回は、例としてメールアドレスを入力するテキストボックスを対象にしていますが、もちろん他の入力項目でも利用できます。

メールアドレスが無い場合は注意文言を表示する

JavaScriptには特定条件を指定し、その条件に合致した場合に処理を実行させる「制御構文」と呼ばれる書き方があります。
「もし、メールアドレスが空だったら、メール項目の下に注意文言を表示する」という場合、「もし、メールアドレスが空だったら」が条件となり、「メール項目の下に注意文言を表示する」が実行する処理となります。これをJavaScriptで表現すると、

JavaScriptのifの制御構文

このようになります。

この「if」を使った書き方を「制御構文」といいます。「制御構文」はどのプログラミング言語でも似た書き方をするので覚えておくといざというときに便利です。

次にifの後の ( ) に注目してください。左と右の値を比較する条件を記載しています。制御構文を見てみると == で左と右の値を比較させており、この意味は 左と右の値が同じ であるかを判定しています。

また、制御構文の処理内容を見ると「{!record.Email} == ’’」のように書かれていますが、これは、{!record.Email} が空の場合に実行されるという意味です。 {!record.Email} について補足しますと、これはレコード内に存在するEmail項目の文字を取得する処理です。この書き方はマージフィールドといいます。
はい、ちょっとよくわかりませんね。このあと詳しく説明しますのでご安心を。

次に { } の部分を見てください。ここには条件に合致した際に実行させる処理を記述します。今回はjQueryを利用した処理を記載しています。append() はjQueryのメソッドで、()内で指定した文字をjQueryで取得した要素の後ろに追加します。

2.マージフィールドとは

先ほどの、{!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 等もあります。詳しくはこちらのヘルプをご確認ください。

3.項目を出し分ける画面を作る

ここからは学んだ知識を生かし、入力を忘れていたときにだけ、「メールアドレスを入力してください」というメッセージを表示する画面を作りましょう。

1.Studioにログインし、「ファイル」→「ページレイアウトを取得」で取引先責任者のマスタレイアウトを選択し、「開く」ボタンを押してください。

ページレイアウト取得

2.次に、参照用画面を作ります。「ツール」→「参照画面作成」を選択し、参照用ページ変換確認ダイアログを表示します。ここでは特に何も変えずに「OK」をクリックします。

参照用画面の作成

3.Studioには下記のような画面が出ているかと思います。
  この中に「メール」という項目がありますので、これをクリックしてコンポーネントのプロ
  パティを表示します。
  画面上にメール項目が無い場合は、左のオブジェクトペインを表示に切り替え、メール項目を配置してください。

4.プロパティ内の「ID」と「項目API参照名」を確認し、その値をメモ帳などに記載しましょう。
  この値はこの後で使います。

メール項目のIDとAPI参照名の確認

5.Studioの右のタブを「ページ」に切り替え、「ページスクリプト編集」をクリックしてページスクリプトエディタを開きます。

ページスクリプトエディタの表示

6.ページスクリプトエディタには下記のコードを記述しますがしてください。
  2行目の「Email」の部分には先ほどメモした 項目API参照名 の値を、3行目の「Component129」 部分には、ID の値を記述してください。また、動きには直接関係がありませんが、LEXに画面を 配置する場合は「LEXデザイン」を有効化することをお勧めします。
  見た目は本Blogの冒頭に表示した動画と同じになります。

jQuery(function(){
  if ('{!record.Email}' == '') {
    jQuery('[id$=Component129]').append('<br><font color="#FF0000">メールアドレスが分かる場合は入力してください。</font>');
  }
});
JavaScriptの制御構文の例

7.最後にSalesforceにデプロイし、取引先責任者のレコードページをアプリケーションビルダーで 開き、デプロイした画面(Visualforcce)を配置して完成です。

8.取引先責任者のレコードページを開き、メール項目の値を空にして保存してください。
  メール項目の下にメッセージが表示されます。
  メール項目にメールアドレスを入力して保存しますと、メッセージが消えるのも確認できます。

Studioからのデプロイとアプリケーションビルダーでの配置

まとめ

今回はJavaScriptの処理について、下記2つのポイントを説明しました。

  • 制御構文 if を使うことで条件による出し分けができる
  • Visualforceの機能の マージフィールド を使うことでレコードの値やログインユーザの情報を条件に指定できる

過去3回は、StudioにおけるJavaScriptの書き方の基本となる内容をご紹介しております。こちらで紹介しているテクニックも今回は利用しておりますので、詳細を確認したい方は合わせてご確認ください。

SkyVisualEditorでJavaScriptを活用する!その1「Hello World」
SkyVisualEditorでJavaScriptを活用する!その2「画面上の文字を操る」
SkyVisualEditorでJavaScriptを活用する!その3「画面表示時に背景色を指定する」

記述されたJavaScriptに関する質問はSkyVisualEditorの標準サポートではお答えできませんが、安心してください。
アドミンカフェではSkyVisualEditorの標準機能だけで解決できない動きをフォローさせていただきます。困ったことがありましたらSkyVisualEditorご契約者様の特典であるアドミンカフェのご利用をご検討ください。

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

29 件
     
  • banner
  • banner

関連する記事