Visualforce ページによる既存のページの上書き

標準の取引先詳細ページなど、既存のページ形式を変更するとします。取引先のすべての情報は単一ページに表示されます。多くの情報がある場合は、延々とスクロールする必要があります。Visualforce ページを使用すると、取引先責任者、商談など、取引先の各セクションをタブに表示できます。

最初に、クイック修正を使用して新しい Visualforce ページを作成します。

1. ブラウザで、テキスト「/apex/tabbedAccount」を Salesforce インスタンスの URL に追加します。たとえば、Salesforce インスタンスが https://MyDomainName.my.salesforce.com の場合、新しい URL は https://MyDomainName.my.salesforce.com/apex/tabbedAccount になります。次のエラーメッセージが表示されます。
   
2. 新規ページを作成するには、[Create Page tabbedAccount (ページ tabbedAccount を作成)] をクリックします。
3. ページの左下のページエディタリンクをクリックします。これにより、新しいページのコードが次のように表示されます。
   1<apex:page> 
   2<!-- Begin Default Content REMOVE THIS --> 
   3<h1>Congratulations</h1> 
   4This is your new Page: tabbedAccount 
   5<!-- End Default Content REMOVE THIS --> 
   6</apex:page>

4. 既存のコードを次のコードで置き換えて、[Save (保存)] をクリックします。
   1<apex:page standardController="Account" showHeader="true" 
   2      tabStyle="account" >
   3   <style>
   4      .activeTab {background-color: #236FBD; color:white; 
   5         background-image:none}
   6      .inactiveTab { background-color: lightgrey; color:black; 
   7         background-image:none}
   8   </style>
   9   <apex:tabPanel switchType="client" selectedTab="tabdetails" 
   10                  id="AccountTabPanel" tabClass='activeTab' 
   11                  inactiveTabClass='inactiveTab'>   
   12      <apex:tab label="Details" name="AccDetails" id="tabdetails">
   13         <apex:detail relatedList="false" title="true"/>
   14      </apex:tab>
   15      <apex:tab label="Contacts" name="Contacts" id="tabContact">
   16         <apex:relatedList subject="{!account}" list="contacts" />
   17      </apex:tab>
   18      <apex:tab label="Opportunities" name="Opportunities" 
   19                id="tabOpp">
   20         <apex:relatedList subject="{!account}" 
   21                           list="opportunities" />
   22      </apex:tab>
   23      <apex:tab label="Open Activities" name="OpenActivities" 
   24                id="tabOpenAct">
   25         <apex:relatedList subject="{!account}" 
   26                           list="OpenActivities" />
   27      </apex:tab>
   28      <apex:tab label="Notes and Attachments" 
   29                name="NotesAndAttachments" id="tabNoteAtt">
   30         <apex:relatedList subject="{!account}" 
   31                           list="CombinedAttachments" />
   32      </apex:tab>
   33   </apex:tabPanel>
   34</apex:page>

5. [取引先] ページにはデータがありません。前のページと同様に、URL に特定の取引先の ID を指定する必要があります。たとえば、https://MyDomainName.my.salesforce.com/apex/tabbedAccount?id=001D000000IRt53 のように指定します。取引先 ID を追加した後、ページは次のように表示されます。
   

このページマークアップについては、次の点に留意してください。

• <style> は、実際には Visualforce マークアップではなく CSS マークアップの一部です。このマークアップでは、activeTab と inactiveTab という 2 種類のタブのスタイルが定義されます。
• <apex:tabPanel> が、タブの生成に使用されます。次の属性の使用方法を確認してください。
  • tabClass 属性: 有効になっているタブの表示に使用されるスタイルクラスを指定します。
  • inactiveTabClass 属性: 無効になっているタブの表示に使用されるスタイルクラスを指定します。
• タブパネルの定義内に、それぞれの子のタブコンポーネントの定義 <apex:tab> があります。最初のタブは <apex:detail> タグを使用してページの詳細ビューの該当部分を返します。
  1<apex:tab label="Details" name="AccDetails" id="tabdetails">
  2         <apex:detail relatedList="false" title="true"/>
  3      </apex:tab>

  一方、残りのタブは <apex:relatedList> を使用して取引先ページの異なる部分を指定します。取引先責任者のタブは次のようになります。タブでは、取引先責任者の既存のリストが使用されます。

  1<apex:tab label="Contacts" name="Contacts" id="tabContact">
  2         <apex:relatedList subject="{!account}" list="contacts" />
  3      </apex:tab>

[取引先] タブをクリックし、任意の取引先を選択します。取引先の詳細がタブに表示されます。