テーブル

2024/12/4 2:142025/5/19 18:54

サポート対象環境

機能

• 検索機能：特定のデータを瞬時に検索

• 削除機能：不要なデータを簡単に削除

• ダウンロード機能：データをワンクリックでダウンロード

• ソート機能：特定の列を基準に並び替える

• フィルター機能：特定の条件でデータを絞り込む

• ページネーション機能：テーブルに表示するデータを、「10、50、100、500、1000」という単位で分けることができる

• Click Flow：列にClick Flowを設置する事ができるので、データの作成や更新、削除など様々な設定が可能

活用例

• 在庫管理アプリ

• 学習管理アプリ（成績表・課題管理）

• 勤怠管理アプリなど

サンプルアプリ

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

1. Clickのデータベースでは、テーブルを作成し、アップロードするデータの形式に合わせて項目を設定します。今回は、Clickのデータベースに新たなテーブルを作成し、「在庫」という名を付け、以下の項目を用意してください。

• テキスト：部品番号

• 画像：製品画像

• テキスト：製品名

• テキスト：カテゴリー

• テキスト：規格

• テキスト：保管場所

• 数字：在庫数

• 数字：単価

• テキスト：仕入れ先

2. 以下のcsvをダウンロードしてください。（画像データは入っておりません）

準備したCSVデータのアップロード手順

1. レコードの追加を選択します。

2. データ選択で準備したCSVファイルを指定します。

3. 項目の選択で、CSVデータ内の各列をデータベースの項目に対応付けます。 Importを実行してデータをアップロードします。

エレメントの設定

1. ページの左上〔ホーム〕をクリックします。

2. 開始ページ（未ログイン時）を選択します。

3. 〔ホーム〕を指定して設定します。

1. ページに設置したテーブルエレメントをクリックして選択します。

2. 表示設定>データベースの選択〔在庫〕を指定します。

3. これにより、テーブルエレメントの項目にCurrent変数が自動的に設定されます。

1. 設定したいテーブルエレメントを選択します。

2. 右側のエレメント設定パネルから、各列の幅を調整します。

3. 必要に応じて、列の幅を適宜変更してください。

1. テーブルエレメントを選択します。

2. キャンバスの右側にあるエレメント設定画面を開きます。

3. 検索、ダウンロード、選択の各オプションを適宜オンに設定します。

アクションの設定

1. エレメントメニューから〔列〕を選択します。

2. 〔＋列の追加〕をクリックして、新しい列を追加します。

1. 新規で追加した列を選択します。

2. 列の項目から〔アクション〕を選択します。

1. 〔アクション〕を設定すると、右側のエレメント設定パネルにアクションタブが表示されます。

2. アクションを選択し、Colimn Actions>アクションを追加する＞ページ移動＞新規ページを設定をおこなってください。

3. 〔新規ページ作成〕を選択して、新しいページを作成します。

1. 新規ページは、〔在庫更新〕という名前を付けます。

2. 新規ページを作成したら、次にインプットメニューから〔フォーム〕を選択します。

3. 〔フォーム〕を選択したら、ページにドラッグ&ドロップで設置します。

1. 設置したフォームを選択します。

2. データの選択オプションで〔在庫〕を選択します。

1. フォームでデータの選択を行った後、動作の選択に進みます。

2. データの追加 在庫を選択します。

1. フォームの送信ボタンを選択します。

2. アクションで、ボタンの動作として〔戻る〕を設定します。

3. 設定が完了したら、これで作業が完了です。