フォームアプリケーション作成
UIからデータ保存・参照を可能とするフォームアプリケーションを作成します。
ウィザードのステップ完了後、アプリケーションを構成するUI定義およびデータ保存テーブルを作成します。
Tips
事前準備
最初にフォームUIを作成します。任意のコンポーネントを配置できます。ただし、データ登録できるのはファイルコンポーネントを除く入力カテゴリのコンポーネントのみになります。
ウィザード開始
- キャンバスを選択して、右クリックからコンテキストメニューを開きます。
- コンテキストメニューから
[フォームアプリ] - [ウィザード開始]を選択します。 - ウィザードダイアログが表示するので、指示に従って進めてください。
ステップ説明
ウィザードは4ステップで構成されます。各ステップの内容を説明します。
ステップ1. コンポーネント選択
フォームを構成するコンポーネントのうち、テーブルにデータを保存するコンポーネントを選択します。ここで選択したコンポーネントの内容に応じて、テーブル構成およびコンポーネントのアクション記述内容が決まります。
Tips
ステップ2. データ一覧カラム選択
フォームを構成するコンポーネントのうち、データ一覧に表示するカラムを選択します。
Tips
ステップ3. データベース選択
フォーム入力内容をレコードとして保存する保存先のデータベース選択とテーブル名を入力します。 選択したデータベースに対して、指定したテーブル名のテーブルを作成します。
また、既存テーブル、対象外のカラム、主キーについての対応を選択します。
| 項目 | 選択肢 | 備考 | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|
| データベース | 選択中実行環境のデータベース | |||||||||
| テーブル名 | 選択したデータベースに含まれるテーブルの選択 | 新規テーブルを作成する場合は、テーブル名項目に新規テーブル名を記入し、「Add "テーブル名"」と表示された選択肢をクリックしてください。 | ||||||||
| 既存テーブル | ・削除して作成する ・更新する | ・「削除して作成する」を選択した場合、 既存のテーブルを削除し、新しいテーブルを作成するため、テーブルをバックアップしておくことを推奨します。 ・「更新する」を選択した場合、既存のテーブルに対して、追加/更新されたカラムについて更新します。 | ||||||||
| 対象外のカラム | ・そのまま残す ・削除する | ・「そのまま残す」を選択した場合、Step1のコンポーネントの選択に含まれていないテーブルカラムは残ります。 ・「削除する」を選択した場合、Step1のコンポーネントの選択に含まれていないテーブルカラムは削除されます。 | ||||||||
| 主キーカラム | - 自動作成（ID） - 選択 | 「自動作成（ID）」を選択した場合、下記のカラムを主キーとして作成します。
「選択」を選択した場合、「主キーコンポーネント」項目で主キーにする部品を選択します。 | ||||||||
| 主キーコンポーネント | Step1で選択済み、かつ主キー設定可能コンポーネントIDのリスト | 選択した部品のカラムを主キーとしてテーブルを作成します。 主キー設定可能コンポーネントは下記です。 - テキスト入力 - 数値入力 - 高精度数値 - セレクトボックス - コンボボックス |
Tips
ステップ4. オプション選択
作成されるSQL文でデータベース名を直接指定するかどうかの設定をします。
また、アクション定義への対応を選択します。
| 項目 | 選択肢 | 備考 |
|---|---|---|
| 生成するSQL関数にDB名を付与する | ・ON ・OFF | ・ONの場合、生成されるSQLではオブジェクトにデータベース名を指定します。 ・OFFの場合、既存データベースを利用することを想定し、生成されるSQLではオブジェクトにデータベース名を指定しません。 |
| アクション | ・既存コードを上書きする ・既存コードをコメントアウトして追加する | ・「既存コードを上書きする」を選択した場合、アクション記述はすべて上書きされます。 ・「既存コードをコメントアウトして追加する」を選択した場合、既存コードのブロックは以下のようにコメントアウトされ、コメントアウトした既存コードのブロックの上に新しいコードが追加されます。 [アクションコードのイメージ] new code1 new code2 new code3 // old code1 // old code2 // old code3 |
Tips
出力結果
UIエディタ
すべてのステップを経て完了した後、以下のコンポーネントおよびUIが出力されます。
| UI | コンポーネントまたはUI | ID | ラベル | 表示または動作 |
|---|---|---|---|---|
| ユーザ作成フォームUI | タイポグラフィー | display_id | 主キーのデータを表示する。 | |
| ボタン | save_generated | SAVE | フォーム内容をテーブルに登録する。 | |
| ボタン | update_generated | UPDATE | フォーム内容をテーブルに更新する。 | |
| ボタン | delete_generated | DELETE | フォーム内容をテーブルから削除する。 | |
| ボタン | back_generated | BACK | データ一覧を参照するUIを表示する。 | |
| List_{フォームUIのID} | UI | List_{フォームUIのID} | List_{フォームUIのID} | データ一覧を表示する。 |
| ボタン | new_record | NEW RECORD | 新規データを登録するUIに遷移する。 | |
| データグリッド | data_list | データ一覧をデータグリッドで表示する。 | ||
| データグリッド カラム | SELECT_ITEM | ボタンを押下すると、編集UIに遷移する。 | ||
| データグリッド カラム | ID | ID | ステップ3で[主キーカラム：自動作成(ID)] を選択した場合、作成されます。。 | |
| データグリッド カラム | {フォームUIのコンポーネントID} | {フォームUIのコンポーネントラベル} | ステップ2で選択した表示するカラムが作成されます。 |
Tips
| コンポーネント | データグリッドカラムタイプ |
|---|---|
| テキスト入力 | テキスト入力 |
| テキストエリア | テキスト入力 |
| 数値入力 | テキスト入力 |
| 高精度数値 | テキスト入力 |
| 検索フィールド | テキスト入力 |
| パスワード | テキスト入力 |
| セレクトボックス | 複数選択入力 |
| コンボボックス | コンボボックス |
| ラジオボタン | チェックボックス |
| ラジオボタングループ | テキスト入力 |
| チェックボックス | チェックボックス |
| チェックボックスグループ | テキスト入力 |
| スイッチ | チェックボックス |
| レーティング | テキスト入力 |
| スライダー | テキスト入力 |
| スプレッドシート | テキスト入力 |
| 日付ピッカー | 日付ピッカー |
| 時刻ピッカー | テキスト入力 |
| 日時ピッカー | テキスト入力 |
| データグリッド | テキスト入力 |
テーブル
すべてのステップを経て完了した後、選択したコンポーネントに応じて、テーブルを作成します。 カラム名は、コンポーネントのIDがそのままカラム名になります。 カラムのデータ型やサイズは、コンポーネントによって下表の通りになります。
| コンポーネント | データ型 | M | D |
|---|---|---|---|
| テキスト入力 | VARCHAR | 100 | |
| テキストエリア | VARCHAR | 1000 | |
| 数値入力 | DECIMAL | 10 | 3 |
| 高精度数値 | BIGINT | ||
| 検索フィールド | VARCHAR | 100 | |
| パスワード | VARCHAR | 100 | |
| セレクトボックス | VARCHAR | 100 | |
| コンボボックス | VARCHAR | 100 | |
| ラジオボタン | TINYINT | ||
| ラジオボタングループ | VARCHAR | 100 | |
| チェックボックス | TINYINT | ||
| チェックボックスグループ | VARCHAR | 100 | |
| スイッチ | TINYINT | ||
| レーティング | INT | ||
| スライダー | INT | ||
| スプレッドシート | LONGTEXT | ||
| 日付ピッカー | VARCHAR | 100 | |
| 時刻ピッカー | VARCHAR | 100 | |
| 日時ピッカー | VARCHAR | 100 | |
| データグリッド | TEXT |
前回内容でフォームアプリケーション作成
フォームアプリケーション作成を行った後、前回作成時のウィザードの設定内容を引き継いだ状態で再作成することができます。
- キャンバスを選択して、右クリックからコンテキストメニューを開きます。
- コンテキストメニューから
[フォームアプリ] - [前回内容で実行]を選択します。
Tips
前回の設定をクリア
フォームアプリケーション作成を行った際のウィザードの設定内容をクリアすることができます。
- キャンバスを選択して、右クリックからコンテキストメニューを開きます。
- コンテキストメニューから
[フォームアプリ]-[履歴クリア]を選択します。