翻訳は機械翻訳により提供されています。提供された翻訳内容と英語版の間で齟齬、不一致または矛盾がある場合、英語版が優先します。

# コンポーネントリファレンス
<a name="components-reference"></a>

このトピックでは、App Studio の各コンポーネントとそのプロパティについて詳しく説明し、設定例を示します。

## 一般的なコンポーネントプロパティ
<a name="common-properties"></a>

このセクションでは、アプリケーションスタジオの複数のコンポーネント間で共有される一般的なプロパティと機能の概要を説明します。各プロパティタイプの具体的な実装の詳細とユースケースはコンポーネントによって異なりますが、これらのプロパティの一般的な概念は App Studio 全体で一貫しています。

### 名前
<a name="common-properties-component-name"></a>

コンポーネントごとにデフォルト名が生成されますが、 を編集して各コンポーネントに一意の名前に変更することができます。この名前を使用して、コンポーネントと、同じページ内の他のコンポーネントまたは式からのデータを参照します。制限: コンポーネント名にはスペースを含めないでください。文字、数字、アンダースコア、ドル記号のみを使用できます。例: `userNameInput`、`ordersTable`、`metricCard1`。

### プライマリ値、セカンダリ値、および値
<a name="common-properties-component-values"></a>

アプリケーションスタジオの多くのコンポーネントには、コンポーネント内に表示されるコンテンツまたはデータを決定する値または式を指定するためのフィールドが用意されています。これらのフィールドには、多くの場合`Primary value`、コンポーネントタイプと目的に応じて`Value`、`Secondary value`、、または単に というラベルが付けられます。

`Primary value` フィールドは通常、コンポーネント内で目立つように表示する必要があるメイン値、データポイント、またはコンテンツを定義するために使用されます。

`Secondary value` フィールドは、使用可能な場合、追加の値またはサポート値、または情報をプライマリ値とともに表示するために使用されます。

`Value` フィールドでは、コンポーネントに表示する値または式を指定できます。

これらのフィールドは、静的テキスト入力と動的式の両方をサポートします。式を使用すると、アプリケーション内の他のコンポーネント、データソース、または変数のデータを参照できるため、動的でデータ駆動型のコンテンツ表示が可能になります。

#### 式の構文
<a name="common-properties-component-values-expression-syntax"></a>

これらのフィールドに式を入力するための構文は、一貫したパターンに従います。

```
{{expression}}
```

ここで、*expression* は、表示する値またはデータに評価される有効な式です。

##### 例: 静的テキスト
<a name="common-properties-component-values-static-text-examples"></a>
+ プライマリ値: `"123"`や などの静的な数値を直接入力できます`"$1,999.99"`。
+ セカンダリ値: `"Goal"`や などの静的テキストラベルを入力できます`"Projected Revenue"`。
+ 値: `"since last month"`や などの静的文字列を入力できます`"Total Quantity"`。

##### 例: 式
<a name="common-properties-component-values-expression-examples"></a>
+ `Hello, {{currentUser.firstName}}`: 現在ログインしているユーザーの名で挨拶を表示します。
+ `{{currentUser.role === 'Admin' ? 'Admin Dashboard' : 'User Dashboard'}}`: 条件付きで、ユーザーのロールに基づいて異なるダッシュボードタイトルを表示します。
+ `{{ui.componentName.data?.[0]?.fieldName}}`: ID のコンポーネントのデータの最初の項目から `fieldName`フィールドの値を取得します`componentName`。
+ `{{ui.componentName.value * 100}}`: ID のコンポーネントの値に対して計算を実行します`componentName`。
+ `{{ui.componentName.value + ' items'}}`: コンポーネントの値を ID `componentName`と文字列 と連結します`' items'`。
+ `{{ui.ordersTable.data?.[0]?.orderNumber}}`: `ordersTable`コンポーネント内のデータの最初の行から注文番号を取得します。
+ `{{ui.salesMetrics.data?.[0]?.totalRevenue * 1.15}}`: `salesMetrics`コンポーネントのデータの最初の行から総収益を 15% 増やして、予測収益を計算します。
+ `{{ui.customerProfile.data?.[0]?.firstName + ' ' + ui.customerProfile.data?.lastName}}`: `customerProfile`コンポーネント内のデータから名と姓を連結します。
+ `{{new Date(ui.orderDetails.data?.orderDate).toLocaleDateString()}}`: `orderDetails`コンポーネントからの注文日をより読みやすい日付文字列にフォーマットします。
+ `{{ui.productList.data?.length}}`: `productList`コンポーネントに接続されたデータ内の製品の合計数を表示します。
+ `{{ui.discountPercentage.value * ui.orderTotal.value}}`: 割引率と注文合計に基づいて割引額を計算します。
+ `{{ui.cartItemCount.value + ' items in cart'}}`: ショッピングカート内の項目数をラベル とともに表示します`items in cart`。

これらの式フィールドを使用すると、アプリケーション内で動的コンテンツとデータ駆動型コンテンツを作成できるため、ユーザーのコンテキストやアプリケーションの状態に合わせた情報を表示できます。これにより、よりパーソナライズされたインタラクティブなユーザーエクスペリエンスが可能になります。

### ラベル
<a name="common-properties-label"></a>

**Label** プロパティを使用すると、コンポーネントの字幕またはタイトルを指定できます。このラベルは通常、コンポーネントの横または上に表示され、ユーザーがその目的を理解するのに役立ちます。

静的テキストと式の両方を使用してラベルを定義できます。

#### 例: 静的テキスト
<a name="label-static-example"></a>

Label フィールドにテキスト「First Name」を入力すると、コンポーネントはラベルとして「First Name」を表示します。

#### 例: 式
<a name="label-expression-examples"></a>

##### 例: 小売店
<a name="label-expression-examples-retail-store-label"></a>

次の例では、ユーザーごとにラベルをパーソナライズし、インターフェイスを個人に合わせてカスタマイズします。

```
{{currentUser.firstName}} {{currentUser.lastName}}'s Account
```

##### 例: SaaS プロジェクト管理
<a name="label-expression-examples-project-management-label"></a>

次の の例では、選択したプロジェクトからデータを取得してコンテキスト固有のラベルを提供し、ユーザーがアプリケーション内で向きを維持できるようにします。

```
Project {{ui.projectsTable.selectedRow.id}} - {{ui.projectsTable.selectedRow.name}}
```

##### 例: 医療施設
<a name="label-expression-examples-healthcare-clinic-label"></a>

次の例では、現在のユーザーのプロファイルと医師の情報を参照し、患者によりパーソナライズされたエクスペリエンスを提供します。

```
Dr. {{ui.doctorProfileTable.data.firstName}}
       {{ui.doctorProfileTable.data.lastName}}
```

### Placeholder
<a name="common-properties-placeholder"></a>

Placeholder プロパティを使用すると、コンポーネントが空の場合に表示されるヒントまたはガイダンステキストを指定できます。これにより、ユーザーは予想される入力形式を理解したり、追加のコンテキストを提供したりできます。

静的テキストと式の両方を使用してプレースホルダーを定義できます。

#### 例: 静的テキスト
<a name="placeholder-static-example"></a>

`Enter your name` **Placeholder** フィールドにテキストを入力すると、コンポーネントがプレースホルダーテキスト`Enter your name`として表示されます。

#### 例: 式
<a name="placeholder-expression-examples"></a>

##### 例: 金融サービス
<a name="placeholder-expression-examples-financial-services-placeholder"></a>

 `Enter the amount you'd like to deposit into your {{ui.accountsTable.selectedRow.balance}} account` これらの例では、選択したアカウントからデータを取得して関連するプロンプトを表示し、銀行のお客様にインターフェイスを直感的に使用できるようにします。

##### 例: e コマース
<a name="placeholder-expression-examples-ecommerce-placeholder"></a>

 `Enter the coupon code for {{ui.cartTable.data.currency}} total` ここでのプレースホルダーは、ユーザーのカートの内容に基づいて動的に更新され、シームレスなチェックアウトエクスペリエンスを提供します。

##### 例: 医療施設
<a name="placeholder-expression-examples-healthcare-clinic-placeholder"></a>

 `Enter your {{ui.patientProfile.data.age}}-year-old patient's symptoms` 患者の年齢を参照する式を使用することで、アプリケーションはよりパーソナライズされた便利なプレースホルダーを作成できます。

### ソース
<a name="common-properties-source"></a>

**Source** プロパティを使用すると、コンポーネントのデータソースを選択できます。選択時に、、`entity`、`expression`または のデータソースタイプから選択できます`automation`。

#### エンティティ
<a name="common-properties-source-entity"></a>

Entity をデータソース****として選択すると、コンポーネントをアプリケーションの既存のデータエンティティまたはモデルに接続できます。これは、アプリケーション全体で活用したい明確に定義されたデータ構造またはスキーマがある場合に便利です。

