> ## Documentation Index
> Fetch the complete documentation index at: https://help.dingtalk.io/llms.txt
> Use this file to discover all available pages before exploring further.
# フォームの概要
> YiDAのフォームデザイナーの使い方を解説。上部操作バー、左側ツールバー、中央キャンバス、右側の属性設定パネルの構成と、フォーム設定・データソース・ショートカットキーなど各機能を紹介します。
## 1. 適用シーン
情報の収集や製品の記録が必要なシーンに適しています。
## 2. フォームデザイナーの概要
YiDA の設定ページ全体を総称して「デザイナーページ」と呼びます。
ページ全体は「上部操作バー」「左側ツールバー」「中央キャンバス」「右側属性設定パネル」の 4 つの部分で構成されています。以下をご覧ください：
### 2.1 上部操作バー
#### 2.1.1 フォーム設定
フォーム設定では、フォームレイアウト、送信時検証、各種フォームルールを設定できます。
**注意：プロセス用のフォームデザイナーは若干異なり、フォーム検証はプロセス内で設定する必要があります。**
* 高度なプロセスの検証設定については、[ノード送信ルール](/ja/yida/process/meiv3y)をご覧ください。
* 標準プロセスの検証設定については、[ノード送信ルール](/ja/yida/process/emt041)をご覧ください。
* フォームの列設定については、[フォームレイアウト](/ja/yida/form/ex2ohg)をご覧ください。
* フォーム検証の設定については、[フォーム検証](/ja/yida/form/un1t9v)をご覧ください。
* フォームイベントの設定については、[フォームビジネスルール](/ja/yida/form/dssg6y)をご覧ください。
#### 2.1.2 ページ設定
ページ設定では、フォームページのレイアウトをカスタマイズし、ページのライフサイクルイベントに対するイベントコールバックを設定できます。
* ページレイアウトについては、[フォームレイアウト](/ja/yida/form/ex2ohg)をご覧ください。
* ライフサイクルコールバック
#### 2.1.3 ショートカットキー
YiDA デザイナーには対応するショートカットキーも用意されており、設定をすばやく完了できます。以下をご覧ください。
#### 2.1.4 グローバル検索
フォームコンポーネントが多い場合は、グローバル検索を使用して、必要なコンポーネントをすばやく特定できます。
#### 2.1.5 履歴
YiDA デザイナーには履歴機能が用意されています。保存するたびに記録が自動的に保存され、最大 50 件まで保持されます。直近 50 件の保存記録を確認し、以前のバージョンへロールバックしたり、変更内容の詳細を確認したりできます。
### 2.2 左側ツールバー
#### 2.2.1 アウトラインツリー
アウトラインツリーを使用すると、ページ全体のレイアウトをより明確に把握できます。アウトラインツリーから直接、コンポーネントのドラッグ＆ドロップや一括削除を行えます。
* アウトラインツリーの項目をダブルクリックすると表示名を変更でき、同じタイプの複数のコンポーネントを区別しやすくなります。
* 右上の「ピン留め」アイコンをクリックすると、アウトラインツリーパネルを左側に固定できます。
* CMD / CTRL キーを押しながら操作すると、アウトラインツリーで複数選択できます。
#### 2.2.2 コンポーネントライブラリ
コンポーネントライブラリのコンポーネントをクリックし、キャンバスまたはアウトラインツリーの目的の位置にドラッグします。コンポーネントをクリックして、キャンバスに直接挿入することもできます。
#### 2.2.3 データソース
データソースでは、変数またはリモート変数を宣言してデータを動的に表示できます。
コンポーネントの属性設定で、コンポーネントをデータソースにバインドできます。
詳細は[データソースパネル](/ja/yida/form/og76m2)をご覧ください。
#### 2.2.4 JS アクションパネル
JS アクションパネルでは、[**JavaScript**](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript) コードを記述して、よりカスタマイズされた要件を実現できます。
詳細は [JS アクションパネル - フロントエンドコード開放](/ja/yida/developer-features/ocmxyv)をご覧ください。
#### 2.2.5 国際化パネル
国際化パネルでは、多言語の文言を管理できます。コンポーネントの属性設定で、コンポーネントを多言語データにバインドできます。
詳細は「国際化」をご覧ください。
#### 2.2.6 中央キャンバス
キャンバスは、コンポーネントを配置・設定してページを構築するために使用します。カーソルのガイド表示に従ってコンポーネントをドラッグ＆ドロップしたり、コンポーネントをコピー・削除したりできます。いずれの操作もショートカットキーに対応しています。
### 2.3 右側属性設定パネル
#### 2.4.1 属性設定
属性設定は、コンポーネントの共通属性を設定するために使用します。変更はリアルタイムでキャンバスに反映されます。
\{/} をクリックすると、現在の属性に[**データバインディング**](/ja/yida/form/og76m2)を適用して、動的表示を実現できます。
**注意：データバインディングの結果は、デザイナー内ではリアルタイムにプレビューできません。プレビュー環境で確認してください。**
詳細は[コンポーネント基本情報](/ja/yida/form/snftao)をご覧ください。
#### 2.4.2 スタイル設定パネル
YiDA デザイナーには、画像・テキスト表示、レイアウトコンテナ、グループなどのコンポーネント向けに基本的なスタイル設定が用意されています。幅、高さ、背景を変更できます。以下をご覧ください：
詳細は[カスタムスタイルの概要](/ja/yida/form/gdnsgw)をご覧ください。
#### 2.4.3 プレミアム
プレミアムは、主に特別な要件を持つコンポーネントの設定に使用します。
詳細は[コンポーネント基本情報](/ja/yida/form/snftao)をご覧ください。
① 一意の識別子：現在のコンポーネントの一意の識別子です。コード内で現在のコンポーネントインスタンスを取得する際に使用し、コンポーネントに対して高度な操作を実行できます。
② マルチプラットフォーム表示：現在のコンポーネントをどのプラットフォームに表示するかを指定します。デフォルトではすべてのプラットフォームに表示されます。特定のプラットフォームで無効にすると、そのプラットフォームではコンポーネントがレンダリングされません。
**注意：このオプションを設定した場合、データはサーバーサイドに送信されず、コードで現在のコンポーネントインスタンスを取得すると null が返されます。**
③ データ送信：デフォルト値は「表示時のみ送信」です。フォームコンポーネントの「デフォルト状態」を「非表示」に設定した場合、デフォルトではデータはバックエンドに送信されません。非表示フィールドのデータを送信する必要がある場合は、このオプションを「常に送信」に設定してください。
**注意：このオプションは、コンポーネントの「デフォルト状態」属性と連動します。**
④ アクション設定：コンポーネントのイベントコールバックを設定するために使用し、コードによって複雑なビジネスロジックを実装できます。詳細は[**アクションパネル**](/ja/yida/form/uezmum)の使用ガイドをご覧ください。