SalesforceのComponentとは？使い方をご紹介します！

SalesforceのComponentとは？使い方をご紹介します！

ここでは、Salesforceの機能の一つである関数のComponentについて簡単に説明していきます。 ここで例に挙げているメソッドを理解することにより、Componentを使用することによって作業の幅が増えますので理解していきましょう。

Salesforceでできることは？

はじめに、Salesforceでできることは何かご紹介します。 Salesforceには様々なコンポーネントが標準で用意されています。 今回は例として Googleマップを表示するlightning:mapコンポーネントについて初めに解説します。 ・lightning:mapコンポーネント ・Google Maps API この2つを使用してSalesforceで地図を表示させることができます。 Salesforceのサンプルコードは以下の3つになります。 ・Component、Component Controller、Apex Class その中でも今回はSalesforceのComponentについて解説していきます。

Componentとは？

Visualforce コンポーネントを参照する際に実装するグローバル差し込みコマンドの項目種別です。 Visualforceページのコンポーネントには、割り振られた id属性があります。ページが表示される際のこの属性は、ドキュメントオブジェクトモデル (DOM) IDの生成に使用されます。 JavaScriptで $Component.Path.to.Idを使用し、ページ上の特定のコンポーネントを参照できます。Path.to.Id は、参照するコンポーネントのコンポーネント階層指定子です。

Componentの使い方

ここで1部Componentのメソッドをご紹介します。 ①function beforeTextSave() { document.getElementById(‘{!$Component.msgpost}’).value = myEditor.getEditorHTML(); } このJavaScriptメソッドは、Visualforceページ内のmsgpostという名前のコンポーネントを参照します。 ②apex:page apex:outputText id=””msgpost”” value=””Emacs””/ is great. ・こちらでmsgpost が参照する コンポーネントを表示します。 ③apex:page apex:pageBlock id=””theBlock”” apex:pageBlockSection id=””theSection”” columns=””1″” apex:pageBlockSectionItem id=””theSectionItem”” apex:outputText id=””theText”” Heya! /apex:outputText /apex:pageBlockSectionItem /apex:pageBlockSection /apex:pageBlock /apex:page こちらでコンポーネントがネストされている場合は、完全なコンポーネントパス指定子を使用しましょう。たとえば、ページが次のような場合を表しています。 ④document.getElementById( “”{!$Component.theBlock.theSection.theSectionItem.theText}””) こちらで、関数内で次のようにコンポーネントを参照できます。

Componentパス指定子について

Component パス指定子は、コンポーネント階層と以下のように照合することができます。 ・Componentが使用されているコンポーネントの現在の階層レベルでまず照合されます。 ・一致が検出されるか、コンポーネント階層の最上位レベルに達するまで、コンポーネント階層の各上位レベルが照合することができます。

ComponentをJavaScriptで参照しよう

最後に応用としてJavaScriptでの参照の仕方を説明します。 $Componentグローバル変数を使用すると、Visualforceコンポーネント用に生成されるDOM IDの参照を簡略化することができます。 それによりページ構造全体での連動関係の一部を削減することができます。 どのVisualforceタグにも id属性が含まれています。他のタグでタグのid属性を使用することにより、その2つのタグをバインドすることができます。 たとえば、apex:outputLabelタグのfor属性をapex:inputFieldタグのid属性と並行させて使用することができます。 apex:actionFunction、apex:actionSupport、およびその他の活動指向型のコンポーネントのreRender属性および status属性もその他のコンポーネントのid属性の値を使用することができます。 このIDは、複数のVisualforceコンポーネントのバインドに使用されるだけではありません。ページを表示する際のコンポーネントのドキュメントオブジェクトモデル（DOM）IDの一部の形成にも使用することができます。 JavaScriptまたは他のWeb対応言語でVisualforceコンポーネントを参照するには、そのコンポーネントのid属性の値を指定する必要があります。 DOM IDはコンポーネントのid属性とその要素を含むすべてのコンポーネントのid属性の組み合わせで構成されます。 この応用方法により作業の幅を広げていきましょう。

まとめ

いかかでしたでしょうか。 この記事では、Componentの使い方やパス指定子の方法、JavaScriptでの参照方法を主に説明しました。実際に業務で活用してみましょう。]]>