マークアップページの要素（入力）

閲覧者が値を選ぶ要素。<Parameter> はパラメータの値を変え、<Select>・<Switch> は表示の状態だけを変えます（SQL には渡しません）。

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

Parameter

パラメータの入力欄を表示します。

構造

項目	内容
区分	block
親	子に block を取る要素
子	なし（/> で閉じる）
SqlView の子孫	不可

使い方

• 表示する名前と説明は、パラメータの定義のものです

属性

属性	値	内容
param（必須）	ObjectId	パラメータの ID
scope（必須）	NOTEBOOK / PAGE	パラメータのスコープ。ノートブック共通のパラメータは NOTEBOOK、このページ固有のパラメータは PAGE。パラメータの定義のスコープと違うときは、参照切れと同じくエラーになります
variant	default / segmented 既定：default	見た目。segmented は選択肢をボタンで並べます。単一選択のパラメータにだけ書けます。選択肢を SQL や表から取得するパラメータと、モバイル表示では、segmented もドロップダウンになります
autoRun	真偽値	値が確定したときに自動で実行します。確定するのは、選択肢や日付を選んだときと、文字や数値の入力で Enter を押すかフォーカスが外れたときです
hideFrame	真偽値	枠を非表示にします
hideName	真偽値	枠のタイトルを非表示にします

例

<Parameter param="…" scope="NOTEBOOK" variant="segmented" autoRun />

Select

表示の状態の値を 1 つ選びます。選んだ値で表示を変える部分は、<Select> の子ではなく <If> で書きます。

構造

項目	内容
区分	block
親	子に block を取る要素
子	SelectOption+
SqlView の子孫	不可

属性

属性	値	内容
as（必須）	識別子	選んだ選択肢の値（value）を、式で view.<名前> として参照するための名前。同じ名前の要素は、状態を共有します
variant	default / segmented 既定：default	見た目。default はドロップダウン、segmented はボタンの並び。モバイル表示では、segmented もドロップダウンになります
title	文字列 式：文字＋式	選択欄の前に表示するタイトル

例

<Select as="metric" variant="segmented">
  <SelectOption value="sales" title="売上" default />
  <SelectOption value="orders" title="注文数" />
</Select>
<If condition="{{ view.metric == 'orders' }}">
  <Text>注文数を表示中</Text>
</If>
<Else>
  <Text>売上を表示中</Text>
</Else>

SelectOption

<Select> の 1 つの選択肢です。

構造

項目	内容
区分	―
親	Select
子	なし（/> で閉じる）
SqlView の子孫	不可

属性

属性	値	内容
value（必須）	英数字・_・-	この選択肢を選んだときの view.<名前> の値。同じ <Select> の中で重複しない値にします
title（必須）	文字列 式：文字＋式	選択肢のタイトル
default	真偽値	最初に選ばれた状態にします。同じ <Select> の中で 1 つまで書けます。どの選択肢にも書かないときは、最初の選択肢が選ばれます

Switch

表示の状態をオン・オフします。オン・オフで表示を変える部分は、<If> で書きます。

構造

項目	内容
区分	block
親	子に block を取る要素
子	なし（/> で閉じる）
SqlView の子孫	不可

属性

属性	値	内容
as（必須）	識別子	オンかどうか（真偽値）を、式で view.<名前> として参照するための名前。同じ名前の要素は、状態を共有します
title（必須）	文字列 式：文字＋式	スイッチの右に表示するタイトル
default	真偽値	最初からオンにします

例

<Switch as="compare" title="前年と比べる" />
<If condition="{{ view.compare }}">
  <Text size="sm" color="muted">前年比 +4.1%</Text>
</If>