プロパティ・ペイン

「ページ・デザイナのプロパティ」ペインには、キャンバスまたはコード・ビューで現在選択されているコンポーネントのプロパティが表示され、ID、表示名、説明などのメタデータ属性を設定するために使用できます。また、コンポーネントのレイアウト、スタイルおよび動作をカスタマイズするための様々なプロパティも提供します。

コンポーネント・プロパティはプロパティ・ペインのタブで編成されており、コンポーネントによって異なる場合があります。たとえば、入力テキスト・コンポーネントのプロパティ・ペインには、一般、データ、イベントおよびすべてタブが表示されます。表またはリスト・ビュー・コレクション・コンポーネントなどの一部のコンポーネントには、追加のクイックスタートタブがあります:

図component-properties-pane.pngの説明

各タブで実行できる操作の概要を次に示します:

コンポーネント・プロパティ	説明
一般	レイアウトやスタイルなど、選択したコンポーネントの最も重要なプロパティが含まれます。親コンポーネント・スロット内のコンポーネントのスロット値もここに表示されます。スロットに追加されたサブコンポーネント(ボタン・アイコンなど)を選択し、スロット値を変更して`startIcon`スロットから`endIcon`スロットに移動します。これにより、HTMLコードにアクセスせずに、削除されたコンポーネントのスロットを変更できます。サブコンポーネントによって使用されるスロットは、サブコンポーネントのすべてタブにも表示され、そこで変更できます(変数にバインドする場合など)。
データ	データにバインドされるべきプロパティが含まれます。「一般的な」タブおよびAllタブには、変数や式にバインドできるプロパティも含まれています。「コンポーネントをデータにバインド」を参照してください。
イベント	コンポーネントのイベントをバインドして、動作を定義するアクション・チェーンをトリガーするために使用されます(たとえば、ボタンがクリックされたときにURLをオープンする場合)。「コンポーネントからのアクション・チェーンの起動」を参照してください。
すべて	より高度なコンポーネント・プロパティが含まれ、カスタム・プロパティを含むすべてのプロパティが表示されます。カスタム・プロパティは、`data-` *属性などのコンポーネント・メタデータで定義されていないプロパティであり、一般属性の横にある+をクリックして追加できます。
クイック・スタート	コンポーネントで使用可能なクイック・スタート・ウィザードのリストが含まれます。表やリストなどのコレクション・コンポーネントを追加すると、このタブにはウィザードのリストが表示され、コレクションのデータへのマッピング、および作成および詳細ページの追加など、通常はコンポーネントに関連付けられているアクションを追加する際に役立ちます。

「プロパティ」を切り替えて、プロパティ・ペインの表示/非表示を切り替えることができます。

変数ピッカー

コンポーネントのプロパティを操作する場合、変数をコンポーネントにバインドし、変数に格納されているデータを移入できます。たとえば、入力テキスト・コンポーネントをRESTエンドポイントの特定のフィールドにバインドしたり、見出しコンポーネントを変数にバインドできます。これを行うには、「変数」ピッカーを使用します。このピッカーにアクセスするには、プロパティにマウス・ポインタを重ねると表示される選択変数アイコンをクリックします。

コンポーネントを変数にバインドする方法の例を次に示します:

変数をバインドするコンポーネントのプロパティを探し、「変数ピッカーを開く」をクリックします。たとえば、入力テキストの値プロパティの変数ピッカーは、データ・タブ(左側に表示)または見出しのテキスト・プロパティ(右側に表示)にあります:

図props-selectvariable.pngの説明
現在のスコープで使用可能な変数を選択するか、「作成」をクリックして変数を作成します。
プロパティに追加された式([[ $flow.variables.userName ]]など)が表示されます。必要に応じて、この式をプロパティ自体内で拡張できます。たとえば、Informationを追加し、userName式を一重引用符で囲むと、次のようになります:
```
[[ " '"+$flow.variables.userName + "' Information"]]
```
複雑な式の場合は、「式エディタ」を使用できます。

式エディタ

一部のプロパティは、実行時に単一の値に解決されるexpressionsを受け入れます。式は、評価する必要があることを示す[[...]]で囲まれた文字列です。変数、演算子、関数、システム・プロパティなどを含めることができます。

式を簡単に定義するには、式エディタを使用します。式エディタにアクセスするには、式をサポートするプロパティにマウス・ポインタを重ねると表示されるアイコンをクリックします。

式は様々なタスクに対して定義できますが、通常、変数にデフォルト値(左側に表示)を設定したり、UIコントロールをデータ(右側に表示)にバインドするために使用されます:

図props-visapp-expressioneditor.pngの説明

たとえば、firstNameおよびlastName変数に基づいて、入力テキスト・コンポーネントにユーザーのフルネームを表示する式を定義する方法を次に示します:

コンポーネントの「データ」タブに切り替えて、をクリックします。
式エディタで、firstNameおよびlastName変数をキャンバスにドラッグ・アンド・ドロップして式を定義します。事前定義済の変数、関数およびその他のプロパティは、左ペインの定義済スコープ内で使用できます。

図expressioneditor.pngの説明
キャンバスでnullを削除してください。最後の表現は次のようになります:
```
$variables.firstName + ' ' + $variables.lastName
```
$variablesは、現在のスコープの変数のショートカットです。したがって、ページ内の$variablesは$page.variablesと同じです。
式の構文をチェックして有効であることを確認し、「保存」をクリックします。

式エディタは、標準のJavaScript式構文をサポートし、Visual BuilderのUIコンポーネントで機能するようにカスタマイズします。フィールドcountを持つ変数membersがあり、メンバーが10を超える場合にメッセージを表示する必要があるとします。 JavaScriptでは、次のようにコーディングできます:

members.count > 10 ? 'too many members (current value=' + members.count + ' while max value is 10)' : 'within reason'

Visual BuilderのTextコンポーネントに適用すると、同じ式は次のようになります:

<oj-bind-text value="[[ $variables.members.count > 10 ? 'too many members (current value=' + $variables.members.count + ' while max value is 10)' : 'within reason' ]]"></oj-bind-text>

次に、いくつかの簡単な例を示します:

ユース・ケース	JavaScript式	Visual Builderの式
`firstName`および`lastName`変数を連結するには:	`firstName + ' ' + lastName`	`$page.variables.firstName + ' ' + $page.variables.lastName`
`jobTitle`にアクセスする前に、`employee`および`job`がNULLまたは未定義かどうかを確認するには:	`employee?.job?.jobTitle`	`$variables.employee?.job?.jobTitle`
`price`および`quantity`に基づいて行の合計価格を計算するには:	`row.price * row.quantity`	`$current.row.price * $current.row.quantity`

標準の式構文の詳細は、「式と演算子」を参照してください。参照フィールドが使用できない場合や、フィールドの値がnullの場合に効率的な式を記述する方法の詳細は、「参照されるフィールドが使用できない場合や、その値がNULLの場合に式を記述する方法」を参照してください