一覧表・単票 SPIRAL ver.1 サポートサイト

一覧表・単票

最終更新日:2022年03月31日

概要
1．一覧表の作成
2．一覧表の設定
3．検索フォームの設定
4．単票の設定
5．参考情報
6．注意事項

概要

「一覧表・単票」では、一覧表の新規作成や編集、また一覧表に紐づく検索フォームおよび単票の設定を行うことができます。

「一覧表」とは、DBに登録されたデータを一覧形式でWebページに表示する機能です。
また「単票」とは、一覧表で表示されるデータの1件を選択し、そのデータの詳細情報をWebページに表示する機能です。

右図のように、DBに登録された情報（社員情報）を、一覧としてWebページに表示（社員一覧）し、レコードをクリックして表示される単票にてデータの詳細を表示（社員情報詳細）して確認できるようなアプリケーションを設定することができます。

一覧表からデータをダウンロードしたい

一覧表ダウンロード機能について、ラベル値かIDどちらか選択できますか？

1．一覧表の作成

一覧表を新規作成するためには、操作画面上「Web」＞「一覧表・単票」を選択します。

「一覧表作成」ボタンをクリックします。

一覧表を作成したいDBを選択し、「新規作成」ボタンをクリックします。

「初期設定を編集モードで作成する」について
こちらにチェックを入れて作成した場合、編集モードの一覧表が作成されます。
編集モードの一覧表とは、DBに登録されたデータをWebページに一覧表示するだけでなく、データの更新や削除ができるタイプの一覧表です。
このモード設定（閲覧モード/編集モード）は一覧表作成後にも切替設定が可能です。
詳しくは本ページの「5．参考情報（1）閲覧/編集モード切替」をご参照ください。

一覧表が新規作成されました。
一覧表を作成すると、それに紐づいて検索フォーム、単票も作成されます。

「ページ表示」ボタンをクリックすると、作成された一覧表を確認することができます。

※ 個人情報閲覧不可IDをお使いの場合は、ページ表示をご利用いただけません。

2．一覧表の設定

一覧表の設定は「設定」ボタンより行うことができます。

以下3つのタブにてそれぞれ設定を行います。

（1）一覧表

「一覧表」タブでは、一覧表のデザインを設定することできます。
「設定デザイン（表形式、または数値）」もしくは「ソースデザイン」のいずれかで設定します。

設定デザイン（表形式）

一覧表の見た目そのままに操作して編集することができます。
列・行に対する色や大きさ、文字挿入などを1セルごとに細かく設定したい場合や、簡易的に設定したい場合に使用します。

一覧表設定画面のデータ行に表示される値はサンプルです。また、初期設定時に表示される列はDBの最初の5列です。

※ データ行の設定上限数は「100行」です。
※ ノーマル行とソート行の設定上限数は合わせて「100行」です。

設定デザイン（数値）

各デザインの設定を数値で指定して編集することができます。
複数の列・行を一括で追加したり、デザインをまとめて指定したりなど、複数範囲に対する編集を行い場合に使用します。

「列設定」「行設定」ではそれぞれ複数の列、行を一括で追加、削除したり、幅や高さの指定を数値で指定することができます。

「デザイン設定」では複数の列・行に対してセル単位でデザインを施すことができます。
「テキスト・パーツ設定」では、特定のセルに対して文字や差替えキーワードを挿入することができます。

また、各タブにある「プレビュー」ボタンをクリックすると、設定中の一覧表のイメージが確認できると同時に、
カーソルを当てることでセル番号を確認することができます。

ソースデザイン

一覧表のXML、XSLソースを編集することができます。
表示するデータによって列・行のデザインを変えて表示する等、ソースを編集することによって柔軟にデザインを設定したい場合に使用します。
XML/XSLについて詳しくはこちらをご参照ください。

（2）セキュリティ

「セキュリティ」タブでは、一覧表におけるセキュリティ関連の設定をすることができます。
一覧表はDB内のデータをWebページに表示しますので、個人情報や非公開情報などがある場合はこの「セキュリティ」設定画面にて
一覧表にアクセスできる人や環境を適切に設定して使用していただくことをお勧めいたします。

各設定について詳細はこちらをご参照ください。

（3）基本情報

「基本情報」タブでは、一覧表の設定についてタイトル、およびコメントを設定することができます。

（4）ページ編集

一覧表メニューのトップページにある「ページ編集」ボタンをクリックすると、一覧表ページのHTMLソースを編集することができます。

↓

