PowerCMSでは簡単にフォームを作成出来ますが、標準テンプレートでは確認画面に修正する(入力画面に戻る)ボタンがありません。これは弊社ブログのPowerCMSのフォーム確認画面に「修正する」ボタンを設置する簡単な方法で紹介している方法で修正画面に戻るボタンを実装可能です。
上記の実装を行った際にPowerCMS 5のフォームでは修正画面に戻ると入力値が保持されていないため、今回は入力値を保持する方法を紹介します。
基本的な仕組み
以下のようにrequest.foo
の値が存在していれば、その値を設定することで入力値の保持を実現します。
<MTSetVarBlock name="request_field_basename">request.<$MTVar name="field_basename"$></MTSetVarBlock>
<MTSetVarBlock name="_value"><MTIf name="$request_field_basename"><$MTVar name="$request_field_basename" escape="html"$><MTElse><$MTVar name="field_default" escape="html"$></MTIf></MTSetVarBlock>
<input type="text" name="<$MTVar name="field_basename"$>" id="<$MTVar name="field_basename"$>" value="<$MTVar name="_value"$>">
上記はフォーム項目の種類が「テキスト」の例ですが、チェックボックス(複数選択)やテキスト(複数フィールド)では少し工夫した実装が必要になります。
チェックボックス(複数選択)
チェックボックス(複数選択)はMTQueryLoop
タグで取得できるのでこのタグを使って実現します。
<MTSetVarBlock name="request_field_basename">,<MTQueryLoop key="$field_basename"><$MTVar name="$field_basename"$>,</MTQueryLoop></MTSetVarBlock>
<MTLoop name="field_loop">
<MTSetVarBlock name="check">,<$MTVar name="option_value"$>,</MTSetVarBlock>
<input type="checkbox" name="<$MTVar name="field_basename"$>" value="<$MTVar name="option_value" escape="html"$>" id="<$MTVar name="field_basename"$><$MTVar name="__counter__"$>" <MTIf name="request" like="$check"> checked="checked"<MTElseIf name="option_default"> checked="checked"</MTIf>>
<label for="<$MTVar name="field_basename"$><$MTVar name="__counter__"$>">
<$MTVar name="option_value" escape="html"$>
</label>
</MTLoop>
テキスト(複数フィールド)
テキスト(複数フィールド)は少し特殊で確認画面にinput
要素を追加してパラメーターを送信する必要があります。入力画面では複数のinput
要素で構成されるテキスト(複数フィールド)ですが、これらのinput
要素はname
属性に同じ値を設定する必要があり確認画面では結合した値が表示されています。
そのため確認画面から修正画面に戻る時に結合していない値を送信するように変更します。
確認画面に追加するテンプレート
<$MTVar name="multi_vals" escape="html"$>
<input type="hidden" name="<$MTVar name="field_basename"$>" value="<$MTVar name="multi_vals" escape="html"$>">
<MTIgnore>連結前の値を送信するために追加</MTIgnore>
<MTLoop name="field_loop">
<input type="hidden" name="<$MTVar name="field_basename"$>_<$MTVar name="__counter__"$>" value="<$MTVar name="field_value" escape="html"$>">
</MTLoop>
入力画面に追加するテンプレート
<MTLoop name="field_loop">
<MTSetVarBlock name="request_field_basename">request.<$MTVar name="field_basename"$>_<$MTVar name="__counter__"$></MTSetVarBlock>
<MTSetVarBlock name="_value"><MTIf name="$request_field_basename"><$MTVar name="$request_field_basename" escape="html"$><MTElse><$MTVar name="field_value" escape="html"$></MTIf></MTSetVarBlock>
<input type="text" name="<$MTVar name="field_basename"$>" id="<$MTVar name="field_basename"$>" value="<$MTVar name="_value"$>">
</MTLoop>
まとめ
このようにフォーム項目の種類によって対応は異なるものの修正画面に値を引き継ぐ事は可能です。
次回は入力画面のデザイン上
- 年齢の入力フィールドに数字のみ入力し「歳」は入力フィールドの横にテキストを配置してある
- 電話番号をテキスト(複数フィールド)で分割し、間にハイフンが配置してある
これらを確認画面でも入力画面と同じ表示(歳を追加したりハイフンで分割した値)にするカスタマイズを紹介します。