Visualforce 開発者ガイド
jインライン編集の有効化
バージョン 21.0 以降の Visualforce ページは、インライン編集をサポートしています。インライン編集では、レコードの詳細ページで直接、項目値をすばやく編集できます。編集可能なセルには、その上にマウスを置くと鉛筆アイコン (
) が表示され、編集できないセルの場合は、錠アイコン (
) が表示されます。
<apex:detail> コンポーネントには、インライン編集を有効にする属性があり、<apex:inlineEditSupport> コンポーネントには、さまざまなコンテナコンポーネントのインライン編集機能が用意されています。
インライン編集の効果を確認するために、次のコードを使用して inlineDetail というページを作成します。
1<apex:page standardController="Account">
2 <apex:detail subject="{!account.Id}" relatedList="false" />
3</apex:page>ここで、ページを次のコードで置き換えます。
1<apex:page standardController="Account">
2 <apex:detail subject="{!account.Id}" relatedList="false" inlineEdit="true"/>
3</apex:page>
<apex:inlineEditSupport> コンポーネントは、次のコンポーネントの子孫である必要があります。
- <apex:dataList>
- <apex:dataTable>
- <apex:form>
- <apex:outputField>
- <apex:pageBlock>
- <apex:pageBlockSection>
- <apex:pageBlockTable>
- <apex:repeat>
次は、インライン編集を利用する <apex:pageBlockTable> を使用してページを作成する方法を示すサンプルです。
1<apex:page standardController="Account" recordSetVar="records" id="thePage">
2 <apex:form id="theForm">
3 <apex:pageBlock id="thePageBlock">
4 <apex:pageBlockTable value="{!records}" var="record" id="thePageBlockTable">
5 <apex:column >
6 <apex:outputField value="{!record.Name}" id="AccountNameDOM" />
7 <apex:facet name="header">Name</apex:facet>
8 </apex:column>
9 <apex:column >
10 <apex:outputField value="{!record.Type}" id="AccountTypeDOM" />
11 <apex:facet name="header">Type</apex:facet>
12 </apex:column>
13 <apex:column >
14 <apex:outputField value="{!record.Industry}"
15 id="AccountIndustryDOM" />
16 <apex:facet name="header">Industry</apex:facet>
17 </apex:column>
18 <apex:inlineEditSupport event="ondblClick"
19 showOnEdit="saveButton,cancelButton" hideOnEdit="editButton" />
20 </apex:pageBlockTable>
21 <apex:pageBlockButtons >
22 <apex:commandButton value="Edit" action="{!save}" id="editButton" />
23 <apex:commandButton value="Save" action="{!save}" id="saveButton" />
24 <apex:commandButton value="Cancel" action="{!cancel}" id="cancelButton" />
25 </apex:pageBlockButtons>
26 </apex:pageBlock>
27 </apex:form>
28</apex:page>インライン編集がサポートされない場合を次に示します。
- 次の場合は、インライン編集できません。
- アクセシビリティモード
- 設定ページ
- ダッシュボード
- カスタマーポータル
- HTML ソリューションの説明
- ケース、リード編集ページにある次の標準チェックボックスは、インライン編集できません。
- ケース割り当て ([有効な割り当てルールによりケースを割り当てる])
- ケースメール通知 ([メールで取引先責任者に通知する])
- リード割り当て ([有効な割り当てルールによりリードを割り当てる])
- 次の標準オブジェクトの項目はインライン編集できません。
- ドキュメントおよび価格表のすべての項目
- [件名] および [コメント] を除く ToDo のすべての項目
- [件名]、[説明]、および [場所] を除く行動のすべての項目
- 個人取引先、取引先責任者、およびリードの氏名項目。ただし、コンポーネント項目は、[姓] や [名] などです。
- 項目レベルセキュリティまたは組織の共有モデルによるインライン編集を使用して、参照のみの権限しか持っていないレコードの項目の値を変更できます。ただし、変更内容を保存することはできません。保存しようとすると、権限が不十分であるため保存できない旨のエラーメッセージが表示されます。
- Visualforce ページが Salesforce ドメインではなく、別のドメインから配信される場合、<apex:outputField> にバインドされる Idea.Body などの標準リッチテキストエリア (RTA) 項目のインライン編集はサポートされません。デフォルトでは、Visualforce ページは、システム管理者がデフォルト設定を無効にしない限り、別のドメインから配信されます。カスタム RTA 項目は、この制限の影響を受けないため、インライン編集がサポートされます。
- インライン編集は、<apex:outputField> を使用する連動選択リストでサポートされます。
- 連動選択リストを使用する場合、ページに制御項目を含める必要があります。ページに制御項目が含まれていない場合、ページを表示するときにランタイムエラーが発生します。
- インライン編集を有効にした項目と同じ連動関係グループの通常の入力項目を混合しないでください。たとえば、制御項目の標準の入力項目とインライン編集を有効にした連動項目は混合しないでください。
1<apex:page standardController="Account"> 2 <apex:form> 3 <!-- Don't mix a standard input field... --> 4 <apex:inputField value="{!account.Controlling__c}"/> 5 <apex:outputField value="{!account.Dependent__c}"> 6 <!-- ...with an inline-edit enabled dependent field --> 7 <apex:inlineEditSupport event="ondblClick" /> 8 </apex:outputField> 9 </apex:form> 10</apex:page> - インライン編集を有効にした連動選択リストと Ajax スタイルの部分ページ更新を組み合わせる場合は、相互に連動または制御関係にあるすべての項目を 1 つのグループとして更新します。項目を個別に更新することはお勧めしません。元に戻す動作またはやり直す動作の一貫性がなくなる場合があります。インライン編集を有効にした連動選択リストがあるフォームを部分更新する方法の推奨例を次に示します。インライン編集を有効にした選択リストのすべてが <apex:outputPanel> コンポーネントでラップされています。<apex:outputPanel> は <apex:commandButton> アクションメソッドが起動すると表示されます。
1<apex:form> 2 <!-- other form elements ... --> 3 4 <apex:outputPanel id="locationPicker"> 5 <apex:outputField value="{!Location.country}"> 6 <apex:inlineEditSupport event="ondblClick" /> 7 </apex:outputField> 8 <apex:outputField value="{!Location.state}"> 9 <apex:inlineEditSupport event="ondblClick" /> 10 </apex:outputField> 11 <apex:outputField value="{!Location.city}"> 12 <apex:inlineEditSupport event="ondblClick" /> 13 </apex:outputField> 14 </apex:outputPanel> 15 <!-- ... --> 16 <apex:commandButton value="Refresh Picklists" reRender="locationPicker" /> 17</apex:form>