ここでは、一覧表が設置されるページにおける、一覧表”以外”の部分の編集を行います。
一覧表は、一覧表用の差替えキーワードをHTMLソース内に挿入することで表示できるようになります。
「検索フォームのキーワード表示」ボタンをクリックし、以下いずれかの設置したい検索フォームをクリックすることで
HTMLソースに差替えキーワードを挿入することができます。

検索フォーム（差替えキーワード「%sf:usr:searchXX%」）
検索フォーム付の一覧表を表示するためのキーワードです。

検索フォーム（一覧表のみ）（差替えキーワード「%sf:usr:searchXX:table%」）
検索フォームの無い、一覧表のみを表示するためのキーワードです。

3．検索フォームの設定

検索フォームとは、一覧表に表示されたデータを任意の条件を指定して絞り込み閲覧することができる検索機能です。
一覧表の上部に表示されます。

（一覧表ページイメ―ジ）

検索フォームの設定は、一覧表を選択すると画面下に表示される「検索フォーム」の「設定」ボタンより可能です。

（1）基本情報

検索フォームの設定についてタイトル、キーワード、コメントを設定することができます。

※「キーワード」に設定した文字列は、検索フォームの差替えキーワード（例： %sf:usr:searchXX% ）と関連します。
キーワードを変更した場合は、検索フォームの差替えキーワードも同様に変わりますのでご注意ください。

（2）DBの抽出ルール設定

一覧表に表示するデータを、特定の条件で抽出した上で表示したい場合に設定します。
ここで選択した抽出ルールに合致しないデータは一覧表上には表示されないようになります。

（3）検索フォーム

検索フォームで使用するフィールドや表示形式の設定を行うことができます。
「設定デザイン」もしくは「ソースデザイン」のいずれかで設定します。

設定デザイン

検索フォームのの見た目そのままに操作して編集することができます。
検索フォームに表示するフィールドの追加や削除、また各フィールドにおける詳細設定やデザインの設定などを感覚的に行うことができます。

各フィールドの「編集」ではフィールド名や注意事項の編集、「スタイル変更」ではデザインの設定を行うことができます。

ソースデザイン

検索フォームののXML、XSLソースを編集することができます。
ソースを編集することによって基本フォーマットとは異なった柔軟なデザインを設定したい場合に使用します。
XML/XSLについて詳しくはこちらをご参照ください。

（参考）検索フォームの種類
フィールドタイプによって検索フォームの種類が異なります。

（検索フォーム例）

・テキスト検索
メールアドレスやテキスト等をテキストで検索します。
・範囲指定検索
整数や実数、日付等の範囲を指定して検索します。
・セレクト検索
セレクト等のラベルを指定して検索します。
・複数フィールドの検索
指定された複数のフィールドに対して検索します。
「フィールドの追加」ボタンをクリックすると、「複数フィールドの検索」が選択できます。
追加後、「編集」をクリックすると検索対象に含めるフィールドを指定することができます。

関連FAQ
一覧表・単票管理の検索フォームにて使用できるフィールドを知りたい

4．単票の設定

単票とは、一覧表に表示されたデータの1件を選択し、そのデータの詳細情報をWebページに表示する機能です。

（単票イメ―ジ）

単票の設定は、一覧表を選択すると画面下に表示される「単票」の「設定」ボタンより可能です。

（1）基本情報

単票のページ名、タイトルを設定することができます。

（2）単票のソース編集

単票のページについてHTMLソースを編集することができます。

単票に表示するレコードの各フィールドの値は「差替えキーワード表示」ボタンをクリックし、
各差替えキーワードをHTMLソースに挿入することで表示することができます。

また、アクセス権限を「マイエリア」にしている一覧表の場合、マイエリアを作成しているDBのフィールド情報を表示したり、
マイエリア内に設置しているカスタムマイページのURLをリンク先にしたりすることもできます。
「マイエリア差替えキーワード表示」ボタンをクリックし、各キーワードをHTMLソースに挿入することで表示できます。

また、一覧表を設定しているDBをマスタとしたDB連携を行っている場合、連携している参照先DBに設定した一覧表を
単票内に表示することができます。「参照元DBで作成された検索フォームの差替えキーワード」ボタンをクリックし、
設置したい一覧表の差替えキーワードをHTMLソースに挿入することで表示できます。

5．参考情報

（1）閲覧/編集モード切替

一覧表には、データの閲覧のみが可能な「閲覧モード」と、ページ上でデータの編集（更新/削除）が可能な「編集モード」の
2つのモードがあります。

