2011-04-08

Force.com : 標準の salesforce のページに似たページを作成したい[Visualforceタグ]


標準の salesforce のページに似たページを作成したい (<apex:pageBlock>, <apex:pageBlockSection>, <apex:pageBlockTable>)
  • 子要素のデフォルトのユーザモードを指定したい (<apex:pageBlock>)
  • カラム数を指定したい (<apex:pageBlockSection>)
  • 一覧を表示したい (<apex:pageBlockTable>)



◆ <apex:pageBlock> コンポーネント

<apex:page>
    <apex:pageBlock></apex:pageBlock>
</apex:page>

備考
  • 標準の salesforce の詳細ページに似た領域
属性備考
mode="(detail|maindetail|edit)"
  • 子要素のユーザモードを指定する
  • デフォルト : detail
  • 型 : String
title="(タイトル)"
  • page block のタイトルを指定する
  • 型 : String
※ 詳細は apex:pageBlock を参照



◆ <apex:pageBlockSection> コンポーネント

<apex:page>
    <apex:pageBlock>
        <apex:pageBlockSection></apex:pageBlockSection>
    </apex:pageBlock>
</apex:page>

備考
  • 標準の salesforce のページレイアウト定義のセクションに似た領域
  • <apex:pageBlock> コンポーネント内で使用可能
属性備考
columns="(カラム数)"
  • セクションのカラム数を指定する
  • デフォルト : 2
  • 型 : Integer
title="(タイトル)"
  • page block section のタイトルを指定する
  • 型 : String
※ 詳細は apex:pageBlockSection を参照



◆ <apex:pageBlockTable> コンポーネント

<apex:page>
    <apex:pageBlock>
        <apex:pageBlockSection>
            <apex:pageBlockTable value="{!(リスト)}" var="(変数名)"></apex:pageBlockTable>
        </apex:pageBlockSection>
    </apex:pageBlock>
</apex:page>

備考
  • 標準の salesforce の関連リスト、リストビューに似た領域
  • <apex:pageBlock>, <apex:pageBlockSection> コンポーネント内で使用可能
属性備考
value="{!(リスト)}"
  • 一覧を指定する
  • 必須項目
  • 型 : Object
var="(変数名)"
  • 一覧のオブジェクトの変数名を宣言する
  • 必須項目
  • 型 : String
※ 詳細は apex:pageBlockTable を参照



○ 子要素のデフォルトのユーザモードを指定したい (<apex:pageBlock>)

Ex. 詳細モード

■ Visualforce ページ
<apex:page standardController="Account" >
    <apex:sectionHeader title="sectionHeader - title" subtitle="sectionHeader - subtitle" />
    <apex:pageBlock title="page block - mode : detail" mode="detail">
        <apex:pageBlockSection title="page block section">
            <apex:outputField value="{!account.name}"/>
            <apex:outputField value="{!account.site}"/>
            <apex:outputField value="{!account.Website}"/>
            <apex:outputField value="{!account.Industry}"/>
        </apex:pageBlockSection>
    </apex:pageBlock>
</apex:page>


■ 画面イメージ


Ex. メイン詳細モード

■ Visualforce ページ
<apex:page standardController="Account" >
    <apex:sectionHeader title="sectionHeader - title" subtitle="sectionHeader - subtitle" />
    <apex:pageBlock title="page block - mode : maindetail" mode="maindetail">
        <apex:pageBlockSection title="page block section">
            <apex:outputField value="{!account.name}"/>
            <apex:outputField value="{!account.site}"/>
            <apex:outputField value="{!account.Website}"/>
            <apex:outputField value="{!account.Industry}"/>
        </apex:pageBlockSection>
    </apex:pageBlock>
</apex:page>


■ 画面イメージ


Ex. 編集モード

■ Visualforce ページ
<apex:page standardController="Account" >
    <apex:sectionHeader title="sectionHeader - title" subtitle="sectionHeader - subtitle" />
    <apex:form >
        <apex:pageBlock title="page block - mode : edit" mode="edit">
            <apex:pageBlockButtons >
                <apex:commandButton action="{!save}" value="save"/>
                <apex:commandButton action="{!cancel}" value="cancel"/>
            </apex:pageBlockButtons>
            <apex:pageBlockSection title="page block section - column : 3" columns="3">
                <apex:inputField value="{!account.name}"/>
                <apex:inputField value="{!account.site}"/>
                <apex:inputField value="{!account.Website}"/>
                <apex:inputField value="{!account.Industry}"/>
            </apex:pageBlockSection>
        </apex:pageBlock>
    </apex:form>
</apex:page>


■ 画面イメージ



○ カラム数を指定したい (<apex:pageBlockSection>)

Ex. 3 カラム

■ Visualforce ページ
<apex:page standardController="Account">
    <apex:sectionHeader title="sectionHeader - title" subtitle="sectionHeader - subtitle" />
    <apex:pageBlock title="page block" mode="detail">
        <apex:pageBlockSection title="page block section" columns="3"></apex:pageBlockSection>
    </apex:pageBlock>
</apex:page>



○ 一覧を表示したい (<apex:pageBlockTable>)

Ex.
  1. [取引先]オブジェクトの[取引先責任者]一覧を表示

■ Visualforce ページ
<apex:page standardController="Account">
    <apex:sectionHeader title="section header - title" subtitle="section header - subtitle" />
    <apex:outputpanel>
        <apex:pageBlock title="page block - title">
            <apex:pageBlockTable value="{!account.Contacts}" var="contact">
                <apex:facet name="caption">table caption</apex:facet>
                <apex:facet name="header">table header</apex:facet>
                <apex:facet name="footer">table footer</apex:facet>
                <apex:column style="width:120px;">
                    <apex:facet name="header">column header [取引先責任者名]</apex:facet>
                    <apex:outputLink value="/{!contact.Id}"><apex:outputField value="{!contact.Name}" /></apex:outputLink>
                    <apex:facet name="footer">column footer [取引先責任者名]</apex:facet>
                </apex:column>
                <apex:column style="width:120px;">
                    <apex:facet name="header">column header [取引先名]</apex:facet>
                    <apex:outputLink value="/{!contact.Account.Id}"><apex:outputField value="{!contact.Account.Name}" /></apex:outputLink>
                    <apex:facet name="footer">column footer [取引先名]</apex:facet>
                </apex:column>
            </apex:pageBlockTable>
        </apex:pageBlock>
    </apex:outputpanel>
</apex:page>


■ 画面イメージ



◇ 環境

  • Salesforce - Developer Edition - API バージョン 21.0



◇ 参考


0 件のコメント:

コメントを投稿