エンティティデータソースを使用するタイミング:
+ コンポーネントに表示する情報を含むデータモデルまたはエンティティがある場合 (たとえば、「Name」、「Description」、「Price」などのフィールドを持つ「Products」エンティティ）。
+ データベース、API、またはその他の外部データソースからデータを動的に取得し、コンポーネントに表示する必要がある場合。
+ アプリケーションのデータモデルで定義されている関係と関連付けを活用する場合。

##### エンティティでのクエリの選択
<a name="common-properties-source-selecting-entity-query"></a>

コンポーネントを、エンティティ全体ではなくエンティティからデータを取得する特定のクエリに接続する場合があります。エンティティデータソースでは、既存のクエリから選択するか、新しいクエリを作成するかを選択できます。

クエリを選択すると、次のことができます。
+ 特定の条件に基づいて、コンポーネントに表示されるデータをフィルタリングします。
+ クエリにパラメータを渡して、データを動的にフィルタリングまたはソートします。
+ クエリで定義された複雑な結合、集約、またはその他のデータ操作手法を活用します。

たとえば、アプリケーションに `Name`、、 などのフィールドを持つ`Customers`エンティティがある場合`Email`です`PhoneNumber`。テーブルコンポーネントをこのエンティティに接続し、ステータスに基づいて顧客をフィルタリングする事前定義された`ActiveCustomers`データアクションを選択できます。これにより、顧客データベース全体ではなく、アクティブな顧客のみをテーブルに表示できます。

##### エンティティデータソースへのパラメータの追加
<a name="common-properties-source-adding-entity-parameters"></a>

エンティティをデータソースとして使用する場合は、コンポーネントにパラメータを追加することもできます。これらのパラメータを使用して、コンポーネントに表示されるデータをフィルタリング、ソート、または変換できます。

たとえば、、`Name`、、 `Description` `Price`などのフィールドを持つ`Products`エンティティがある場合です`Category`。製品リストを表示するテーブルコンポーネント`category`に という名前のパラメータを追加できます。ユーザーがドロップダウンからカテゴリを選択すると、データアクションの `{{params.category}}`式を使用して、選択したカテゴリに属する製品のみを表示するようにテーブルが自動的に更新されます。

#### 式
<a name="common-properties-source-expression"></a>

カスタム式または計算を入力するデータソースとして**式**を選択し、コンポーネントのデータを動的に生成します。これは、変換を実行したり、複数のソースからのデータを結合したり、特定のビジネスロジックに基づいてデータを生成したりする必要がある場合に便利です。

**Expression** データソースを使用するタイミング:
+ データモデルで直接利用できないデータを計算または取得する必要がある場合 (例: 数量と価格に基づいて合計注文価格を計算する）。
+ 複数のエンティティまたはデータソースのデータを組み合わせて複合ビューを作成する場合 (顧客の注文履歴と連絡先情報を表示するなど）。
+ 特定のルールまたは条件に基づいてデータを生成する必要がある場合 (ユーザーの閲覧履歴に基づいて「推奨製品」リストを表示するなど）。

たとえば、現在の月の合計収益を表示する必要がある*メトリクス*コンポーネントがある場合、次のような式を使用して月別収益を計算して表示できます。

```
{{ui.table1.orders.concat(ui.table1.orderDetails).filter(o => o.orderDate.getMonth() === new Date().getMonth()).reduce((a, b) => a + (b.quantity * b.unitPrice), 0)}}
```

##### オートメーション
<a name="common-properties-source-automation"></a>

Automation をデータソース****として選択し、コンポーネントをアプリケーションの既存のオートメーションまたはワークフローに接続します。これは、コンポーネントのデータまたは機能が特定のプロセスまたはワークフローの一部として生成または更新される場合に便利です。

**Automation** データソースを使用するタイミング:
+ コンポーネントに表示されるデータが特定の自動化またはワークフローの結果である場合 (承認プロセスの一部として更新される「承認保留中」テーブルなど）。
+ オートメーション内のイベントまたは条件に基づいて、コンポーネントに対するアクションまたは更新をトリガーする場合 (例: SKU の最新の売上数値でメトリクスを更新する）。
+ オートメーション (サードパーティー API からデータを取得してテーブルに表示するなど) を使用して、コンポーネントをアプリケーションの他のサービスまたはシステムと統合する必要がある場合。

たとえば、ジョブアプリケーションプロセスを通じてユーザーをガイドするステップフローコンポーネントがある場合です。ステップフローコンポーネントは、ジョブアプリケーションの送信、バックグラウンドチェック、オファー生成を処理するオートメーションに接続できます。自動化がこれらのステップを進めるにつれて、ステップフローコンポーネントはアプリケーションの現在のステータスを反映するように動的に更新できます。

各コンポーネントに適したデータソースを慎重に選択することで、アプリケーションのユーザーインターフェイスが適切なデータとロジックを利用できるようにし、ユーザーにシームレスで魅力的なエクスペリエンスを提供できます。

### 次の場合に表示
<a name="visible-if"></a>

**Visible if** プロパティを使用して、特定の条件またはデータ値に基づいてコンポーネントまたは要素を表示または非表示にします。これは、アプリケーションのユーザーインターフェイスの特定部分の可視性を動的に制御する場合に便利です。

プロパティ**が**次の構文を使用している場合に表示されます。

```
{{expression ? true : false}}
```

または

```
{{expression}}
```

ここで、*expression* は、 `true`または のいずれかに評価されるブール式です`false`。

式が と評価されると`true`、コンポーネントが表示されます。式が に評価されると`false`、コンポーネントは非表示になります。式は、アプリケーション内の他のコンポーネント、データソース、または変数の値を参照できます。

#### 式の例の場合に表示されます
<a name="visible-if-examples"></a>

##### 例: E メール入力に基づいてパスワード入力フィールドを表示または非表示にする
<a name="visible-if-example-password-email"></a>

E メール入力フィールドとパスワード入力フィールドを含むログインフォームがあるとします。ユーザーが E メールアドレスを入力した場合にのみ、パスワード入力フィールドを表示します。式の場合、次の表示を使用できます。

```
{{ui.emailInput.value !== ""}}
```

この式は、`emailInput`コンポーネントの値が空の文字列ではないかどうかを確認します。ユーザーが E メールアドレスを入力した場合、式は と評価され`true`、パスワード入力フィールドが表示されます。E メールフィールドが空の場合、式は に評価され`false`、パスワード入力フィールドは非表示になります。

##### 例: ドロップダウン選択に基づいて追加のフォームフィールドを表示する
<a name="visible-if-example-form-fields-dropdown"></a>

ユーザーがドロップダウンリストからカテゴリを選択できるフォームがあるとします。選択したカテゴリに応じて、追加のフォームフィールドを表示または非表示にして、より具体的な情報を収集します。

たとえば、ユーザーが*製品*カテゴリを選択した場合、次の式を使用して追加の*製品詳細*フィールドを表示できます。

```
{{ui.categoryDropdown.value === "Products"}}
```

ユーザーが*サービス*または*コンサルティング*カテゴリを選択した場合、この式を使用して、別の追加フィールドのセットを表示できます。

```
{{ui.categoryDropdown.value === "Services" || ui.categoryDropdown.value === "Consulting"}}
```

##### 例: その他
<a name="visible-if-example-other"></a>

コンポーネントの値が空の文字列でない場合に`textInput1`コンポーネントを表示するには:

```
{{ui.textInput1.value === "" ? false : true}}
```

コンポーネントを常に表示するには:

```
{{true}}
```

コンポーネントの値が空の文字列でない場合に`emailInput`コンポーネントを表示するには:

```
{{ui.emailInput.value !== ""}}
```

### 次の場合に無効
<a name="disabled-if"></a>

**Disabled if** 機能を使用すると、特定の条件またはデータ値に基づいてコンポーネントを条件付きで有効または無効にできます。これは、コンポーネントを有効または無効にするかどうかを決定するブール式を受け入れる **Disabled if** プロパティを使用して実現されます。

**Disabled if** プロパティは次の構文を使用します。

```
{{expression ? true : false}}
```

または

```
{{expression}}
```

#### 式の例の場合、無効
<a name="disabled-if-examples"></a>

##### 例: フォームの検証に基づいて送信ボタンを無効にする
<a name="disabled-if-example-disable-submit-button"></a>

複数の入力フィールドを持つフォームがあり、すべての必須フィールドが正しく入力されるまで送信ボタンを無効にしたい場合は、次の **Disabled If **式を使用できます。

```
{{ui.nameInput.value === "" || ui.emailInput.value === "" || ui.passwordInput.value === ""}}
```

この式は、必須の入力フィールド (`nameInput`、`emailInput`、`passwordInput`) のいずれかが空かどうかを確認します。いずれかのフィールドが空の場合、式は に評価され`true`、送信ボタンは無効になります。すべての必須フィールドが入力されると、式は に評価され`false`、送信ボタンが有効になります。

これらのタイプの条件式を**「Visible if**」および**「Disabled ff** properties」で使用すると、ユーザー入力に適応する動的で応答性の高いユーザーインターフェイスを作成し、アプリケーションのユーザーにより合理化され、関連するエクスペリエンスを提供できます。

ここで、*expression* は true または false のいずれかに評価されるブール式です。

例:

```
{{ui.textInput1.value === "" ? true : false}}: The component will be Disabled if the textInput1 component's value is an empty string.
{{!ui.nameInput.isValid || !ui.emailInput.isValid || !ui.passwordInput.isValid}}: The component will be Disabled if any of the named input fields are invalid.
```

#### コンテナレイアウト
<a name="container-layouts"></a>

レイアウトプロパティは、コンポーネント内のコンテンツまたは要素がどのように配置および配置されるかを決定します。複数のレイアウトオプションがあり、それぞれが アイコンで表されます。
+ **列レイアウト**: このレイアウトは、コンテンツまたは要素を 1 つの列に垂直に配置します。
+ **2 列レイアウト**: このレイアウトでは、コンポーネントを 2 つの等幅列に分割し、コンテンツまたは要素を並べて配置できます。
+ **行レイアウト**: このレイアウトは、コンテンツまたは要素を 1 行に水平に配置します。

##### [Orientation] (向き)
<a name="container-layouts-orientation"></a>
+ **水平**: このレイアウトでは、コンテンツまたは要素を 1 行に水平に配置します。
+ **垂直**: このレイアウトは、コンテンツまたは要素を 1 つの列に垂直に配置します。
+ **インラインラップ**: このレイアウトはコンテンツまたは要素を水平に配置しますが、要素が使用可能な幅を超えた場合は次の行にラップします。

##### Alignment
<a name="container-layouts-alignment"></a>
+ **左**: コンテンツまたは要素をコンポーネントの左側に揃えます。
+ **中央**: コンテンツまたは要素をコンポーネント内で水平にセンタリングします。
+ **右**: コンテンツまたは要素をコンポーネントの右側に揃えます。

##### Width
<a name="container-layouts-width"></a>

**Width** プロパティは、コンポーネントの水平サイズを指定します。親コンテナまたは使用可能なスペースに対するコンポーネントの幅を表す 0%～100% のパーセンテージ値を入力できます。

##### Height
<a name="container-layouts-height"></a>

**Height** プロパティは、コンポーネントの垂直サイズを指定します。「自動」値は、コンポーネントの内容または使用可能なスペースに基づいてコンポーネントの高さを自動的に調整します。

##### 間のスペース
<a name="container-layouts-space-between"></a>

プロパティ**間のスペース**は、コンポーネント内のコンテンツまたは要素間の間隔またはギャップを決定します。0px (間隔なし) から 64px までの値を 4px (4px、8px、12px など) 単位で選択できます。

##### [Padding] (パディング)
<a name="container-layouts-padding"></a>

**Padding** プロパティは、コンテンツまたは要素とコンポーネントのエッジの間のスペースを制御します。0px (パディングなし) から 64px までの値を 4px (4px、8px、12px など) 単位で選択できます。

##### 背景
<a name="container-layouts-background"></a>

Background は、コンポーネントの背景色またはスタイルを****有効または無効にします。

これらのレイアウトプロパティは、コンポーネント内のコンテンツの配置と配置に柔軟性を提供し、コンポーネント自体のサイズ、間隔、外観を制御します。

## データコンポーネント
<a name="data-components"></a>

このセクションでは、**テーブル**、**詳細**、**メトリクス**、**フォーム**、リ**ピータ**コンポーネントなど、アプリケーションスタジオで使用できるさまざまなデータコンポーネントについて説明します。これらのコンポーネントは、アプリケーション内のデータを表示、収集、操作するために使用されます。

### [テーブル]
<a name="table-component"></a>

Table ****コンポーネントは、行と列を含む表形式でデータを表示します。これは、データベースの項目やレコードのリストなどの構造化データを、整理されたeasy-to-read方法で提示するために使用されます。

#### テーブルプロパティ
<a name="table-component-properties"></a>

Table ****コンポーネントは、、、 などの他のコンポーネントといくつかの共通プロパティを共有`Name``Source`します`Actions`。これらのプロパティの詳細については、「」を参照してください[一般的なコンポーネントプロパティ](#common-properties)。

**テーブル**コンポーネントには、一般的なプロパティに加えて、、、 などの特定のプロパティ`Columns``Search and export`と設定オプションがあります`Expressions`。

##### 列
<a name="table-component-properties-columns"></a>

このセクションでは、テーブルに表示する列を定義できます。各列は、次のプロパティで設定できます。
+ **形式**: フィールドのデータ型。テキスト、数値、日付など。
+ **列ラベル**: 列のヘッダーテキスト。
+ **値**: この列に表示するデータソースのフィールド。

  このフィールドでは、列セルに表示する値または式を指定できます。式を使用して、接続されたソースまたは他のコンポーネントからのデータを参照できます。

  例: `{{currentRow.title}}` - この式は、列セルの現在の行の*タイトル*フィールドの値を表示します。
+ **ソートを有効にする**: このトグルを使用すると、特定の列のソート機能を有効または無効にできます。有効にすると、ユーザーはこの列の値に基づいてテーブルデータをソートできます。

##### 検索とエクスポート
<a name="table-component-properties-search-and-export"></a>

**テーブル**コンポーネントには、検索およびエクスポート機能を有効または無効にするための次のトグルが用意されています。
+ **検索を表示する** 有効にすると、このトグルはテーブルに検索入力フィールドを追加し、ユーザーは表示されたデータを検索してフィルタリングできます。
+ **エクスポートを表示する** 有効にすると、このトグルによってテーブルにエクスポートオプションが追加され、ユーザーは CSV などのさまざまな形式でテーブルデータをダウンロードできるようになります。

**注記**  
デフォルトでは、検索機能はテーブルにロードされたデータに制限されます。検索を完全に使用するには、データのすべてのページをロードする必要があります。

##### ページあたりの行数
<a name="table-component-properties-rows-per-page"></a>

テーブルのページごとに表示する行数を指定できます。その後、ユーザーはページ間を移動してデータセット全体を表示できます。

##### プリフェッチの制限
<a name="table-component-properties-pre-fetch-limit"></a>

各クエリリクエストでプリフェッチするレコードの最大数を指定します。最大数は 3000 です。

##### アクション
<a name="table-component-properties-actions"></a>

**アクション**セクションで、次のプロパティを設定します。
+ **アクションの場所**: **Pin to right** が有効になっている場合、追加されたアクションは、ユーザーのスクロールに関係なく、常にテーブルの右側に表示されます。
+ **アクション**: テーブルにアクションボタンを追加します。これらのボタンは、ユーザーがクリックしたときに、次のような指定されたアクションを実行するように設定できます。
  + コンポーネントアクションを実行する
  + 別のページに移動する
  + データアクションを呼び出す
  + カスタム JavaScript を実行する
  + オートメーションを呼び出す

##### 表現
<a name="table-component-properties-expressions"></a>

**テーブル**コンポーネントには、式と行レベルのアクション機能を使用する複数の領域があり、テーブルの機能やインタラクティブ性をカスタマイズして強化できます。これにより、テーブル内のデータを動的に参照および表示できます。これらの式フィールドを活用することで、動的列を作成し、行レベルのアクションにデータを渡し、アプリケーション内の他のコンポーネントまたは式からテーブルデータを参照できます。

##### 例: 行値を参照する
<a name="table-component-properties-examples-referencing-row-values"></a>

`{{currentRow.columnName}}` または`{{currentRow["Column Name"]}}`これらの式を使用すると、レンダリングされる現在の行の特定の列の値を参照できます。*columnName* または *Column Name* を、参照する列の実際の名前に置き換えます。

例:
+ `{{currentRow.productName}}` 現在の行の製品名を表示します。
+ `{{currentRow["Supplier Name"]}}` 現在の行のサプライヤー名を表示します。列ヘッダーは*サプライヤー名*です。
+ `{{currentRow.orderDate}}` 現在の行の注文日を表示します。

##### 例: 選択した行を参照する
<a name="table-component-properties-examples-referencing-selected-row"></a>

`{{ui.table1.selectedRow["columnName"]}}` この式を使用すると、ID *table1* を使用して、テーブル内の現在選択されている行の特定の列の値を参照できます。*table1* はテーブルコンポーネントの実際の ID に、 *columnName* は参照する列の名前に置き換えます。

例:
+ `{{ui.ordersTable.selectedRow["totalAmount"]}}` ID *ordersTable* を使用して、テーブルで現在選択されている行の合計金額を表示します。
+ `{{ui.customersTable.selectedRow["email"]}}` ID *customersTable* を使用して、テーブルで現在選択されている行の E メールアドレスを表示します。
+ `{{ui.employeesTable.selectedRow["department"]}}` ID *employeesTable* を使用して、テーブルで現在選択されている行の部門を表示します。

##### 例: カスタム列の作成
<a name="table-component-properties-examples-creating-custom-columns"></a>

基になるデータアクション、オートメーション、または式から返されたデータに基づいて、テーブルにカスタム列を追加できます。既存の列値と JavaScript 式を使用して、新しい列を作成できます。

例:
+ `{{currentRow.quantity * currentRow.unitPrice}}` 数量と単価の列を乗算して、合計価格を表示する新しい列を作成します。
+ `{{new Date(currentRow.orderDate).toLocaleDateString()}}` 注文日をより読みやすい形式で表示する新しい列を作成します。
+ `{{currentRow.firstName + ' ' + currentRow.lastName + ' (' + currentRow.email + ')' }}` 各行のフルネームと E メールアドレスを表示する新しい列を作成します。

##### 例: 列の表示値のカスタマイズ:
<a name="table-component-properties-examples-customizing-column-display-values"></a>

列マッピングの フィールドを設定することで、テーブル列内の`Value`フィールドの表示値をカスタマイズできます。これにより、表示されたデータにカスタムフォーマットまたは変換を適用できます。

例:
+ `{{ currentRow.rating >= 4 ? '⭐️'.repeat(currentRow.rating) : currentRow.rating }}` 各行の評価値に基づいて星の絵文字を表示します。
+ `{{ currentRow.category.toLowerCase().replace(/\b\w/g, c => c.toUpperCase()) }}` 行ごとに大文字化された各単語を含むカテゴリ値を表示します。
+ `{{ currentRow.status === 'Active' ? '🟢 Active' : '🔴 Inactive' }}`: 各行のステータス値に基づいて色付きの円の絵文字とテキストを表示します。

##### 行レベルのボタンアクション
<a name="table-component-properties-examples-row-level-button-actions"></a>

`{{currentRow.columnName}}` または`{{currentRow["Column Name"]}}`、これらの式を使用して、選択した行のデータを使用して別のページに移動する、行のデータを使用してオートメーションをトリガーするなど、参照された行のコンテキストを行レベルのアクション内で渡すことができます。

例:
+ 行アクション列に編集ボタンがある場合は、パラメータ`{{currentRow.orderId}}`として を渡して、選択した注文の ID を持つ注文編集ページに移動できます。
+ 行アクション列に削除ボタンがある場合は、注文を削除する前に顧客に確認メールを送信するオートメーション`{{currentRow.customerName}}`に渡すことができます。
+ 行アクション列にビューの詳細ボタンがある場合は、注文の詳細を表示した従業員をログに記録するオートメーション`{{currentRow.employeeId}}`に渡すことができます。

これらの式フィールドと行レベルのアクション機能を活用することで、特定の要件に基づいてデータを表示および操作する高度にカスタマイズされたインタラクティブなテーブルを作成できます。さらに、行レベルのアクションをアプリケーション内の他のコンポーネントやオートメーションに接続して、シームレスなデータフローと機能を実現できます。

### [Detail] (詳細)
<a name="detail-component"></a>

**詳細**コンポーネントは、特定のレコードまたは項目に関する詳細情報を表示するように設計されています。単一のエンティティまたは行に関連する包括的なデータを表示するための専用スペースを提供するため、詳細な詳細を表示したり、データ入力や編集タスクを容易にしたりするのに最適です。

#### 詳細プロパティ
<a name="detail-component-properties"></a>

**詳細**コンポーネントは、、、 などの他のコンポーネントといくつかの共通プロパティを共有`Name``Source`します`Actions`。これらのプロパティの詳細については、「」を参照してください[一般的なコンポーネントプロパティ](#common-properties)。

**詳細**コンポーネントには、、、 などの特定のプロパティ`Fields``Layout`と設定オプションもあります`Expressions`。

#### [レイアウト]
<a name="detail-component-properties-layout"></a>

**レイアウト**セクションでは、**詳細**コンポーネント内のフィールドの配置と表示をカスタマイズできます。次のようなオプションを設定できます。
+ **列の数**: フィールドを表示する列の数を指定します。
+ **フィールドの順序**: フィールドをドラッグアンドドロップして、外観の順序を変更します。
+ **間隔と整列**: コンポーネント内のフィールドの間隔と整列を調整します。

#### 式と例
<a name="detail-component-properties-expressions"></a>

**詳細**コンポーネントには、コンポーネント内のデータを動的に参照および表示できるさまざまな式フィールドが用意されています。これらの式を使用すると、アプリケーションのデータとロジックにシームレスに接続する、カスタマイズされたインタラクティブな **Detail** コンポーネントを作成できます。

##### 例: データを参照する
<a name="detail-component-properties-examples-referencing-data"></a>

`{{ui.details.data[0]?.["colName"]}}`: この式を使用すると、**Detail** コンポーネントに接続されたデータ配列の最初の項目 (インデックス 0) のcolName」という名前の列の値を ID「details」で参照できます。"colName" を、参照する列の実際の名前に置き換えます。たとえば、次の式は、「details」コンポーネントに接続されたデータ配列の最初の項目の「customerName」列の値を表示します。

```
{{ui.details.data[0]?.["customerName"]}}
```

**注記**  
この式は、**Detail** コンポーネントが参照されているテーブルと同じページにあり、**Detail** コンポーネント内のテーブルの最初の行のデータを表示する場合に便利です。

##### 例: 条件付きレンダリング
<a name="detail-component-properties-examples-conditional-rendering"></a>

`{{ui.table1.selectedRow["colName"]}}`: ID *table1* を持つテーブル内の選択した行に *colName* という名前の列のデータがある場合、この式は true を返します。これは、テーブルの選択した行が空であるかどうかに基づいて、**詳細**コンポーネントを条件付きで表示または非表示にするために使用できます。

例:

この式は、**Detail** コンポーネントの `Visible if`プロパティで使用して、テーブル内の選択した行に基づいて条件付きで表示または非表示にすることができます。

```
{{ui.table1.selectedRow["customerName"]}}
```

この式が true と評価された場合 (*table1* コンポーネントの選択した行に *customerName* 列の値がある場合）、**Detail** コンポーネントが表示されます。式が false と評価された場合 (選択した行が空であるか、customerName」の値がない場合）、**Detail** コンポーネントは非表示になります。

##### 例: 条件付き表示
<a name="detail-component-properties-examples-conditional-display"></a>

`{{(ui.Component.value === "green" ? "🟢" : ui.Component.value === "yellow" ? "🟡" : ui.detail1.data?.[0]?.CustomerStatus)}}`: この式は、コンポーネントまたはデータフィールドの値に基づいて絵文字を条件付きで表示します。

内訳:
+ `ui.Component.value`: ID コンポーネントを持つ*コンポーネントの*値を参照します。
+ `=== "green"`: コンポーネントの値が文字列「green」と等しいかどうかを確認します。
+ `? "🟢"`: 条件が true の場合、 は緑色の円絵文字を表示します。
+ `: ui.Component.value === "yellow" ? "🟡"`: 最初の条件が false の場合、 はコンポーネントの値が文字列「黄色」と等しいかどうかを確認します。
+ `? "🟡"`: 2 番目の条件が true の場合、 は黄色の四角形絵文字を表示します。
+ `: ui.detail1.data?.[0]?.CustomerStatus`: 両方の条件が false の場合、Detail コンポーネントに接続されたデータ配列の最初の項目のCustomerStatus」値を ID「detail1」で参照します。

この式を使用して、**Detail** コンポーネント内のコンポーネントまたはデータフィールドの値に基づいて絵文字または特定の値を表示できます。

### メトリクス
<a name="metrics-component"></a>

**メトリクス**コンポーネントは、主要なメトリクスまたはデータポイントをカードのような形式で表示するビジュアル要素です。重要な情報やパフォーマンス指標を視覚的にわかりやすく表示できるように設計されています。

#### メトリクスのプロパティ
<a name="metrics-properties"></a>

Metrics ****コンポーネントは、、、 などの他のコンポーネントといくつかの共通プロパティを共有`Name``Source`します`Actions`。これらのプロパティの詳細については、「」を参照してください[一般的なコンポーネントプロパティ](#common-properties)。

#### トレンド
<a name="metrics-properties-trend"></a>

メトリクスのトレンド機能を使用すると、表示されるメトリクスのパフォーマンスまたは経時的な変化を視覚的に表示できます。

##### トレンド値
<a name="metrics-properties-trend-value"></a>

このフィールドでは、トレンドの方向と大きさを決定するために使用される値または式を指定できます。通常、これは特定の期間における変更またはパフォーマンスを表す値になります。

例:

```
{{ui.salesMetrics.data?.[0]?.monthOverMonthRevenue}}
```

この式は、「salesMetrics」メトリクスに接続されたデータの最初の項目からmonth-over-monthの収益値を取得します。

##### 肯定的な傾向
<a name="metrics-properties-positive-trend"></a>

このフィールドでは、正の傾向の条件を定義する式を入力できます。式は true または false と評価されます。

例:

```
{{ui.salesMetrics.data?.[0]?.monthOverMonthRevenue > 0}}
```

この式は、month-over-monthの収益値が 0 より大きいかどうかをチェックし、正の傾向を示します。

##### 負の傾向
<a name="metrics-properties-negative-trend"></a>

このフィールドでは、負の傾向の条件を定義する式を入力できます。式は true または false と評価されます。

例:

```
{{ui.salesMetrics.data?.[0]?.monthOverMonthRevenue < 0}}
```

この式は、month-over-month収益値が 0 未満であるかどうかをチェックし、負の傾向を示します。

##### カラーバー
<a name="metrics-properties-color-bar"></a>

この切り替えにより、色付きのバーの表示を有効または無効にして、トレンドステータスを視覚的に示すことができます。

##### カラーバーの例:
<a name="metrics-properties-color-bar-examples"></a>

##### 例: 売上メトリクスの傾向
<a name="metrics-properties-color-bar-examples-sales-metrics-trend"></a>
+ **トレンド値**: `{{ui.salesMetrics.data?.[0]?.monthOverMonthRevenue}}`
+ **肯定的な傾向**: `{{ui.salesMetrics.data?.[0]?.monthOverMonthRevenue > 0}}`
+ **負の傾向**: `{{ui.salesMetrics.data?.[0]?.monthOverMonthRevenue < 0}}`
+ **カラーバー**: 有効

##### 例: インベントリメトリクスの傾向
<a name="metrics-properties-color-bar-examples-inventory-metrics-trend"></a>
+ **トレンド値**: `{{ui.inventoryMetrics.data?.[0]?.currentInventory - ui.inventoryMetrics.data?.[1]?.currentInventory}}`
+ **肯定的な傾向**: `{{ui.inventoryMetrics.data?.[0]?.currentInventory > ui.inventoryMetrics.data?.[1]?.currentInventory}}`
+ **負の傾向**: `{{ui.inventoryMetrics.data?.[0]?.currentInventory < ui.inventoryMetrics.data?.[1]?.currentInventory}}`
+ **カラーバー**: 有効

##### 例: 顧客満足度の傾向
<a name="metrics-properties-color-bar-examples-customer-satisfaction-trend"></a>
+ **トレンド値**: `{{ui.customerSatisfactionMetrics.data?.[0]?.npsScore}}`
+ **肯定的な傾向**: `{{ui.customerSatisfactionMetrics.data?.[0]?.npsScore >= 8}}`
+ **負の傾向**: `{{ui.customerSatisfactionMetrics.data?.[0]?.npsScore < 7}}`
+ **カラーバー**: 有効

これらのトレンド関連のプロパティを設定することで、表示される**メトリクス**のパフォーマンスまたは経時的な変化を視覚的に表現するメトリクスコンポーネントを作成できます。

これらの式を活用することで、データを動的に参照および表示する高度にカスタマイズされたインタラクティブなメトリクスコンポーネントを作成できるため、アプリケーション内で主要なメトリクス、パフォーマンス指標、データ駆動型の視覚化を表示できます。

#### メトリクス式の例
<a name="metrics-expression-examples"></a>

プロパティパネルでは、式を入力してタイトル、プライマリ値、セカンダリ値、値キャプションを表示し、値を動的に表示できます。

##### 例: プライマリ値を参照する
<a name="metrics-expression-examples-referencing-primary-value"></a>

`{{ui.metric1.primaryValue}}`: この式を使用すると、**メトリクス**コンポーネントのプライマリ値を、同じページ内の他のコンポーネントまたは式から ID *metric1* で参照できます。

例: `{{ui.salesMetrics.primaryValue}}`は *salesMetrics* **メトリクス**コンポーネントのプライマリ値を表示します。

##### 例: セカンダリ値を参照する
<a name="metrics-expression-examples-referencing-secondary-value"></a>

`{{ui.metric1.secondaryValue}}`: この式を使用すると、同じページ内の他のコンポーネントまたは式から ID *metric1* を持つ **Metrics** コンポーネントのセカンダリ値を参照できます。

例: `{{ui.revenueMetrics.secondaryValue}}` *revenueMetrics* **メトリクス**コンポーネントのセカンダリ値を表示します。

##### 例: データを参照する
<a name="metrics-expression-examples-referencing-data"></a>

`{{ui.metric1.data}}`: この式を使用すると、同じページ内の他のコンポーネントまたは式から ID *metric1* を持つ **Metrics **コンポーネントのデータを参照できます。

例: `{{ui.kpiMetrics.data}}`は *kpiMetrics* **メトリクス**コンポーネントに接続されているデータを参照します。

##### 例: 特定のデータ値の表示:
<a name="metrics-expression-examples-displaying-specific-data-values"></a>

`{{ui.metric1.data?.[0]?.id}}`: この式は、ID metric*1* を使用して **Metrics** コンポーネントに接続されたデータから特定の情報を表示する方法の例です。これは、データの最初の項目の特定のプロパティを表示する場合に便利です。

内訳:
+ `ui.metric1`: ID **metric***1* を持つ Metrics コンポーネントを参照します。
+ `data`: そのコンポーネントに接続されている情報またはデータセットを指します。
+ `?.[0]`: そのデータセットの最初の項目またはエントリを意味します。
+ `?.id`: その最初の項目またはエントリの *ID* 値または識別子を表示します。

例: `{{ui.orderMetrics.data?.[0]?.orderId}}`は *orderMetrics* メトリクスコンポーネントに接続されたデータの最初の項目の orderId *orderId* 値を表示します。 ****

##### 例: データ長の表示
<a name="metrics-expression-examples-displaying-data-length"></a>

`{{ui.metric1.data?.length}}`: この式は、ID metric*1* を使用して **Metrics** コンポーネントに接続されたデータの長さ (項目数) を表示する方法を示しています。データ内の項目数を表示する場合に便利です。

内訳:
+ `ui.metric1.data`: コンポーネントに接続されているデータセットを参照します。
+ `?.length`: そのデータセット内の項目またはエントリの合計数または数にアクセスします。

例: `{{ui.productMetrics.data?.length}}`は、*productMetrics* **メトリクス**コンポーネントに接続されているデータ内の項目の数を表示します。

### リピータ
<a name="repeater-component"></a>

**Repeater** コンポーネントは、提供されたデータソースに基づいて要素のコレクションを生成および表示できる動的コンポーネントです。これは、アプリケーションのユーザーインターフェイス内でリスト、グリッド、または繰り返しパターンの作成を容易にするように設計されています。ユースケースには次のようなものがあります。
+ アカウント内の各ユーザーのカードの表示
+ イメージとカートに追加するボタンを含む製品のリストを表示する
+ ユーザーがアクセスできるファイルのリストの表示

**Repeater** コンポーネントは、豊富なコンテンツを持つ**テーブル**コンポーネントと区別されます。**テーブル**コンポーネントには、厳密な行と列の形式があります。**Repeater** は、より柔軟にデータを表示できます。

#### リピータのプロパティ
<a name="repeater-component-properties"></a>

**Repeater** コンポーネントは、、、 などの他のコンポーネントといくつかの共通プロパティを共有`Name``Source`します`Actions`。これらのプロパティの詳細については、「」を参照してください[一般的なコンポーネントプロパティ](#common-properties)。

一般的なプロパティに加えて、**Repeater** コンポーネントには次の追加のプロパティと設定オプションがあります。

#### 項目テンプレート
<a name="repeater-component-properties-item-template"></a>

**項目テンプレート**は、データソース内の項目ごとに繰り返される構造とコンポーネントを定義できるコンテナです。**テキスト**、**イメージ**、**ボタン**、または各項目を表すために必要なその他のコンポーネントなど、他のコンポーネントをこのコンテナにドラッグアンドドロップできます。

Item **テンプレート**内で、 形式の式を使用して、現在の項目のプロパティまたは値を参照できます`{{currentItem.propertyName}}`。

たとえば、データソースに `itemName`プロパティが含まれている場合、 `{{currentItem.itemName}}`を使用して現在の項目の項目名 (複数可) を表示できます。

#### [レイアウト]
<a name="repeater-component-properties-layout"></a>

**レイアウト**セクションでは、リピータコンポーネント内の繰り返し要素の配置を設定できます。

##### [Orientation] (向き)
<a name="repeater-component-properties-orientation"></a>
+ **リスト**: 繰り返し要素を 1 つの列に垂直に配置します。
+ **グリッド**: グリッドレイアウト内の繰り返し要素を複数の列で配置します。

##### ページあたりの行数
<a name="repeater-component-properties-rows-per-page"></a>

リストレイアウトでページごとに表示する行数を指定します。ページ分割は、指定された行数をオーバーフローする項目に対して提供されます。

##### ページあたりの列と行 (グリッド)
<a name="columns-and-rows-per-page-grid"></a>
+ **列**: グリッドレイアウトの列数を指定します。
+ **ページあたりの行**数: グリッドレイアウトでページごとに表示する行数を指定します。ページ分割は、指定されたグリッドディメンションをオーバーフローする項目に対して提供されます。

#### 式と例
<a name="repeater-component-properties-expressions"></a>

**Repeater** コンポーネントには、コンポーネント内のデータを動的に参照および表示できるさまざまな式フィールドが用意されています。これらの式を使用すると、アプリケーションのデータとロジックにシームレスに接続するカスタマイズされたインタラクティブな **Repeater** コンポーネントを作成できます。

##### 例: 項目を参照する
<a name="repeater-component-properties-expressions-examples-referencing-items"></a>
+ `{{currentItem.propertyName}}`: 項目**テンプレート**内の現在の項目のプロパティまたは値を参照します。
+ `{{ui.repeaterID[index]}}`: リピータコンポーネントの特定の項目をインデックスで参照します。

##### 例: 製品リストのレンダリング
<a name="repeater-component-properties-expressions-examples-rendering-product-list"></a>
+ **ソース**: データソースとして *Products* エンティティを選択します。
+ **項目テンプレート**: 中に**テキスト**コンポーネントを含む**コンテナ**コンポーネントを追加して製品名 (`{{currentItem.productName}}`) を表示し、**イメージ**コンポーネントを追加して製品イメージ () を表示します`{{currentItem.productImageUrl}}`。
+ **レイアウト**: `Orientation`を に設定`List`し、`Rows per Page`必要に応じて を調整します。

##### 例: ユーザーアバターのグリッドの生成
<a name="repeater-component-properties-expressions-examples-generating-user-avatar-grid"></a>
+ **ソース**: 式を使用して、ユーザーデータの配列 (例: `[{name: 'John', avatarUrl: '...'}, {...}, {...}]`) を生成します。
+ **項目テンプレート**: **イメージ**コンポーネントを追加し、その`Source`プロパティを に設定します`{{currentItem.avatarUrl}}`。
+ **レイアウト**: を `Orientation`に設定し`Grid`、 `Columns`と の数を指定し`Rows per Page`、`Padding`必要に応じて `Space Between`と を調整します。

`Repeater` コンポーネントを使用することで、動的ユーザーインターフェイスとデータ駆動型ユーザーインターフェイスを作成し、要素のコレクションをレンダリングするプロセスを合理化し、手動による繰り返しやハードコーディングの必要性を軽減できます。

### フォーム
<a name="form-component"></a>

フォームコンポーネントは、ユーザー入力をキャプチャし、アプリケーション内のデータ入力タスクを容易にするように設計されています。入力フィールド、ドロップダウン、チェックボックス、その他のフォームコントロールを表示するための構造化されたレイアウトを提供し、ユーザーはデータをシームレスに入力または変更できます。テーブルなど、フォームコンポーネント内に他のコンポーネントをネストできます。

#### フォームプロパティ
<a name="form-component-properties"></a>

Form ****コンポーネントは、、、 などの他のコンポーネントといくつかの共通プロパティを共有`Name``Source`します`Actions`。これらのプロパティの詳細については、「」を参照してください[一般的なコンポーネントプロパティ](#common-properties)。

#### フォームの生成
<a name="form-component-properties-generate-form"></a>

**フォームの生成**機能を使用すると、選択したデータソースに基づいてフォームフィールドを自動的に入力することで、フォームフィールドをすばやく作成できます。これにより、多数のフィールドを表示する必要があるフォームを構築する際の時間と労力を節約できます。

****フォームの生成**機能を使用するには:**

1. **フォーム**コンポーネントのプロパティで、**フォームの生成**セクションを見つけます。

1. フォームフィールドの生成に使用するデータソースを選択します。これは、アプリケーションで使用できるエンティティ、ワークフロー、またはその他のデータソースです。

1. フォームフィールドは、フィールドラベル、タイプ、データマッピングなど、選択したデータソースに基づいて自動的に生成されます。

1. 生成されたフィールドを確認し、検証ルールの追加やフィールドの順序の変更など、必要なカスタマイズを行います。

1. フォーム設定に満足したら、**送信**を選択して生成されたフィールドを**フォーム**コンポーネントに適用します。

**フォームの生成**機能は、アプリケーションにユーザー入力をキャプチャする必要がある明確に定義されたデータモデルまたはエンティティのセットがある場合に特に便利です。フォームフィールドを自動的に生成することで、時間を節約し、アプリケーションのフォーム間で整合性を確保できます。

**フォームの生成**機能を使用した後、特定の要件に合わせて**フォーム**コンポーネントのレイアウト、アクション、式をさらにカスタマイズできます。

#### 式と例
<a name="form-component-properties-expressions"></a>

他のコンポーネントと同様に、式を使用して **Form **コンポーネント内のデータを参照および表示できます。例えば、次のようになります。
+ `{{ui.userForm.data.email}}`: ID の **Form** コンポーネントに接続されたデータソースの `email`フィールドの値を参照します`userForm`。

**注記**  
一般的なプロパティのその他の式の例[一般的なコンポーネントプロパティ](#common-properties)については、「」を参照してください。

これらのプロパティを設定し、式を活用することで、アプリケーションのデータソースやロジックとシームレスに統合するカスタマイズされたインタラクティブな Form コンポーネントを作成できます。これらのコンポーネントを使用して、ユーザー入力をキャプチャし、事前入力されたデータを表示し、フォームの送信またはユーザーインタラクションに基づいてアクションをトリガーできます。

### ステップフロー
<a name="stepflow-component"></a>

**Stepflow** コンポーネントは、アプリケーション内の複数ステップのプロセスまたはワークフローを通じてユーザーをガイドするように設計されています。一連のステップを表示するための構造化された直感的なインターフェイスを提供します。各ステップには独自の入力、検証、アクションのセットがあります。

Stepflow コンポーネントは、、、 などの他のコンポーネントといくつかの共通プロパティを共有`Name``Source`します`Actions`。これらのプロパティの詳細については、「」を参照してください[一般的なコンポーネントプロパティ](#common-properties)。

**Stepflow** コンポーネントには、、、 `Step Navigation`などの追加のプロパティ`Validation`と設定オプションがあります`Expressions`。

## AI コンポーネント
<a name="ai-components"></a>

### 生成 AI
<a name="genai-component"></a>

**Gen AI** コンポーネントは、コンポーネントとその付随するロジックをグループ化して、アプリケーションスタジオ内のチャットを使用して AI で簡単に編集するために使用されるグループ化コンテナです。チャットを使用してコンポーネントを作成すると、コンポーネントは **Gen AI** コンテナにグループ化されます。このコンポーネントの編集または使用については、「」を参照してください[アプリの構築または編集](generative-ai.md#generative-ai-build-app)。

## テキストと数値のコンポーネント
<a name="text-and-number-components"></a>

### テキスト入力
<a name="text-input-component"></a>

**テキスト入力**コンポーネントを使用すると、ユーザーはアプリケーション内でテキストデータを入力および送信できます。名前、住所、その他のテキスト情報など、ユーザー入力を簡単かつ直感的にキャプチャできます。
+ `{{ui.inputTextID.value}}`: 入力フィールドに指定された値を返します。
+ `{{ui.inputTextID.isValid}}`: 入力フィールドに指定された値の有効性を返します。

### テキスト
<a name="text-component"></a>

**Text** コンポーネントは、アプリケーション内でテキスト情報を表示するために使用されます。静的テキスト、動的値、または式から生成されたコンテンツを表示するために使用できます。

### テキスト領域
<a name="text-area-component"></a>

**テキストエリア**コンポーネントは、ユーザーからの複数行のテキスト入力をキャプチャするように設計されています。これにより、ユーザーが説明、メモ、コメントなどの長いテキストエントリを入力するための入力フィールド領域が大きくなります。
+ `{{ui.textAreaID.value}}`: テキスト領域に指定された値を返します。
+ `{{ui.textAreaID.isValid}}`: テキスト領域で指定された値の有効性を返します。

### E メール
<a name="email-component"></a>

E **メール**コンポーネントは、ユーザーの E メールアドレスをキャプチャするように設計された特殊な入力フィールドです。特定の検証ルールを適用して、入力した値が正しい E メール形式に従っていることを確認できます。
+ `{{ui.emailID.value}}`: E メール入力フィールドに指定された値を返します。
+ `{{ui.emailID.isValid}}`: E メール入力フィールドに指定された値の有効性を返します。

### [パスワード]
<a name="password-component"></a>

**パスワード**コンポーネントは、ユーザーがパスワードや PIN コードなどの機密情報を入力できるように特別に設計された入力フィールドです。プライバシーとセキュリティを維持するために、入力した文字をマスクします。
+ `{{ui.passwordID.value}}`: パスワード入力フィールドに指定された値を返します。
+ `{{ui.passwordID.isValid}}`: パスワード入力フィールドに指定された値の有効性を返します。

### 検索
<a name="search-component"></a>

**検索**コンポーネントは、検索クエリを実行したり、アプリケーション内の入力データ内に検索語を入力したりするための専用の入力フィールドをユーザーに提供します。
+ `{{ui.searchID.value}}`: 検索フィールドに指定された値を返します。

### 電話
<a name="phone-component"></a>

**電話**コンポーネントは、ユーザーの電話番号やその他の連絡先情報をキャプチャするためにカスタマイズされた入力フィールドです。特定の検証ルールとフォーマットオプションを含めることで、入力した値が正しい電話番号形式に準拠していることを確認できます。
+ `{{ui.phoneID.value}}`: 電話入力フィールドに指定された値を返します。
+ `{{ui.phoneID.isValid}}`: 電話入力フィールドに指定された値の有効性を返します。

### Number
<a name="number-component"></a>

**数値**コンポーネントは、ユーザーが数値を入力できるように特別に設計された入力フィールドです。検証ルールを適用して、入力された値が指定された範囲または形式の有効な数値であることを確認できます。
+ `{{ui.numberID.value}}`: 数値入力フィールドに指定された値を返します。
+ `{{ui.numberID.isValid}}`: 数値入力フィールドに指定された値の有効性を返します。

### 通貨
<a name="currency-component"></a>

**通貨**コンポーネントは、金額または金額を取得するための特殊な入力フィールドです。これには、通貨記号、小数点区切り文字を表示し、通貨入力に固有の検証ルールを適用する書式設定オプションを含めることができます。
+ `{{ui.currencyID.value}}`: 通貨入力フィールドに指定された値を返します。
+ `{{ui.currencyID.isValid}}`: 通貨入力フィールドに指定された値の有効性を返します。

### 詳細ペア
<a name="detail-pair-component"></a>

**詳細ペア**コンポーネントは、キーと値のペアまたは関連情報のペアを構造化された読み取り可能な形式で表示するために使用されます。一般的に、特定の項目またはエンティティに関連付けられた詳細またはメタデータを表示するために使用されます。

## 選択コンポーネント
<a name="selection-components"></a>

### [Switch] (スイッチ)
<a name="switch-component"></a>

**Switch** コンポーネントは、ユーザーがオン/オフ、true/false、有効/無効などの 2 つの状態またはオプションを切り替えることができるユーザーインターフェイスコントロールです。現在の状態を視覚的に表現し、ワンクリックまたはタップで変更できます。

### グループを切り替える
<a name="switch-group-component"></a>

**スイッチグループ**コンポーネントは、ユーザーが事前定義されたセットから 1 つ以上のオプションを選択できるようにする個々のスイッチコントロールのコレクションです。選択したオプションと選択されていないオプションを視覚的に表示できるため、ユーザーは利用可能な選択肢を理解し、操作しやすくなります。

#### グループ式のフィールドを切り替える
<a name="switch-group-expression-fields"></a>
+ `{{ui.switchGroupID.value}}`: アプリケーションユーザーが有効にした各スイッチの値を含む文字列の配列を返します。

### チェックボックスグループ
<a name="checkbox-group-component"></a>

**チェックボックスグループ**コンポーネントは、ユーザーにチェックボックスのグループを表示し、複数のオプションを同時に選択できるようにします。これは、オプションリストから 1 つ以上の項目を選択する機能をユーザーに提供する場合に便利です。

#### チェックボックスグループの式フィールド
<a name="checkbox-group-expression-fields"></a>
+ `{{ui.checkboxGroupID.value}}`: アプリケーションユーザーが選択した各チェックボックスの値を含む文字列の配列を返します。

### 無線グループ
<a name="radio-group-component"></a>

**無線グループ**コンポーネントは、ユーザーが複数の相互に排他的な選択肢から 1 つのオプションを選択できるようにする一連のラジオボタンです。これにより、一度に選択できるオプションは 1 つだけになり、ユーザーが選択できる明確であいまいな方法が提供されます。

#### 無線グループ式フィールド
<a name="radio-group-expression-fields"></a>

以下のフィールドは式で使用できます。
+ `{{ui.radioGroupID.value}}`: アプリユーザーが選択したラジオボタンの値を返します。

### 単一選択
<a name="single-select-component"></a>

**Single Select** コンポーネントは、ユーザーに 1 つの項目を選択できるオプションのリストを表示します。これは、カテゴリ、場所、設定の選択など、ユーザーが事前定義された一連のオプションから選択する必要があるシナリオでよく使用されます。

#### シングル選択式フィールド
<a name="single-select-expression-fields"></a>
+ `{{ui.singleSelectID.value}}`: アプリユーザーが選択したリスト項目の値を返します。

### マルチ選択
<a name="multi-select-component"></a>

**マルチ選択**コンポーネントは**シングル選択**コンポーネントに似ていますが、ユーザーは選択肢のリストから複数のオプションを同時に選択できます。これは、ユーザーが複数のタグ、関心、設定の選択など、事前定義された一連のオプションから複数の選択を行う必要がある場合に便利です。

#### 複数選択式のフィールド
<a name="multi-select-expression-fields"></a>
+ `{{ui.multiSelectID.value}}`: アプリユーザーが選択した各リスト項目の値を含む文字列の配列を返します。

## ボタンとナビゲーションコンポーネント
<a name="buttons-and-navigation-components"></a>

アプリケーションスタジオには、ユーザーがアクションをトリガーし、アプリケーション内を移動できるように、さまざまなボタンとナビゲーションコンポーネントが用意されています。

### ボタンコンポーネント
<a name="button-components"></a>

使用可能なボタンコンポーネントは次のとおりです。
+ ボタン
+ アウトラインされたボタン
+ アイコンボタン
+ テキストボタン

これらのボタンコンポーネントは、次の共通プロパティを共有します。

#### コンテンツ
<a name="button-content"></a>
+ **ボタンラベル**: ボタンに表示されるテキスト。

#### タイプ
<a name="button-type"></a>
+ **ボタン**: 標準ボタン。
+ **アウトライン**: アウトラインされたスタイルのボタン。
+ **アイコン**: アイコンの付いたボタン。
+ **テキスト**: テキストのみのボタン。

#### サイズ
<a name="button-size"></a>

ボタンのサイズ。指定できる値は `Small`、`Medium`、および `Large` です。

#### アイコン
<a name="button-icon"></a>

ボタンに表示するさまざまなアイコンから選択できます。
+ エンベロープが閉じられました
+ Bell
+ 個人
+ ハンバーガーメニュー
+ 検索
+ 丸で囲まれた情報
+ 歯車
+ シェブロン左
+ シェブロン右
+ 水平ドット
+ ごみ箱
+ 編集
+ チェック
+ 閉じる
+ ホーム
+ Plus

#### トリガ
<a name="button-triggers"></a>

ボタンをクリックすると、トリガーされる 1 つ以上のアクションを設定できます。使用可能なアクションタイプは次のとおりです。
+ **ベーシック**
  + コンポーネントアクションの実行: コンポーネント内で特定のアクションを実行します。
  + 移動: 別のページまたはビューに移動します。
  + データアクションの呼び出し: レコードの作成、更新、削除など、データ関連のアクションをトリガーします。
+ **アドバンスト**
  + JavaScript: カスタム JavaScript コードを実行します。
  + 自動化を呼び出す: 既存の自動化またはワークフローを開始します。

#### JavaScript アクションボタンのプロパティ
<a name="button-examples-javascript"></a>

ボタンをクリックしたときにカスタム JavaScript コードを実行する`JavaScript`アクションタイプを選択します。

##### ソースコード
<a name="button-source-code"></a>

`Source code` フィールドに、JavaScript 式または関数を入力できます。例えば、次のようになります。

```
return "Hello World";
```

これにより、ボタンがクリックされた`Hello World`ときに文字列が返されます。

##### 条件: 次の場合に を実行します。
<a name="button-run-if"></a>

JavaScript アクションを実行するかどうかを決定するブール式を指定することもできます。次の構文を使用します。

```
{{ui.textinput1.value !== ""}}
```

この例では、JavaScript アクションは、`textinput1`コンポーネントの値が空の文字列でない場合にのみ実行されます。

これらの高度なトリガーオプションを使用することで、アプリケーションのロジックやデータと直接統合する高度にカスタマイズされたボタン動作を作成できます。これにより、ボタンの組み込み機能を拡張し、特定の要件に合わせてユーザーエクスペリエンスを調整できます。

**注記**  
JavaScript アクションが期待どおりに機能していることを常に徹底的にテストします。

### ハイパーリンク
<a name="hyperlink-component"></a>

**ハイパーリンク**コンポーネントは、外部 URLs または内部アプリケーションルートに移動するためのクリック可能なリンクを提供します。

#### ハイパーリンクプロパティ
<a name="hyperlink-properties"></a>

##### コンテンツ
<a name="hyperlink-properties-content"></a>
+ **ハイパーリンクラベル**: ハイパーリンクラベルとして表示されるテキスト。

##### [URL]
<a name="hyperlink-properties-url"></a>

ハイパーリンクの送信先 URL。外部ウェブサイトまたは内部アプリケーションルートです。

##### トリガ
<a name="hyperlink-properties-triggers"></a>

ハイパーリンクをクリックすると、トリガーされるアクションを 1 つ以上設定できます。使用可能なアクションタイプは、ボタンコンポーネントのアクションタイプと同じです。

## 日付と時刻のコンポーネント
<a name="date-and-time-components"></a>

### 日付
<a name="date-component"></a>

**Date** コンポーネントを使用すると、ユーザーは日付を選択して入力できます。

**Date** コンポーネントは、、、 などの他のコンポーネントといくつかの共通プロパティを共有`Name``Source`します`Validation`。これらのプロパティの詳細については、「」を参照してください[一般的なコンポーネントプロパティ](#common-properties)。

Date ****コンポーネントには、共通のプロパティに加えて、次の特定のプロパティがあります。

#### 日付プロパティ
<a name="date-component-properties"></a>

##### 形式
<a name="date-component-properties-format"></a>
+ **YYYY/MM/DD**、**DD/MM/YYYY**、**YYYY/MM/DD**、**YYYY/DD/MM**、**MM/DD**、**DD/MM**: 日付を表示する形式。

##### 値
<a name="date-component-properties-value"></a>
+ **YYYY-MM-DD**: 日付値が内部に保存される形式。

##### 最小日付
<a name="date-component-properties-min-date"></a>
+ **YYYY-MM-DD**: 選択できる最小日付。
**注記**  
この値は の形式と一致する必要があります`YYYY-MM-DD`。

##### 最大日付
<a name="date-component-properties-max-date"></a>
+ **YYYY-MM-DD**: 選択できる最大日付。
**注記**  
この値は の形式と一致する必要があります`YYYY-MM-DD`。

##### カレンダータイプ
<a name="date-component-properties-calendar-type"></a>
+ **1 か月**、**2 か月**: 表示するカレンダー UI のタイプ。

##### 無効になった日付
<a name="date-component-properties-disabled-dates"></a>
+ **ソース**: 無効にする必要がある日付のデータソース。例: None、式。
+ **無効日付**: 無効にする日付を決定する式。次に例を示します。
  + `{{currentRow.column}}`: この式が評価する日付を無効にします。
  + `{{new Date(currentRow.dateColumn) < new Date("2023-01-01")}}`: 2023 年 1 月 1 日より前の日付を無効にします
  + `{{new Date(currentRow.dateColumn).getDay() === 0 || new Date(currentRow.dateColumn).getDay() === 6}}`: 週末を無効にします。

##### 行動
<a name="date-component-properties-behavior"></a>
+ **表示可能:** **Date** コンポーネントの可視性を決定する式。
+ **Disable if**: **Date** コンポーネントを無効にするかどうかを決定する式。

#### 検証
<a name="date-component-properties-validation"></a>

**検証**セクションでは、日付入力に追加のルールと制約を定義できます。これらの検証ルールを設定することで、ユーザーが入力した日付値がアプリケーションの特定の要件を満たしていることを確認できます。次のタイプの検証を追加できます。
+ **必須**: このトグルにより、ユーザーはフォームを送信する前に日付値を入力する必要があります。
+ **カスタム**: JavaScript 式を使用してカスタム検証ルールを作成できます。例えば、次のようになります。

  ```
  {{new Date(ui.dateInput.value) < new Date("2023-01-01")}}
  ```

  この式は、入力された日付が 2023 年 1 月 1 日より前であるかどうかをチェックします。条件が true の場合、検証は失敗します。

  検証が満たされない場合に表示されるカスタム検証メッセージを指定することもできます。

  ```
  "Validation not met. The date must be on or after January 1, 2023."
  ```

これらの検証ルールを設定することで、ユーザーが入力した日付値がアプリケーションの特定の要件を満たしていることを確認できます。

#### 式と例
<a name="date-component-expressions"></a>

**Date** コンポーネントには、次の式フィールドが用意されています。
+ `{{ui.dateID.value}}`: ユーザーが 形式で入力した日付値を返します`YYYY-MM-DD`。

### Time
<a name="time-component"></a>

**Time** コンポーネントを使用すると、ユーザーは時間値を選択して入力できます。**Time** コンポーネントのさまざまなプロパティを設定することで、選択可能な時間範囲の制限、特定の時間の無効化、コンポーネントの可視性とインタラクティブ性の制御など、アプリケーションの特定の要件を満たす時間入力フィールドを作成できます。

#### 時間プロパティ
<a name="time-component-properties"></a>

**Time** コンポーネントは、、、 などの他のコンポーネントといくつかの共通プロパティを共有`Name``Source`します`Validation`。これらのプロパティの詳細については、「」を参照してください[一般的なコンポーネントプロパティ](#common-properties)。

共通プロパティに加えて、**Time** コンポーネントには次の特定のプロパティがあります。

##### 時間間隔
<a name="time-component-properties-time-intervals"></a>
+ **5 分**、**10 分**、**15 分**、**20 分**、**25 分**、**30 分**、**60 分**: 時間の選択に使用できる間隔。

##### 値
<a name="time-component-properties-value"></a>
+ **HH:MM AA**: 時間値が内部に保存される形式。
**注記**  
この値は、 の形式と一致する必要があります`HH:MM AA`。

##### Placeholder
<a name="time-component-properties-placeholder"></a>
+ **カレンダー設定**: 時間フィールドが空の場合に表示されるプレースホルダーテキスト。

##### 最小時間
<a name="time-component-properties-min-time"></a>
+ **HH:MM AA**: 選択できる最小時間。
**注記**  
この値は、 の形式と一致する必要があります`HH:MM AA`。

##### 最大時間
<a name="time-component-properties-max-time"></a>
+ **HH:MM AA**: 選択できる最大時間。
**注記**  
この値は、 の形式と一致する必要があります`HH:MM AA`。

##### 無効時間
<a name="time-component-properties-disabled-times"></a>
+ **ソース**: 無効にする必要がある時間のデータソース (例: なし、式）。
+ **無効時間**: など、無効にする時間を決定する式`{{currentRow.column}}`。

##### 無効時間設定
<a name="disabled-times-configuration"></a>

**Disabled Times** セクションを使用して、選択できない時間値を指定できます。

##### ソース
<a name="disabled-times-configuration-source"></a>
+ **なし**: 時間が無効になることはありません。
+ **式**: JavaScript 式を使用して、 など、無効にする時間を決定できます`{{currentRow.column}}`。

##### 式の例:
<a name="disabled-times-configuration-expression-example"></a>

```
{{currentRow.column === "Lunch Break"}}
```

この式は、現在の行の「昼食休憩」列が true のときはいつでも無効にします。

これらの検証ルールと無効な時間式を設定することで、ユーザーが入力した時間値がアプリケーションの特定の要件を満たしていることを確認できます。

##### 行動
<a name="time-component-properties-behavior"></a>
+ **表示可能:** Time コンポーネントの可視性を決定する式。
+ **Disable if**: Time コンポーネントを無効にするかどうかを決定する式。

##### 検証
<a name="time-component-properties-validation"></a>
+ **必須**: フォームを送信する前にユーザーが時間値を入力するようにするトグル。
+ **カスタム**: JavaScript 式を使用してカスタム検証ルールを作成できます。

  **カスタム検証メッセージ**: カスタム検証が満たされない場合に表示されるメッセージ。

例えば、次のようになります。

```
{{ui.timeInput.value === "09:00 AM" || ui.timeInput.value === "09:30 AM"}}
```

この式は、入力された時刻が午前 9 時または午前 9 時 30 分であるかどうかをチェックします。条件が true の場合、検証は失敗します。

検証が満たされない場合に表示されるカスタム検証メッセージを指定することもできます。

```
Validation not met. The time must be 9:00 AM or 9:30 AM.
```

#### 式と例
<a name="time-component-expressions"></a>

Time コンポーネントには、次の式フィールドが用意されています。
+ `{{ui.timeID.value}}`: ユーザーが HH:MM AA 形式で入力した時間値を返します。

##### 例: 時間値
<a name="time-component-expressions-examples-time-value"></a>
+ `{{ui.timeID.value}}`: ユーザーが 形式で入力した時間値を返します`HH:MM AA`。

##### 例: 時間比較
<a name="time-component-expressions-examples-time-comparison"></a>
+ `{{ui.timeInput.value > "10:00 AM"}}`: 時刻値が午前 10:00 より大きいかどうかを確認します。
+ `{{ui.timeInput.value < "05:00 pM"}}`: 時刻値が午後 5 時未満かどうかを確認します。

### 日付範囲
<a name="date-range-component"></a>

**日付範囲**コンポーネントを使用すると、ユーザーは日付の範囲を選択して入力できます。日付範囲コンポーネントのさまざまなプロパティを設定することで、選択可能な日付範囲の制限、特定の日付の無効化、コンポーネントの可視性とインタラクティブ性の制御など、アプリケーションの特定の要件を満たす日付範囲入力フィールドを作成できます。

#### 日付範囲のプロパティ
<a name="date-range-component-properties"></a>

**日付範囲**コンポーネントは、、、 などの他のコンポーネントといくつかの共通プロパティを共有`Name``Source`します`Validation`。これらのプロパティの詳細については、「」を参照してください[一般的なコンポーネントプロパティ](#common-properties)。

共通のプロパティに加えて、**日付範囲**コンポーネントには次の特定のプロパティがあります。

##### 形式
<a name="date-range-component-properties-format"></a>
+ **MM/DD/YYYY**: 日付範囲を表示する形式。

##### [開始日]
<a name="date-range-component-properties-start-date"></a>
+ **YYYY-MM-DD**: 範囲の開始として選択できる最小日付。
**注記**  
この値は の形式と一致する必要があります`YYYY-MM-DD`。

##### [終了日]
<a name="date-range-component-properties-end-date"></a>
+ **YYYY-MM-DD**: 範囲の最後に選択できる最大日付。
**注記**  
この値は の形式と一致する必要があります`YYYY-MM-DD`。

##### Placeholder
<a name="date-range-component-properties-placeholder"></a>
+ **カレンダー設定**: 日付範囲フィールドが空の場合に表示されるプレースホルダーテキスト。

##### 最小日付
<a name="date-range-component-properties-min-date"></a>
+ **YYYY-MM-DD**: 選択できる最小日付。
**注記**  
この値は の形式と一致する必要があります`YYYY-MM-DD`。

##### 最大日付
<a name="date-range-component-properties-max-date"></a>
+ **YYYY-MM-DD**: 選択できる最大日付。
**注記**  
この値は の形式と一致する必要があります`YYYY-MM-DD`。

##### カレンダータイプ
<a name="date-range-component-properties-calendar-type"></a>
+ **1 か月**: 表示するカレンダー UI のタイプ。たとえば、1 か月です。
+ **2 か月**: 表示するカレンダー UI のタイプ。たとえば、2 か月です。

##### 選択した必須日数
<a name="date-range-component-properties-mandatory-days-selected"></a>
+ **0**: 日付範囲内で選択する必要がある必須日数。

##### 無効になった日付
<a name="date-range-component-properties-disabled-dates"></a>
+ **ソース**: 無効にする必要がある日付のデータソース (None、Expression、Entity、Automation など）。
+ **無効日付**: など、無効にする日付を決定する式`{{currentRow.column}}`。

##### 検証
<a name="date-range-component-properties-validation"></a>

**検証**セクションでは、日付範囲入力に追加のルールと制約を定義できます。

#### 式と例
<a name="date-range-component-expressions"></a>

**日付範囲**コンポーネントには、次の式フィールドが用意されています。
+ `{{ui.dateRangeID.startDate}}`: 選択した範囲の開始日を 形式で返します`YYYY-MM-DD`。
+ `{{ui.dateRangeID.endDate}}`: 選択した範囲の終了日を 形式で返します`YYYY-MM-DD`。

##### 例: 日付の差の計算
<a name="date-range-component-expressions-examples-calculating-date-difference"></a>
+ `{(new Date(ui.dateRangeID.endDate) - new Date(ui.dateRangeID.startDate)) / (1000 * 60 * 60 * 24)}}` 開始日から終了日までの日数を計算します。

##### 例: 日付範囲に基づく条件付き可視性
<a name="date-range-component-expressions-examples-conditional-visibility-based-on-date-range"></a>
+ `{{new Date(ui.dateRangeID.startDate) < new Date("2023-01-01") || new Date(ui.dateRangeID.endDate) > new Date("2023-12-31")}}` 選択した日付範囲が 2023 年の外側にあるかどうかを確認します。

##### 例: 現在の行データに基づいて日付を無効にする
<a name="date-range-component-expressions-examples-disabled-dates-based-on-current-row-data"></a>
+ `{{currentRow.isHoliday}}` 現在の行のisHoliday」列が true である日付を無効にします。
+ `{{new Date(currentRow.dateColumn) < new Date("2023-01-01")}}` 現在の行のdateColumn」に基づいて、2023 年 1 月 1 日より前の日付を無効にします。
+ `{{new Date(currentRow.dateColumn).getDay() === 0 || new Date(currentRow.dateColumn).getDay() === 6}}` 現在の行のdateColumn」に基づいて週末を無効にします。

##### カスタム検証
<a name="date-range-component-expressions-examples-custom-validation"></a>
+ `{{new Date(ui.dateRangeID.startDate) > new Date(ui.dateRangeID.endDate)}}` 開始日が終了日より後であるかどうかをチェックし、カスタム検証が失敗します。

## メディアコンポーネント
<a name="media-components"></a>

アプリケーションスタジオには、アプリケーション内にさまざまなメディアタイプを埋め込んで表示するためのコンポーネントがいくつか用意されています。

### iFrame 埋め込み
<a name="iframe-embed-component"></a>

**iFrame 埋め込み**コンポーネントを使用すると、iFrame を使用してアプリケーション内に外部ウェブコンテンツまたはアプリケーションを埋め込むことができます。

#### iFrame 埋め込みプロパティ
<a name="iframe-embed-properties"></a>

##### [URL]
<a name="iframe-embed-properties-iframe-url"></a>

**注記**  
このコンポーネントに表示されるメディアのソースは、アプリケーションのコンテンツセキュリティ設定で許可する必要があります。詳細については、「[アプリのコンテンツセキュリティ設定の表示または更新](app-content-security-settings-csp.md)」を参照してください。

埋め込む外部コンテンツまたはアプリケーションの URL。

##### [レイアウト]
<a name="iframe-embed-properties-iframe-layout"></a>
+ **幅**: パーセンテージ (%) または固定ピクセル値 (300px など) で指定された iFrame の幅。
+ **高さ**: パーセンテージ (%) または固定ピクセル値で指定された iFrame の高さ。

### S3 アップロード
<a name="s3-upload-component"></a>

**S3 アップロード**コンポーネントを使用すると、ユーザーは Amazon S3 バケットにファイルをアップロードできます。**S3 アップロード**コンポーネントを設定することで、ユーザーがアプリケーションの Amazon S3 ストレージにファイルを簡単にアップロードし、アップロードされたファイル情報をアプリケーションのロジックとユーザーインターフェイス内で活用できるようになります。

**注記**  
アプリケーションのファイルアップロードとストレージ要件をサポートするために、必要なアクセス許可と Amazon S3 バケット設定が設定されていることを確認してください。

#### S3 アップロードプロパティ
<a name="s3-upload-properties"></a>

##### S3 設定
<a name="s3-upload-component-properties-configuration"></a>
+ **コネクタ**: ファイルのアップロードに使用する事前設定済みの Amazon S3 コネクタを選択します。
+ **バケット**: ファイルをアップロードする Amazon S3 バケット。
+ **フォルダ**: ファイルを保存する Amazon S3 バケット内のフォルダ。
+ **ファイル名**: アップロードされたファイルの命名規則。

##### ファイルのアップロード設定
<a name="s3-upload-component-properties-file-upload-configuration"></a>
+ **ラベル**: ファイルのアップロード領域の上に表示されるラベルまたは手順。
+ **説明**: ファイルのアップロードに関する追加の手順または情報。
+ **ファイルタイプ**: アップロードできるファイルのタイプ。例: イメージ、ドキュメント、ビデオ。
+ **サイズ**: アップロードできる個々のファイルの最大サイズ。
+ **ボタンラベル**: ファイル選択ボタンに表示されるテキスト。
+ **ボタンスタイル**: ファイル選択ボタンのスタイル。例えば、概要や入力などです。
+ **ボタンサイズ**: ファイル選択ボタンのサイズ。

##### 検証
<a name="s3-upload-component-properties-validation"></a>
+ **ファイルの最大数**: 一度にアップロードできるファイルの最大数。
+ **最大ファイルサイズ**: 個々のファイルで許可される最大サイズ。

##### トリガ
<a name="s3-upload-component-properties-triggers"></a>
+ **成功時**: ファイルのアップロードが成功したときにトリガーされるアクション。
+ **失敗時**: ファイルのアップロードが失敗した場合にトリガーされるアクション。

#### S3 アップロード式フィールド
<a name="s3-upload-expression-fields"></a>

**S3 アップロード**コンポーネントには、次の式フィールドが用意されています。
+ `{{ui.s3uploadID.files}}`: アップロードされたファイルの配列を返します。
+ `{{ui.s3uploadID.files[0]?.size}}`: 指定されたインデックスのファイルのサイズを返します。
+ `{{ui.s3uploadID.files[0]?.type}}`: 指定されたインデックスのファイルのタイプを返します。
+ `{{ui.s3uploadID.files[0]?.nameOnly}}`: 指定されたインデックスで拡張子のサフィックスなしでファイルの名前を返します。
+ `{{ui.s3uploadID.files[0]?.nameWithExtension}}`: 指定されたインデックスに拡張子のサフィックスが付いたファイルの名前を返します。

#### 式と例
<a name="s3-upload-component-expression-examples"></a>

##### 例: アップロードされたファイルへのアクセス
<a name="s3-upload-component-expression-examples-accessing-uploaded-files"></a>
+ `{{ui.s3uploadID.files.length}}`: アップロードされたファイルの数を返します。
+ `{{ui.s3uploadID.files.map(f => f.name).join(', ')}}`: アップロードされたファイル名のカンマ区切りリストを返します。
+ `{{ui.s3uploadID.files.filter(f => f.type.startsWith('image/'))}}`: アップロードされたイメージファイルのみの配列を返します。

##### 例: ファイルのアップロードの検証
<a name="s3-upload-component-expression-examples-validating-file-uploads"></a>
+ `{{ui.s3uploadID.files.some(f => f.size > 5 * 1024 * 1024)}}`: アップロードされたファイルのサイズが 5 MB を超えているかどうかを確認します。
+ `{{ui.s3uploadID.files.every(f => f.type === 'image/png')}}`: アップロードされたすべてのファイルが PNG イメージかどうかを確認します。
+ `{{ui.s3uploadID.files.length > 3}}`: 3 つ以上のファイルがアップロードされているかどうかを確認します。

##### 例: アクションのトリガー
<a name="s3-upload-component-expression-examples-triggering-actions"></a>
+ `{{ui.s3uploadID.files.length > 0 ? 'Upload Successful' : 'No files uploaded'}}`: 少なくとも 1 つのファイルがアップロードされると、成功メッセージが表示されます。
+ `{{ui.s3uploadID.files.some(f => f.type.startsWith('video/')) ? triggerVideoProcessing() : null}}`: 動画ファイルがアップロードされると、動画処理の自動化をトリガーします。
+ `{{ui.s3uploadID.files.map(f => f.url)}}`: アップロードされたファイルの URLs を取得します。この URL は、ファイルを表示またはさらに処理するために使用できます。

これらの式を使用すると、アップロードされたファイルにアクセスし、ファイルのアップロードを検証し、ファイルのアップロード結果に基づいてアクションをトリガーできます。これらの式を使用することで、アプリケーションのファイルアップロード機能内でより動的でインテリジェントな動作を作成できます。

**注記**  
*s3uploadID* を **S3 アップロードコンポーネントの ID **に置き換えます。

### PDF ビューワーコンポーネント
<a name="pdf-viewer-component"></a>

**PDF ビューワー**コンポーネントを使用すると、ユーザーはアプリケーション内の PDF ドキュメントを表示して操作できます。App Studio は PDF ソースに対してこれらのさまざまな入力タイプをサポートしています。**PDF ビューワー**コンポーネントは、静的 URL、インラインデータ URI、動的に生成されたコンテンツのいずれからでも、PDF ドキュメントをアプリケーションに統合する方法に柔軟性を提供します。

#### PDF ビューワーのプロパティ
<a name="pdf-viewer-properties"></a>

##### ソース
<a name="pdf-viewer-properties-source"></a>

**注記**  
このコンポーネントに表示されるメディアのソースは、アプリケーションのコンテンツセキュリティ設定で許可する必要があります。詳細については、「[アプリのコンテンツセキュリティ設定の表示または更新](app-content-security-settings-csp.md)」を参照してください。

PDF ドキュメントのソース。式、エンティティ、URL、またはオートメーションを使用できます。

##### 式
<a name="pdf-viewer-properties-source-expression"></a>

式を使用して PDF ソースを動的に生成します。

##### エンティティ
<a name="pdf-viewer-properties-source-entity"></a>

**PDF ビューワー**コンポーネントを PDF ドキュメントを含むデータエンティティに接続します。

##### [URL]
<a name="pdf-viewer-properties-source-url"></a>

PDF ドキュメントの URL を指定します。

##### [URL]
<a name="pdf-viewer-properties-source-url-example"></a>

表示する PDF ドキュメントを指す URL を入力できます。これは、パブリックウェブ URL でも、独自のアプリケーション内の URL でもかまいません。

例: `https://example.com/document.pdf`

##### データ URI
<a name="pdf-viewer-properties-source-url-data-uri"></a>

**データ URI **は、アプリケーション内に小さなデータファイル (画像や PDFs) をインラインで含めるコンパクトな方法です。PDF ドキュメントは base64 文字列としてエンコードされ、コンポーネントの設定に直接含まれます。

##### Blob または ArrayBuffer
<a name="pdf-viewer-properties-source-url-blob-or-arraybuffer"></a>

PDF ドキュメントを Blob または ArrayBuffer オブジェクトとして提供することもできます。これにより、アプリケーション内のさまざまなソースから PDF データを動的に生成または取得できます。

##### オートメーション
<a name="pdf-viewer-properties-source-automation"></a>

**PDF ビューワー**コンポーネントを PDF ドキュメントを提供するオートメーションに接続します。

##### アクション
<a name="pdf-viewer-properties-actions"></a>
+ **ダウンロード**: ユーザーが PDF ドキュメントをダウンロードできるようにするボタンまたはリンクを追加します。

##### [レイアウト]
<a name="pdf-viewer-properties-layout"></a>
+ **幅**: PDF ビューワーの幅。パーセンテージ (%) または固定ピクセル値 (600px など) で指定します。
+ **高さ**: 固定ピクセル値として指定された PDF ビューワーの高さ。

### イメージビューワー
<a name="image-viewer-component"></a>

**イメージビューワー**コンポーネントを使用すると、ユーザーはアプリケーション内のイメージファイルを表示して操作できます。

#### イメージビューワーのプロパティ
<a name="image-viewer-properties"></a>

##### ソース
<a name="image-viewer-properties-source"></a>

**注記**  
このコンポーネントに表示されるメディアのソースは、アプリケーションのコンテンツセキュリティ設定で許可する必要があります。詳細については、「[アプリのコンテンツセキュリティ設定の表示または更新](app-content-security-settings-csp.md)」を参照してください。
+ **Entity**: Image **Viewer **コンポーネントを、イメージファイルを含むデータエンティティに接続します。
+ **URL**: イメージファイルの URL を指定します。
+ **式**: 式を使用してイメージソースを動的に生成します。
+ **自動化**: **イメージビューワー**コンポーネントを、イメージファイルを提供する自動化に接続します。

##### Alt テキスト
<a name="image-viewer-properties-alt-text"></a>

アクセシビリティの目的で使用されるイメージの代替テキストの説明。

##### [レイアウト]
<a name="image-viewer-properties-layout"></a>
+ **イメージフィット**: イメージのサイズを変更してコンポーネント内に表示する方法を決定します。たとえば、`Contain`、`Cover`、または `Fill` などです。
+ **幅**: パーセンテージ (%) または固定ピクセル値 (300px など) で指定された**イメージビューワー**コンポーネントの幅。
+ **高さ**: 固定ピクセル値として指定された**イメージビューワー**コンポーネントの高さ。
+ **背景**: イメージ**ビューワー**コンポーネントの背景色またはイメージを設定できます。