見出し画像

PowerCMS X のフォームのビューを解析する

フォームのビューはとても難解です。
ビューの先頭に以下のコードを入れると、現在の画面のヒントになると思います。

<mt:unless name="request.__mode" eq="submit"><mt:unless name="error"><mt:unless name="confirm_ok">入力画面</mt:unless></mt:unless></mt:unless>
<mt:if name="confirm_ok">確認画面</mt:if>
<mt:unless name="request.__mode" eq="submit"><mt:if name="error">エラー画面</mt:if></mt:unless>
<mt:if name="request.__mode" eq="submit"><mt:if name="error">不正なリクエスト画面<mt:else>完了画面</mt:if></mt:if>

フォームの画面は以下の5つですが、分岐が多いので解析に時間がかかりました。

  • 入力画面

    • <mt:unless name="request.__mode" eq="submit"><mt:unless name="error"><mt:unless name="confirm_ok">入力画面</mt:unless></mt:unless></mt:unless>

  • 確認画面

    • <mt:if name="confirm_ok">確認画面</mt:if>

  • エラー画面

    • <mt:unless name="request.__mode" eq="submit"><mt:if name="error">エラー画面</mt:if></mt:unless>

  • エラー画面(不正なリクエスト)、完了画面

    • <mt:if name="request.__mode" eq="submit"><mt:if name="error">不正なリクエスト画面<mt:else>完了画面</mt:if></mt:if>

「不正なリクエスト画面」は確認画面でブラウザの開発者ツールで改ざん(必須項目の値を削除する等)をして送信をすると表示される画面です。

参考まで簡素なビューを記載します。解析用にご利用くださいませ。そのままコピペで動くと思います。

<MTIgnore>____________________________________________________

不正なリクエスト画面。確認画面から完了画面に遷移する時のエラー。
確認画面で開発者ツールにより改ざんして送信した時に表示される。
例えば必須項目の値を削除する等。
____________________________________________________</MTIgnore>
<mt:if name="request.__mode" eq="submit">
  <mt:if name="error">
  <p>不正なリクエスト画面</p>
    <mt:loop name="errors">
      <p><mt:var name="__value__"></p>
    </mt:loop>
  <mt:else>
  
<MTIgnore>____________________________________________________

完了画面
____________________________________________________</MTIgnore>
  <p>ありがとうございました</p>

  </mt:if>
<mt:else>

<MTIgnore>____________________________________________________

エラー画面。入力画面から確認画面に遷移する時のエラー。
____________________________________________________</MTIgnore>
  <mt:if name="error">
    <p>エラーメッセージ</p>
    <mt:loop name="errors">
      <p><mt:var name="__value__"></p>
    </mt:loop>
  <mt:else>

<MTIgnore>____________________________________________________

確認画面
____________________________________________________</MTIgnore>
    <mt:if name="confirm_ok">
      <p>送信ボタンをクリックしてください</p>
    <mt:else>

<MTIgnore>____________________________________________________

入力画面
____________________________________________________</MTIgnore>
      <p>確認ボタンをクリックしてください</p>
    </mt:if>
  </mt:if>

<MTIgnore>____________________________________________________

フォーム 固定値
____________________________________________________</MTIgnore>
  <form action="<mt:formpermalink>" method="POST" enctype="multipart/form-data">
  <input type="hidden" name="form_id" value="<mt:formid>">
  <input type="hidden" name="__mode" value="<mt:if name="confirm_ok">submit<mt:else>confirm</mt:if>">
  <input type="hidden" name="_type" value="form">
  <input type="hidden" name="_language" value="<mt:var name="language">">
  <input type="hidden" name="_identifier" value="<mt:if name="request._identifier"><mt:var name="request._identifier" escape><mt:else><mt:var name="form_identifier"></mt:if>">
  <input type="hidden" name="object_id" value="<mt:if name="request.object_id"><mt:var name="request.object_id" escape><mt:else><mt:var name="current_object_id"></mt:if>">
  <input type="hidden" name="model" value="<mt:if name="request.model"><mt:var name="request.model" escape><mt:else><mt:var name="current_archive_model"></mt:if>">  
  <input type="hidden" name="magic_token" value="<mt:var name="magic_token" escape>">

<MTIgnore>____________________________________________________

設問の表示(設問データ内に登録したビューが表示されます)
____________________________________________________</MTIgnore>
      <mt:formquestions>
        <mt:objectcontext model="question" prefix="question">
          <mt:questiontemplate eval="1">
        </mt:objectcontext>

<MTIgnore>____________________________________________________

ボタンの表示
____________________________________________________</MTIgnore>
   <mt:if name="__last__">
      <mt:if name="confirm_ok">
          <p>
            <button id="form-back-button" type="submit">入力画面に戻る</button>
          <script>
            document.querySelector('#form-back-button' ).addEventListener('click', function (e) {
              this.form.querySelector('input[name="__mode"]').value = 'edit';
            });
          </script>
          </p>
      </mt:if>
          <p>
            <button type="submit"><mt:if name="confirm_ok">送信する<mt:else>確認する</mt:if></button>
          </p>
      </mt:if>

      </mt:formquestions>
  </form>
</mt:if>

PowerCMS X の標準テンプレートは bootstrap で table を利用する前提なので、それを変更するのは結構大変ですね。
次は設問のビューを解析してみます。

いいなと思ったら応援しよう!