2021.06.16

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

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

みなさんこんにちは。 製品営業本部の髙杉です。
前回のBlogでは、SkyVisualEditorのStudio(以後Studio)でのJavaScriptの書き方をご説明しました。

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

1. jQueryとは
2. jQueryを利用して画面上の特定の文字を取得する方法
3. jQueryで文字を書き換える方法

1. jQueryとは

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

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

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

タグと要素の説明

2. jQueryを利用して画面上の特定の文字を取得する方法

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

取得する文字とボタンの準備

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

カスタムボタンと自由テキストの配置

JavaScriptを記述する

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

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

カスタムボタンの設定

alert('Hello, SkyVisualEditor!' + jQuery('[id$=Component3]').text());
サンプルコード1

文字が取得できたか確認する

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

jQueryで取得した値の表示

処理の内容について

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

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

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

ブラウザに出力されている要素とjQueryの解説

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

3. jQueryで文字を書き換える

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

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

jQuery('[id$=Component3]').text('書き換えた文字');
サンプルコード2

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

jQueryによる値の書き換え

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

まとめと次回やること

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

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

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

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

30 件
     
  • banner
  • banner

関連する記事