インプレース編集

インプレース編集では、一般的にユーザーのクリックに応じて、データを含むエントリフォームが動的に表示されます。ユーザーは、データを入力してフォームを閉じることができます。

例えば、後ろにリンクが付いた名前のリストがユーザーに対して表示されるとします。

リンクをクリックすると、ユーザーがそのエントリを編集できるフォームが開きます。

仕組み

inPlaceForm コントロールには、フォームで使用されるコントロールが含まれます。

inPlaceForm コントロールのコンテンツの表示/非表示を切り替えるには、以下のサーバーサイドのメソッドを呼び出します。

var c = getComponent("inPlaceForm1") // inPlaceForm1 being the ID of the control
c.show()
c.hide()
c.toggle()

このコントロールは自動的に、子コントロールを作成して JSF ツリーに挿入するか、必要に応じてそれらを削除します。このコントロールは繰り返しを使用して配置でき、コントロールが表示されるコンテキストのリストを保守します。有効なコンテキストがなくなると、コントロールが JSF ツリーから削除されます。

show() メソッドと toggle() メソッドには、URL パラメータをエミュレートするためのオプションマップがあります。マップの内容は一時的に requestScope にプッシュされ、要求が処理されると削除されます。

ランタイムコストを最小限に抑えるため、inPlaceForm コントロールのコンテンツは、フォームが使用されるまでロードされません。

フォーム内での `[OK]` ボタンの実装

[OK] ボタンの実装は、show() や hide() の呼び出しほど簡単ではありません。例えば、文書の保存など、サーバーサイドで何らかの処理を実行する必要があります。更新が成功しても、別のページにリダイレクトされないようにしてください。同じページに留まり、ページを部分更新して、編集したデータの新しい値が表示されるようにします。

以下のステップを実行します。

[送信] ボタンではなくシンプルボタンを追加します。
文書を保存した後、フォームコンテンツを非表示にするサーバーサイドのイベントを追加します。これは、[文書の保存] と [スクリプトの実行] という 2 つのシンプルアクションを使用して実行できます。
[文書の保存] が成功すると、[スクリプトの実行] が実行されます。このアクションは、フォームを単に非表示にします。
```
var c = getComponent("inPlaceForm1")
c.hide()
```
onclick イベントで、編集された値の部分更新を実行します。更新 ID には、フォーム全体と編集された値が含まれている必要があります。

このフォームで繰り返しコントロール内の行を編集する場合は、繰り返しコントロール全体を更新します。

現在のコンテキストへのアクセス

inPlaceForm コントロールとその子コントロールは、現在のページコンテキストにアクセスすることができます。例えば、繰り返しの中にある inPlaceForm コントロールは、現在の繰り返しコンテキストにアクセスすることができます。以下の例は、文書を開き、現在の Note ID の文書データソースを使用するフォームを示しています。

<xe:inPlaceForm id="inPlaceForm1">
  <xp:panel>
    <xp:this.data>
      <xp:dominoDocument
        var="document1" formName="Contact" action="editDocument" 
          documentId="#{ javascript:row.getNoteID() }"
          ignoreRequestParams="true" >
      </xp:dominoDocument>
    </xp:this.data>

データソースで計算結果プロパティを使用するよう強制し、データソースが実際の要求パラメータを使用しないようにするには、ignoreRequestParams="true" を指定します。

インプレース編集

仕組み

フォーム内での [OK] ボタンの実装

現在のコンテキストへのアクセス

フォーム内での `[OK]` ボタンの実装