このモード設定は一覧表の「設定」ボタン＞「一覧表」タブにて切替の設定が可能です。

「設定デザイン（表形式）」の場合

フィールドごとにモードの設定を行います。フィールドが表示されているプルダウンを開くと、モード設定の項目が表示されます。

「設定デザイン（数値）」の場合

フィールドごと、あるいは一括でモードの設定を行います。「列設定」タブの「モード」にて設定することができます。

「ソースデザイン」の場合

XSL設定にて、閲覧モード/編集モードそれぞれのデフォルトデザインのXSLファイルをダウンロードすることができます。
こちらをもとに編集することで設定が可能です。

※ 編集モードにする際の注意
編集モードにする場合は、データの更新や削除を行うために必要なチェックボックスや、ボタン、エラーメッセージなどを
一覧表上に設定しておく必要があります。これらはそれぞれ以下の差替えキーワードを一覧表内に設定することで機能します。
編集モードにする際は設定するようにしてください。

各差替えキーワードは「＄」マークをクリックすると表示されます。

コンテンツ	差替えキーワード
更新ボタン	$table:update_button$
削除ボタン	$table:delete_button$
リセットボタン	$table:reset_button$
全チェックのチェックボックス	$table:all_check$ （設置した列はデータフィールド「更新・削除用チェックボックス」を選択してください）
エラーメッセージ	$table:action_err$

以下は一覧表の新規作成時に、「初期設定を編集モードで作成する」として作成した場合の設定画面及びプレビューです。

（2）ダウンロード機能

一覧表に表示されるデータをWebページ上からダウンロードすることができる「ダウンロード」ボタンを設置することができます。

（ダウンロードボタン設置イメージ）

※ zip形式ファイルにてダウンロードされます。
※ ファイル形式はダウンロード時に「txt（タブ区切りファイル）」「tsv（タブ区切りファイル）」「txt（カンマ区切りファイル）」
「csv（カンマ区切りファイル）」より選択可能です。

一覧表の「設定」ボタン＞「一覧表」タブにて、ダウンロード用の差替えキーワードを設定することで
ダウンロードボタンを設置することができます。差替えキーワードは「＄」マークをクリックすると表示されます。

（「設定デザイン（表形式）」の場合）

コンテンツ	差替えキーワード
ダウンロードボタン	$table:download$
ダウンロードボタン(改行文字列付)	$table:download:wrap$

また、差替えキーワード「レコードのダウンロードボタン」の横にある「設定」ボタンをクリックすると
出力形式やダウンロードする項目について設定を行うことができます。

出力形式：形式選択可
一覧表からダウンロードする際、出力形式を選択できます。
また、その際デフォルトで表示される出力形式を設定できます。

出力形式：形式固定
一覧表からダウンロードする際の出力形式を固定化します。

対象フィールド：一覧表表示項目をダウンロード
一覧表に表示されている項目のみダウンロードできるようになります。

対象フィールド：ダウンロード項目をカスタマイズ
設定した任意の項目のみダウンロードできるようになります。

※ パスワード型、簡易パスワード型、メッセージダイジェスト型、画像型、ファイル型のフィールドはダウンロード対象に含めることはできません。

6．注意事項

携帯端末対応について

一覧表・単票機能は携帯端末で機能いたしますが、一部端末で正しく表示できない場合があります。
表示できない場合は、以下の方法をお試しいただくと表示できることがあります。

（１）一覧表のソースに含まれる<col>タグを外す
一覧表のHTMLは差替えキーワードで表示するため、ユーザーがソースを編集することはできません。
<col>タグを含まない一覧表を利用する場合は、一覧表の差替えキーワードの末尾を「:nocol%」にして設定してください。

なお、<col>タグは一覧表の列幅を指定するタグです。
<col>タグのない一覧表をご利用になる場合は、設定した列幅が適用されませんので、あらかじめご了承ください。

（２）<table>タグの入れ子状態を解消する
<table>タグの中に、<table>タグが入っていると、一覧表・単票を携帯端末で表示できないことがあります。
ページ上で表示する一覧表には２つの<table>タグが含まれています。一覧表を構成する<table>タグとページャーを構成する<table>タグです。一覧表ページにも<table>タグが含まれており、その中に、一覧表の差替えキーワードを挿入すると、<table>タグが入れ子状態になります。
<table>タグの入れ子状態を解消するには、差替えキーワードの外側にある<table>タグを削除し、一覧表設定でページャーの差替えキーワードを削除します。