A-Formのデザイン：条件分岐に便利な変数【A-Form Advent Calendar 2019/12/5】

この記事は A-Form Advent Calendar 2019 参加記事です。

こんにちは。デザイナーの小森です。

A-Formドキュメントに記載があるものの、あまり注目されていない機能について紹介したいと思います。

A-Formの確認画面や完了画面でも、デザインを出しわけたいときがありますよね。
いくつか方法がありますが、MTタグによる条件分岐を使用する方法についてご紹介します。

ドキュメント：【A-Form】確認画面やエラー画面で使える変数はありますか？

にあるように、A-Formテンプレートで使用できる変数がいくつかあります。
このうち、IDを取得することができる変数にご注目ください。

idフォームID
blog_idブログID
entry_idエントリーID（ウェブページの場合はページID）

これをMTタグの条件分岐でうまく使うと、

出しわけができるようになります。

たとえば、

フォームごとなら


<mt:if name="id" eq="1">   
ここにフォームID=1の時のマークアップを書く。
<mt:else>
ここにブログID=1以外の時のマークアップを書く。  
</mt:if>

ブログごとなら


<mt:if name="blog_id" eq="1">   
ここにブログID=1の時のマークアップを書く。
<mt:else>
ここにブログID=1以外の時のマークアップを書く。  
</mt:if>

といったかたちです。

応用編

応用編として、「エントリーID」をうまく使うと、
記事やウェブページで入力した「記事タイトル」や「カスタムフィールドの値」を確認画面に出す、なんてことができるようになります。

たとえば、

という場合。

下記のように mt:PagesタグのidモディファイアにエントリーIDをセットすることで、入力画面を設定したウェブページの情報を取得することができます。


<mt:Pages id="$entry_id">
<mt:SetVarBlock name="page_title"><mt:PageTitle></mt:SetVarBlock>
<mt:SetVarBlock name="page_kv"><mt:If tag="pageKeyImage"><mt:pageKeyImageAsset><mt:AssetURL setvar="page_kv"></mt:pageKeyImageAsset></mt:If></mt:SetVarBlock>
</mt:Pages>

<header id="header" role="banner">
  <div id="header-inner">
    <div class="site-name"><a href="/">Test-Company</a></div>
      <div id="header-content" style="background-image:url(<$mt:Var name="page_kv"$>);">
        <h1><$mt:Var name="page_title"$></h1>
    </div>
  </div>
</header>

こんな感じの確認画面が実現できます。

どうぞお試しください！

（※MT7のコンテンツデータのID取得は現バージョンでは未対応です）