ポスト
前回に引き続き、今回もVisualforceページに対し機能追加をするための仕組み「AppComponent」の活用例を元に説明していきます。
※ここでは割愛しますが、AppComponentの詳細については アプリを作る | SkyVisualEditorで開発するをご参照ください
技術的の面においてAppComponentとは、SkyVisualEditorが生成するVisualforceに対し「Visualforce コンポーネント」、または「Visualforceのコードの断片」を挿入し機能追加する仕組みです。 従って少々乱暴ですが、AppComponentとは「Visualforceでこう書けばこういう機能を実装できる」と分かっている場合、コードをほぼそのまま流用するだけでコンポーネント化して機能追加が出来る仕組みと言えます。
さて、現バージョン（v9.0）のSkyVisualEditorでは「取引先」オブジェクトの「関連取引先責任者」関連リストに対応していません。いますぐに機能利用したい場合は以下のフローで開発出来ることをAppComponentの利用例として共有したいと思います。
Salesforceのリファレンスなどを確認することで、Visualforceで下記のコードを記述すれば該当の関連リストを表示できることが分かります。
<apex:relatedList list="AccountContactRelations"></apex:relatedList>
しかしこのままSkyVisualEditorが生成したソースコードを編集した場合、再度デプロイする時に上書きされてしまいますので、AppComponentの仕組みを利用してコンポーネント化します。スタジオ画面での見た目にこだわりがなければ、下記の最小限のコードだけでスタジオで利用できるコンポーネントを作成できます。
...(AppComponentのヘッダー部分を省略)
<AppComponent name="RelatedListAppcom">
<Title>関連リストAppCom</Title>
<Description>指定したlist名で関連リストを表示する</Description>
<Layout>inline</Layout>
<Height value="50" resizable="true" />
<Width value="50" resizable="true" />
<PutablePlaces outOfFormPanel="true">
</PutablePlaces>
<DirectComponent>
<DirectComponentBody><![CDATA[<apex:relatedList list="AccountContactRelations"></apex:relatedList>]]></DirectComponentBody>
</DirectComponent>
</AppComponent>
...このように、スタジオでコンポーネントとして配置する際に必要な情報などAppComponentの作法的な部分を除けば、DirectComponentBodyの中にVisualforceに挿入したいコードをそのまま記述すれば良いというシンプルなコードでコンポーネントを追加出来ます。
このままでも機能として利用できますが、せっかくAppComponentを作ったので関連リストを指定する部分を変数として定義しスタジオで使いたい関連リストを指定出来るように拡張します：
...(AppComponentのヘッダー部分を省略)
<AppComponent name="RelatedListAppcom">
<Title>関連リストAppCom</Title>
<Description>指定したlist名で関連リストを表示する</Description>
<Layout>inline</Layout>
<Height value="50" resizable="true" />
<Width value="50" resizable="true" />
<PutablePlaces outOfFormPanel="true">
</PutablePlaces>
<DirectComponent>
<DirectComponentBody><![CDATA[<apex:relatedList list="%%%list%%%"></apex:relatedList>]]></DirectComponentBody>
</DirectComponent>
<Properties>
<String name="list" label="関連リスト" isRequired="true"/>
</Properties>
</AppComponent>
...上記のコードをAppComponentとして組織に配置し、コンポーネントを取引先のページの一番下に配置した場合、このような状態になります。 最小限の設定で実装したためデフォルトのアイコンが表示されるだけですが、キャンバス上に表示する画像やサイズを指定することでよりデプロイ後のイメージに近づけることが出来ます。
関連リストAppComponent：スタジオ
そのままページをデプロイし、Salesforce上で表示するとこのように、SkyVisualEditorでまだ対応していない関連リストが表示されます。
関連リストAppComponent：デプロイ後
以上のように、Visualforceについての知識があればAppComponentの仕組みを使って簡単に新しいコンポーネントを作成できますので、標準機能で実現できない機能がある際にぜひご活用してください。
