SkyVisualEditorでJavaScriptを活用する！その２「画面上の文字を操る」

みなさんこんにちは。
前回のBlogでは、SkyVisualEditorのStudio（以後Studio）でのJavaScriptの書き方をご説明しました。

今回は内容を発展させ、「ボタンクリック」という特定のアクションで表示する方法、さらには画面上の文字を書き換える方法を通して、前回のBlogで最後に触れたjQuery（JavaScriptで利用できるライブラリの１つ）の使い方を学びましょう。
第二回目のゴールは画面上の文字を別の文字に変えられるようになることを目指します。

jQueryについて簡単にご説明します。

jQueryとはJavaScriptで利用できるライブラリです。JavaScriptだけでは大量のコードを書かなければできないこともjQueryを使うことで、少量の簡単なコードで実現できます。
Salesforceの画面は、基本的にHTMLのタグや要素（タグで始まりタグで終わるコンテンツのかたまりのことで、概念は下記の図をご参考ください）の組み合わせで構成されており、JavaScriptはこれらの要素を特定し、実行したいことを記述して動的な画面を実現します。

jQueryでは、この要素の指定や実行したいことを、JavaScriptで記述するよりも少ないコード量で実現できるようになっています。

さっそく、jQueryをどのように利用するのか学びましょう。

前回作成した画面を開き、下図のように自由テキストとカスタムボタンを1つずつ配置します。
配置後、自由テキストのコンポーネントIDの値を確認してください。このIDはこの後記述するJavaScriptの中で使います。
また、値プロパティの文字を「テスト１」に変更します。

次にJavaScriptを記述しますが、前回紹介したページスクリプトではなく、カスタムボタンのプロパティに記述しましょう。
カスタムボタンのプロパティには、ボタンをクリックしたときに実行される処理を書けますので、ユーザの操作時に実行する動きが定義できます。

カスタムボタンを選択し、「動作選択」に”JavaScript/Apex呼出”を指定します。
その下にある「OnClick」の”…”をクリックし、スクリプトエディタを表示させたら下図の下にあるコードを記述します。このとき、「Component3」となっている箇所は、上記で確認した自由テキストのIDを指定しますので、お手元の環境に合わせた値に変更をお願いします。
次に「return falseを出力」にチェックされていることを確認してから”OK”をクリックします。

最後に、前回と同様にデプロイを実行し、ブラウザでデプロイ後の画面を表示してください。
前回記述したページスクリプトのJavaScriptがある場合、最初にalertのダイアログが表示されますので、こちらは閉じてください。
表示された画面上で、カスタムボタンをクリックし、下記のようにalertのダイアログ内に「Hello, SkyVisualEditor!テスト1」と表示されていれば成功です。

jQueryで操作の対象となる要素を指定するには、「セレクタ」と呼ばれる機能を利用します。
今回はセレクタを利用して ‘[id$=Component3]’ のように指定しています。
Component3は自由テキストのコンポーネントIDですね。

なぜこのような指定方法になるのでしょうか？
それはStudioで指定するIDの値は 必ず一番最後 に付加されるというSkyVisualEditor独自のルールがあるためです。

次の図は、サンプルのWEBページのHTMLを表示させたものです。
該当のIDは j_id0:sve_form1:Component1:Component2:Component3 のように出力され、一番最後にStudioで設定したIDが付与されているのが確認できます。

SkyVisualEditorで要素を取得する場合、多くのケースでは一番最後に付与される要素を指定することが多いので覚えておきたいですね。
jQueryの処理のtext() の部分ですが、これは「メソッド」と呼ばれており、取得した要素に対してどのようなことを行うのかを定義しています。
Text()ついて詳しくは下記もご覧ください。
https://api.jquery.com/text/

次に、要素のテキストを別の文字に書き換える方法を説明します。

先ほどデプロイした画面をStudioで開いてください。
配置済みのカスタムボタンを選択し、「OnClick」の”…”をクリックし、スクリプトエディタを表示させます。
先ほど記述したコードは全て削除し、下記のサンプルコードを記述して「OK」を押します。

最後にデプロイを実行し、ブラウザでデプロイ後の画面を表示してください。
最初に表示されるダイアログは「OK」を押して消し、表示された画面上で、カスタムボタンをクリックし、「テスト１」の文字が「書き換えた文字」と表示されていれば成功です。

今回は、先ほどの「text()」のメソッドの部分にパラメータとして書き換えたいテキストを「text(‘書き換えたい文字’)」のように指定しています。
これにより、jQueryで指定した要素のテキスト部分を書き換えることができます。

今回は、以下の3つについて説明しました。

• カスタムボタンのプロパティ(OnClick)に記述したJavaScriptはクリック時に実行される
• 要素のテキスト部分はjQueryのtextメソッドを利用して取得できる
• 要素のテキスト部分はjQueryのtextメソッドにパラメータを渡すことで書き換えができる

実は今回の処理はページスクリプトでも同様のことができますが、ページスクリプトではなく、カスタムボタンのプロパティに記述したことにも理由があります。その理由は次回解説いたします。

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

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

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