カスタムページデザイナーの概要

​

1. ユースケース

アプリ全体のデータを表示する必要がある場合、たとえば処理待ちの項目、作成した項目、CCされた項目などを表示する際に、カスタムページを使用します。フォーム送信用のクイックエントリボタンを設定することも可能です。

​

2. 概要

カスタムページデザイナーは、上部ツールバー、左サイドバー、中央キャンバス、右プロパティ設定パネルの4つの部分で構成されています。 以下のセクションで各部分の機能を説明します。

​

2.1 上部ツールバー

​

2.1.1 ページ設定

詳細は ページ設定 を参照してください。

​

2.1.2 ショートカットキー

YiDAデザイナーには、以下のようなキーボードショートカットが用意されています。

​

2.1.3 会議履歴

YiDAデザイナーでは、デザイナー内で会議履歴を確認できます。保存するたびに自動で記録され、最大50件まで保持されます。直近50件の保存記録を確認し、任意の記録にロールバックしたり、変更内容を検査したりできます。

​

2.2 左サイドバー

​

2.2.1 アウトラインツリー

アウトラインツリーを使用すると、ページのレイアウトをより明確に把握できます。また、コンポーネントを一括ドラッグまたは一括削除することもできます。

• アウトラインツリー内のノードをダブルクリックして名前を変更できます。同じタイプの複数のコンポーネントを区別するのに便利です。
• 右上のピン留めアイコンをクリックすると、アウトラインツリーパネルを左側にピン留めできます。
• CMD / CTRL キーを押しながら、アウトラインツリー内のノードを複数選択できます。

以下の動画で設定方法をご確認ください。

​

2.2.2 コンポーネントライブラリ

コンポーネントライブラリからコンポーネントをキャンバス上、またはアウトラインツリー内の目的の位置にドラッグします。 以下の動画で設定方法をご確認ください。

​

2.2.3 ブロックテンプレート

ブロックテンプレートは、デザイン効率を向上させるために用意されています。テンプレートやブロックを適切に活用することで、日常的なページデザインを迅速化し、優れたデザインパターンを徹底できます。詳細は ブロックテンプレート を参照してください。

​

2.2.4 データソース

データソースはローカル変数またはリモート変数を宣言するもので、データを動的に表示するために使用できます。 プロパティ設定パネルで、コンポーネントのプロパティをデータソースにバインドできます。詳細は データソースパネル を参照してください。

​

2.2.5 アクションパネル

アクションパネルを使用して JavaScript コードを記述し、よりカスタマイズされた要件に対応できます。 詳細は アクションパネル を参照してください。

​

2.2.6 国際化パネル

国際化パネルを使用して多言語コピーを管理できます。プロパティ設定パネルで、コンポーネントのプロパティを多言語データにバインドできます。 詳細は 国際化パネル を参照してください。

​

2.3 中央キャンバス

キャンバスは、コンポーネントを配置・設定してページを構築する場所です。カーソルのヒントに従ってキャンバス上でコンポーネントをドラッグし、ページをレイアウトしたり、必要に応じてコンポーネントをコピーまたは削除したりできます。詳細は以下の動画をご覧ください。

​

2.4 右プロパティ設定パネル

​

2.4.1 属性設定

属性設定パネルは、コンポーネントの共通プロパティを設定するために使用します。変更内容はキャンバス上でリアルタイムに反映されます。ただし、アクションバインディングや変数バインディングの結果は、プレビュー環境で検証する必要があります。

​

2.4.2 スタイル設定パネル

YiDAデザイナーでは、画像とテキストの表示コンポーネントなど、一部のコンポーネントに対してスタイル設定を提供しています。その他のスタイルオプションについては、スタイル設定 を参照してください。

​

2.4.3 プレミアム

プレミアムセクションは、コンポーネントのカスタマイズ要件を設定するために使用します。 備考:

• レンダリング条件 については、条件付きレンダリングの説明を参照してください。
• ループ については、ループレンダリングの説明を参照してください。
• レンダリング固定値キー については、レンダリング固定値キーの説明を参照してください。

​

3. FAQ