Salesforce1 Platform API サービスガイド
jコンポーネント ID へのアクセスのベストプラクティス
JavaScript または他の Web 対応言語で Visualforce コンポーネントを参照するには、そのコンポーネントの id 属性の値を指定する必要があります。DOM ID はコンポーネントの id 属性とその要素を含むすべてのコンポーネントの id 属性の組み合わせで構成されます。
$Component グローバル変数を使用すると、Visualforce コンポーネント用に生成される DOM ID の参照が簡略化され、ページ構造全体での連動関係の一部が削減されます。特定の Visualforce コンポーネントの DOM ID を参照するには、ページのコンポーネント階層の各レベルを区切るドット表記を使用して、コンポーネントのパス指定子を $Component に追加します。たとえば、Visualforce コンポーネント階層の同じレベルにあるコンポーネントを参照するには $Component.itemId を使用し、完全なコンポーネントパスを指定するには $Component.grandparentId.parentId.itemId を使用します。
- $Component が使用されているコンポーネント階層の現在のレベルでまず照合されます。
- 次に、一致が検出されるか、コンポーネント階層の最上位レベルに達するまで、コンポーネント階層の各上位レベルが照合されます。
バックトラッキングはないため、ID の照合で上に移動してから下に戻る必要がある場合は、一致しません。
1swfobject.registerObject("clippy.codeblock-0", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17<apex:page >
18
19
20
21 <style>
22
23 .clicker { border: 1px solid #999; cursor: pointer;
24
25 margin: .5em; padding: 1em; width: 10em; text-align: center; }
26
27 </style>
28
29
30
31 <apex:form id="theForm">
32
33 <apex:pageBlock id="thePageBlock" title="Targeting IDs with $Component">
34
35 <apex:pageBlockSection id="theSection">
36
37 <apex:pageBlockSectionItem id="theSectionItem">
38
39 All the alerts refer to this component.
40
41
42
43 <p>The full DOM ID resembles something like this:<br/>
44
45 j_id0:theForm:thePageBlock:theSection:theSectionItem</p>
46
47 </apex:pageBlockSectionItem>
48
49
50
51 <!-- Works because this outputPanel has a parent in common
52
53 with "theSectionItem" component -->
54
55 <apex:outputPanel layout="block" styleClass="clicker"
56
57 onclick="alert('{!$Component.theSectionItem}');">
58
59 First click here
60
61 </apex:outputPanel>
62
63 </apex:pageBlockSection>
64
65
66
67 <apex:pageBlockButtons id="theButtons" location="bottom">
68
69 <!-- Works because this outputPanel has a grandparent ("theSection")
70
71 in common with "theSectionItem" -->
72
73 <apex:outputPanel layout="block" styleClass="clicker"
74
75 onclick="alert('{!$Component.theSection.theSectionItem}');">
76
77 Second click here
78
79 </apex:outputPanel>
80
81
82
83 <!-- Works because this outputPanel has a distant ancestor ("theForm")
84
85 in common with "theSectionItem" -->
86
87 <apex:outputPanel layout="block" styleClass="clicker"
88
89 onclick="alert('
90
91 {!$Component.theForm.thePageBlock.theSection.theSectionItem}');">
92
93 Third click here
94
95 </apex:outputPanel>
96
97 </apex:pageBlockButtons>
98
99
100
101 </apex:pageBlock>
102
103
104
105 <!-- Works because this outputPanel is a sibling to "thePageBlock",
106
107 and specifies the complete ID path from that sibling -->
108
109 <apex:outputPanel layout="block" styleClass="clicker"
110
111 onclick="alert('{!$Component.thePageBlock.theSection.theSectionItem}');">
112
113 Fourth click here
114
115 </apex:outputPanel>
116
117
118
119 <hr/>
120
121
122
123 <!-- Won't work because this outputPanel doesn't provide a path
124
125 that includes a sibling or common ancestor -->
126
127 <apex:outputPanel layout="block" styleClass="clicker"
128
129 onclick="alert('{!$Component.theSection.theSectionItem}');">
130
131 This won't work
132
133 </apex:outputPanel>
134
135
136
137 <!-- Won't work because this outputPanel doesn't provide a path
138
139 that includes a sibling or common ancestor -->
140
141 <apex:outputPanel layout="block" styleClass="clicker"
142
143 onclick="alert('{!$Component.theSectionItem}');">
144
145 Won't work either
146
147 </apex:outputPanel>
148
149
150
151 </apex:form>
152
153</apex:page>一意の ID の使用
コンポーネント id はページの各階層セグメント内で一意である必要があります。ただし Salesforce では、参照する必要があるすべてのコンポーネント、およびその参照に必要なコンポーネント階層の上位コンポーネントに対して、ページで一意の id を使用することをお勧めします。
たとえば、1 つのページに 2 つのデータテーブルがあるとします。両方のデータテーブルが同じページブロック内に指定されている場合は、両方のデータテーブルの id 属性が一意である必要があります。それぞれが別のページブロックに指定されている場合は、同じコンポーネント id を付与することができます。ただし、この場合、特定のデータテーブルを参照できる唯一の方法として、すべてのコンポーネントに id を割り当ててから、Visualforce で自動的に参照するのではなく、コンポーネント階層を使用してデータテーブルのコンポーネントを参照する必要があります。また、ページ階層に変更があると、プログラムが機能しません。
コンポーネント ID での反復
テーブル、リストなどの一部のコンポーネントでは、レコードのコレクションの反復をサポートしています。これらのタイプのコンポーネントに ID を割り当てると、コンポーネントの各反復に、最初の ID に基づいて一意の「複合 ID」が割り当てられます。
1swfobject.registerObject("clippy.codeblock-1", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17<apex:page standardController="Account" recordSetVar="accounts" id="thePage">
18
19 <apex:dataTable value="{!accounts}" var="account" id="theTable">
20
21 <apex:column id="firstColumn">
22
23 <apex:outputText value="{!account.name}"/>
24
25 </apex:column>
26
27 <apex:column id="secondColumn">
28
29 <apex:outputText value="{!account.owner.name}"/>
30
31 </apex:column>
32
33 </apex:dataTable>
34
35</apex:page>1<table id="thePage:theTable" border="0" cellpadding="0" cellspacing="0">
2
3<colgroup span="2"/>
4
5<tbody>
6
7 <tr class="">
8
9 <td id="thePage:theTable:0:firstColumn">
10
11 <span id="thePage:theTable:0:accountName">Burlington Textiles</span>
12
13 </td>
14
15 <td id="thePage:theTable:0:secondColumn">
16
17 <span id="thePage:theTable:0:accountOwner">Vforce Developer</span>
18
19 </td>
20
21 </tr>
22
23 <tr class="">
24
25 <td id="thePage:theTable:1:firstColumn">
26
27 <span id="thePage:theTable:1:accountName">Dickenson</span>
28
29 </td>
30
31 <td id="thePage:theTable:1:secondColumn">
32
33 <span id="thePage:theTable:1:accountOwner">Vforce Developer</span>
34
35 </td>
36
37 </tr>
38
39</table>列のすべてのエントリを参照するには、テーブルの行を反復して、列の形式に従った ID を含む各 <td> 要素を参照する必要があります。
同じタイプの ID の生成がテーブルセル内の要素に対して実行されます。たとえば、最初の行の取引先名は、ID が thePage:theTable:0:accountName である span として生成されます。ID にはその ID がある列の ID の値は含まれません。