マークアップページの要素（制御）

子の出し分けと繰り返し。自分の枠を持たず、子は親の直下に書いたものとして配置・検査されます。

すべての要素に共通するルール（構造の表記、配置の属性、デザイントークン）は、要素一覧を参照してください。

If

条件が真のときだけ、子を表示します。非表示の中身もクエリは実行され、閲覧者に送信されます。データを見せない目的には使えません。

構造

項目	内容
区分	control
親	子に block か control を取る要素
子	親と同じ
SqlView の子孫	可

属性

属性	値	内容
condition（必須）	式（真偽値）	子を表示する条件

例

<SqlView id="…" page="…" sql="…" hideFrame>
  <If condition="{{ size(rows) == 0 }}">
    <Text color="muted">データがない</Text>
  </If>
  <ElseIf condition="{{ row.mom < 0 }}">
    <Text color="danger">前月より減少</Text>
  </ElseIf>
  <Else>
    <Text color="success">前月より増加</Text>
  </Else>
</SqlView>

ElseIf

直前までの条件がすべて偽で、この条件が真のときに子を表示します。<If> か <ElseIf> の直後に書きます。

構造

項目	内容
区分	control
親	子に block か control を取る要素
子	親と同じ
SqlView の子孫	可

属性

属性	値	内容
condition（必須）	式（真偽値）	子を表示する条件

Else

直前までの条件がすべて偽のときに、子を表示します。<If> か <ElseIf> の直後に書きます。<For> の直後に書くと、1 回も繰り返さなかったとき（0 行のときと、where に一致する行がないとき）に表示します。

構造

項目	内容
区分	control
親	子に block か control を取る要素
子	親と同じ
SqlView の子孫	可

属性

属性はありません。

For

<SqlView> の結果の行ごとに、子を繰り返します。

構造

項目	内容
区分	control
親	子に block か control を取る要素
子	親と同じ
SqlView の子孫	子孫のみ

使い方

• 並び順は、SQL の ORDER BY で決めます。orderBy は、最新の 1 行を選ぶときや、view.<名前> で閲覧者が並び順を切り替えるときに使います
• <For> の中に <For> は書けません

属性

属性	値	内容
as（必須）	識別子	行を参照する変数の名前
where	式（真偽値）	繰り返す行を選ぶ条件。受け取った行（1,000 行まで）から選びます。データを減らすときは、SQL で絞り込みます
orderBy	式（数値・文字列）	並べ替えのキー。where で選んだ行を並べ替えます。index と limit は、並べ替えた後の順で数えます。同じ値の行は SQL の結果の順を保ち、NULL と実行時エラーは最後になります。未指定時は、SQL の結果の順です
desc	真偽値 式：単一式	orderBy を降順にします
index	識別子	何回目の繰り返しか（1 から）を表す変数の名前
limit	整数（1 以上）	繰り返す回数の上限

例

<Select as="tier" variant="segmented">
  <SelectOption value="gold" title="ゴールド" default />
  <SelectOption value="silver" title="シルバー" />
</Select>
<SqlView id="…" page="…" sql="…">
  <Columns>
    <For as="r" where="{{ r.tier == view.tier }}" limit="3">
      <Card title="{{ r.name }}">
        <Text size="xl" weight="bold">{{ r.amount }}</Text>
      </Card>
    </For>
    <Else>
      <Text color="muted">該当する顧客はいません</Text>
    </Else>
  </Columns>
</SqlView>

<Select as="sort" variant="segmented">
  <SelectOption value="amount" title="売上順" default />
  <SelectOption value="mom" title="伸び率順" />
</Select>
<SqlView id="…" page="…" sql="…">
  <Columns>
    <For as="r" index="i" orderBy="{{ view.sort == 'mom' ? r.mom : r.amount }}" desc limit="3">
      <Card title="{{ i }}位 {{ r.name }}">
        <Text size="xl" weight="bold">{{ r.amount }}</Text>
      </Card>
    </For>
  </Columns>
</SqlView>