SkyVisualEditorでJavaScriptを活用する！その6「よく使うjQueryのメソッド」

みなさんこんにちは。

これまで、SkyVisualEditorのStudio(以降Studio)でのJavaScriptの書き方について、５回に渡って解説をしてきました。
これまで、jQueryの説明はその２のブログで少し触れただけなのですが、SkyVisualEditorの中でよく使うメソッドがあります。今回はより理解を深めていただくために、改めてよく使うメソッドの解説をしていきます。

jQueryのメソッドは、jQueryオブジェクトを操作する命令文です。jQueryオブジェクトは、操作対象となる要素の情報を保持しているため、この要素に対する操作ができます。今回はSkyVisualEditorでよく使うメソッドのみをご紹介しますが、興味がある方は下記のリファレンスもご参考ください。

jQuery 1.9 日本語リファレンス - js STUDIO

※ 本Blogでは、SkyVisualEditor V17.2で利用しているjQuery(jquery-3.5.1)で検証しております。

今回のBlogでは、３つのメソッド text、val、css について解説をしていきます。

このメソッドは、HTMLの 開始タグと終了タグの間にある「テキスト情報」の取得・追加・変更 を行います。
Studioで配置した 表示項目 の 値 は、HTML上の テキスト情報 に存在しているため、このメソッドを使います。 例えば、過去のその２のブログで行ったような、自由テキストの 値 や、オブジェクト表示項目の 値 が取得ができます。
また、textメソッドに引数を指定することで、テキスト情報を引数で指定した文字に変更できます。

では、textメソッドを使用して表示項目の値を取り出し、他の項目に入れ替える画面を作成してみましょう。
StudioでSalesforceレイアウトで新規画面を作成します。主オブジェクトは取引先選択し、Studio上には下記のように表示項目とカスタムボタンを配置してください。
その後、カスタムボタンのプロパティにある 動作選択 には JavaScript/Apex呼出 を指定します。 OnClick には、Studioのキャプチャ画像の下にあるサンプルコードを記述してください。
Component5 と Component28 のコンポーネントIDは環境により変わりますので、お使いの環境に合わせて書き換えをお願いします。

画面を作成し、OnClickにJavaScriptの記述できましたらデプロイしてSalesforce上で動きを確認しましょう。
アプリケーションビルダーで取引先のレコード詳細にデプロイした画面を配置しますと、以下のような動きが確認できます。

このメソッドは、textメソッドとは違い、HTMLの タグが持つ「value属性」の取得・追加・変更 を行います。
Studioで配置した 入力項目 の 値 は、HTML上の value属性 に存在しているため、このメソッドを使います。
textメソッド同様、valメソッドも引数を指定することで、値を引数で指定した文字に変更できます。

先ほどと同様、valメソッドを使用して入力項目の値を取り出し、他の項目に入れ替える画面を作成してみましょう。
画面はSalesforceレイアウト、主オブジェクトは取引先で、下記の様にカスタムボタンと入力項目を配置してください。
サンプルコードもカスタムボタンの OnClick に記述します。 Component8 と Component31 のコンポーネントIDも先ほど同様、環境により変わりますので、お使いの環境に合わせて書き換えをお願いします。

画面ができましたら、デプロイしてSalesforce上で動きを確認しましょう。 この画面もアプリケーションビルダーで取引先のレコード詳細にデプロイした画面を配置しますと、以下のような動きが確認できます。

このメソッドは、HTMLの タグが持つ「style属性」の取得・追加・変更 を行います。styleを指定するには、cssの プロパティと値をセットで指定 します。プロパティだけを指定 すると、設定されている プロパティの値が取得 できます。
よく使うcssのプロパティと値は下記の表をご確認ください。
尚、ここに記載したcssのプロパティはごく一部ですので、興味がある方はcssのプロパティについては他の識者が書いた情報などご確認ください。

それでは、cssメソッドを使い上記のcssプロパティを設定するカスタムボタンを作成してみましょう。
今回は下図のように二つのカスタムボタンを配置し、それぞれのOnClickにJavaScriptを記述してください。

この画面もデプロイ後、アプリケーションビルダーで取引先のレコード詳細に配置しますと、以下のように、動的に見た目を変えられることが確認できます。

今回は、SkyVisualEditorでよく利用するjQueryのメソッドについて説明しました。冒頭でも述べましたが、jQueryには今回紹介したメソッド以外にも色々ありますので、ぜひ試してみてください。

本ブログはシリーズでStudioにおけるJavaScriptの書き方をご紹介しております。こちらで紹介しているテクニックも今回は利用しておりますので、詳細を確認したい方は合わせてご確認ください。

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

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

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