page icon

テーブル

Freeプランからご利用いただけます。

機能概要

簡単操作で美しく使いやすい表が完成!
本エレメントは、データ管理や閲覧を効率化するための便利なエレメントです。以下の機能を備えています。エレメントを設置し、データを選択するだけで、スマホでもPCでも見やすい表が完成します。

標準機能

  • 検索機能:特定のデータを瞬時に検索
  • 削除機能:不要なデータを簡単に削除
  • ダウンロード機能:データをワンクリックでダウンロード
  • ソート機能:特定の列を基準に並び替える
  • フィルター機能:特定の条件でデータを絞り込む
  • ページネーション機能:テーブルに表示するデータを、「10、50、100、500、1000」という単位で分けることができる
  • Click Flow:列にClick Flowを設置する事ができるので、データの作成や更新、削除など様々な設定が可能

活用例

  • 在庫管理アプリ
  • 学習管理アプリ(成績表・課題管理)
  • 勤怠管理アプリなど
アイディア次第で様々なアプリにご活用いただけます。
 

設定方法

シンプルな在庫管理アプリを作成しながら、テーブルエレメントの設定方法を説明します。今回はスマートフォンサイズで作成しますが、データベースを共有させてPC用のアプリを作成する事も可能です。

サンプルアプリ

 

目次

データベースの設定とデータのアップロード
エレメントの設定
Click Flowの設定

データベースの設定とデータのアップロード

①Clickのデータベースでは、テーブルを作成し、アップロードするデータの形式に合わせて項目を設定します。
今回は、Clickのデータベースに新たなテーブルを作成し、「在庫」という名を付け、以下の項目を用意してください。
 
②以下のcsvをダウンロードし、Clickのデータベースの①で作成した在庫テーブルにアップロードとしてください。(画像データは入っておりません)
画像データを利用する場合は、URLでアップロードする方法と、データをアップロード後にClick上で画像データを追加する方法があります。適切な方法を選択してください。
今回アップロードするデータ。
今回アップロードするデータ。
準備したCSVデータのアップロード手順
  1. レコードの追加を選択します。
  1. データ選択で準備したCSVファイルを指定します。
  1. 項目の選択で、CSVデータ内の各列をデータベースの項目に対応付けます。 Importを実行してデータをアップロードします。
 
 

エレメントの設定

 
今回はアカウント登録を行わないため、開始ページを「ホーム」に設定します。
設定手順
  1. ページの左上「ホーム」をクリックします。
  1. 開始ページ(未ログイン時)を選択します。
  1. 「ホーム」を指定して設定を保存します
 
ホームにテーブルを配置する
  1. エレメントメニューから「アウトプット」を選択します。
  1. 「テーブル」を選択し、ホームページにドラッグ&ドロップで配置します。
 
 
テーブルエレメントのデータベース設定
  1. ページに設置したテーブルエレメントをクリックして選択します。
  1. データベースの選択で「在庫」を指定します。
  1. これにより、テーブルエレメントの項目にCurrent変数が自動的に設定されます。
 
列の幅の設定
  1. 設定したいテーブルエレメントを選択します。
  1. 右側のエレメント設定パネルから、各列の幅を調整します。
  1. 必要に応じて、列の幅を適宜変更してください。
※項目の列の幅を設定して頂けないと、見えなく
 
 
検索、ダウンロード、選択機能の設定
デフォルトでは、検索、ダウンロード、選択機能はオフになっています。これらの機能を有効にするには、以下の手順で設定を行ってください。
  1. テーブルエレメントを選択します。
  1. キャンバスの右側にあるエレメント設定画面を開きます。
  1. 検索、ダウンロード、選択の各オプションを適宜オンに設定します。
 
 

Click Flowの設定

 
  1. エレメントメニューから「列」を選択します。
  1. 「+列の追加」をクリックして、新しい列を追加します。
 
 
新規列の設定
  1. 新規で追加した列を選択します。
  1. 列の項目から「ClickFlow」を選択します
 
 
ClickFlowの設定
  1. ClickFlow」を設定すると、右側のエレメント設定パネルにClickFlowオプションが表示されます。
  1. ClickFlowを選択し、ページ移動の設定を行います。
  1. 新規ページ作成」を選択して、新しいページを作成します。
 
新規ページ作成後の設定
  1. 新規ページを作成したら、次にインプットメニューから「フォーム」を選択します。
  1. 「フォーム」を選択したら、ページにドラッグ&ドロップで設置します。
 
 
フォームのデータ設定
  1. 設置したフォームを選択します。
  1. データの選択オプションで「在庫」を選択します。
 
 
データの追加設定
  1. フォームでデータの選択を行った後、動作の選択に進みます。
  1. データの追加 在庫を選択します。
 
最終設定: 戻るボタンの設定
  1. フォームの送信ボタンを選択します。
  1. ClickFlowで、ボタンの動作として「戻る」を設定します。
  1. 設定が完了したら、これで作業が完了です。
※注意
データを追加で設定した場合は、必ずキャンバスのエレメントの設定から項目の追加設定をおこなってください。
 
 
最終更新日
2024/12/20