本文為英文版的機器翻譯版本，如內容有任何歧義或不一致之處，概以英文版為準。

# 元件參考
<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`、 `Secondary value`或 `Value`，取決於元件類型和用途。

`Primary value` 欄位通常用於定義應在元件內顯著顯示的主要值、資料點或內容。

可用時， `Secondary value` 欄位會用來顯示額外或支援值，或是與主要值一起顯示的資訊。

`Value` 欄位可讓您指定應該顯示在元件中的值或表達式。

這些欄位同時支援靜態文字輸入和動態表達式。透過使用表達式，您可以參考應用程式中其他元件、資料來源或變數的資料，以啟用動態和資料驅動的內容顯示。

#### 表達式的語法
<a name="common-properties-component-values-expression-syntax"></a>

在這些欄位中輸入表達式的語法遵循一致的模式：

```
{{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>

如果您在標籤欄位中輸入文字 "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}}
```

### 預留位置
<a name="common-properties-placeholder"></a>

預留位置屬性可讓您指定在元件為空時顯示在元件中的提示或指引文字。這可協助使用者了解預期的輸入格式，或提供額外的內容。

您可以使用靜態文字和表達式來定義預留位置。

#### 範例：靜態文字
<a name="placeholder-static-example"></a>

如果您在`Enter your name`**預留位置**欄位中輸入文字，元件會顯示`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` 這些範例會從選取的帳戶提取資料，以顯示相關提示，讓銀行客戶的界面直覺化。

##### 範例：電子商務
<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>

選取**實體**做為資料來源可讓您將元件連接至應用程式中現有的資料實體或模型。當您有定義明確的資料結構或結構描述，而您想要在整個應用程式中利用時，此功能非常有用。

何時使用實體資料來源：
+ 當您的資料模型或實體包含您要在元件中顯示的資訊時 （例如，具有 "Name"、"Description"、"Price" 等欄位的 "Products" 實體）。
+ 當您需要動態從資料庫、API 或其他外部資料來源擷取資料，並將其呈現在元件中時。
+ 當您想要利用應用程式資料模型中定義的關係和關聯時。

##### 選取實體上的查詢
<a name="common-properties-source-selecting-entity-query"></a>

有時，您可能想要將元件連接到從實體擷取資料的特定查詢，而不是整個實體。在實體資料來源中，您可以選擇從現有查詢中選擇或建立新的查詢。

透過選取查詢，您可以：
+ 根據特定條件篩選元件中顯示的資料。
+ 將參數傳遞至查詢，以動態篩選或排序資料。
+ 利用查詢中定義的複雜聯結、彙總或其他資料處理技術。

例如，如果您的應用程式中有一個`Customers`實體，其中包含 `Name`、 `Email`和 等欄位`PhoneNumber`。您可以將資料表元件連接到此實體，然後選擇根據客戶狀態篩選的預先定義`ActiveCustomers`資料動作。這可讓您在資料表中僅顯示作用中的客戶，而不是整個客戶資料庫。

##### 將參數新增至實體資料來源
<a name="common-properties-source-adding-entity-parameters"></a>

使用實體做為資料來源時，您也可以將參數新增至元件。這些參數可用來篩選、排序或轉換元件中顯示的資料。

例如，如果您的`Products`實體具有 `Name`、`Price`、 `Description`和 等欄位`Category`。您可以將名為 的參數新增至顯示產品清單的`category`資料表元件。當使用者從下拉式清單中選取類別時，資料表會自動更新，以使用資料動作中的`{{params.category}}`表達式，僅顯示屬於所選類別的產品。

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

選取**表達式**做為資料來源，以輸入自訂表達式或計算，以動態產生元件的資料。當您需要執行轉換、合併來自多個來源的資料，或根據特定商業邏輯產生資料時，這會很有用。

何時使用**表達式**資料來源：
+ 當您需要計算或衍生資料模型中未直接提供的資料時 （例如，根據數量和價格計算總訂單值）。
+ 當您想要結合來自多個實體或資料來源的資料來建立複合檢視時 （例如，顯示客戶的訂單歷史記錄及其聯絡資訊）。
+ 當您需要根據特定規則或條件產生資料時 （例如，根據使用者的瀏覽歷史記錄顯示「建議產品」清單）。

例如，如果您的*指標*元件需要顯示當月的總收入，您可以使用如下的表達式來計算和顯示每月收入：

```
{{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>

選取**自動化**做為資料來源，將元件連接到應用程式中現有的自動化或工作流程。當在特定程序或工作流程中產生或更新元件的資料或功能時，這很有用。

何時使用**自動化**資料來源：
+ 當元件中顯示的資料是特定自動化或工作流程的結果時 （例如，在核准程序中更新的「待核准」資料表）。
+ 當您想要根據自動化中的事件或條件觸發元件的動作或更新時 （例如，使用 SKU 的最新銷售數字更新指標）。
+ 當您需要透過自動化將元件與應用程式中的其他服務或系統整合時 （例如，從第三方 API 擷取資料並將其顯示在資料表中）。

例如，如果您有引導使用者完成任務應用程式程序的步驟流程元件。步驟流程元件可以連接到處理任務應用程式提交、背景檢查和產生優惠的自動化。隨著自動化進行這些步驟，步驟流程元件可以動態更新，以反映應用程式的目前狀態。

透過仔細為每個元件選擇適當的資料來源，您可以確保應用程式的使用者介面是由正確的資料和邏輯提供支援，為您的使用者提供無縫且引人入勝的體驗。

### 如果 可見
<a name="visible-if"></a>

使用 **Visible if** 屬性，根據特定條件或資料值顯示或隱藏元件或元素。當您想要動態控制應用程式使用者介面特定部分的可見性時，此功能非常有用。

屬性使用以下語法**時可見**：

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

或

```
{{expression}}
```

其中*運算式*是評估為 `true`或 的布林運算式`false`。

如果表達式評估為 `true`，則會顯示元件。如果表達式評估為 `false`，則會隱藏元件。表達式可以參考應用程式中其他元件、資料來源或變數的值。

#### 如果表達式範例可見
<a name="visible-if-examples"></a>

##### 範例：根據電子郵件輸入顯示或隱藏密碼輸入欄位
<a name="visible-if-example-password-email"></a>

假設您有一個包含電子郵件輸入欄位和密碼輸入欄位的登入表單。只有在使用者已輸入電子郵件地址時，才想要顯示密碼輸入欄位。如果表達式為 ，您可以使用下列可見：

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

此表達式會檢查`emailInput`元件的值是否不是空字串。如果使用者已輸入電子郵件地址，表達式會評估為 `true`，且密碼輸入欄位會顯示。如果電子郵件欄位為空白，表達式會評估為 `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** 屬性來實現的，該屬性接受布林表達式來決定應該啟用或停用元件。

**停用，如果** 屬性使用以下語法：

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

或

```
{{expression}}
```

#### 如果表達式範例已停用
<a name="disabled-if-examples"></a>

##### 範例：根據表單驗證停用提交按鈕
<a name="disabled-if-example-disable-submit-button"></a>

如果您有包含多個輸入欄位的表單，而且您想要停用提交按鈕，直到正確填寫所有必要欄位，您可以使用下列**已停用 如果**表達式：

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

此表達式會檢查是否有任何必要的輸入欄位 (`nameInput`、`emailInput`、`passwordInput`) 是空的。如果任何欄位為空白，表達式會評估為 `true`，且提交按鈕將會停用。填寫所有必要欄位後，表達式會評估為 `false`，並啟用提交按鈕。

透過在**可見 **和**已停用 ff** 屬性中使用這些類型的條件式表達式，您可以建立動態和回應式使用者介面來適應使用者輸入，為應用程式的使用者提供更簡化和相關的體驗。

其中*運算式*是評估為 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>

配置屬性會決定元件中的內容或元素如何配置和定位。有多種配置選項可用，每個選項都以圖示表示：
+ **資料欄配置**：此配置會垂直排列單一資料欄中的內容或元素。
+ **兩欄配置**：此配置會將元件分成兩個等寬欄，讓您並排放置內容或元素。
+ **資料列配置**：此配置會在單一資料列中水平排列內容或元素。

##### 方向
<a name="container-layouts-orientation"></a>
+ **水平**：此配置會在單一資料列中水平排列內容或元素。
+ **垂直**：此配置會在單一欄中垂直排列內容或元素。
+ **內嵌包裝**：此配置會水平排列內容或元素，但如果元素超過可用寬度，則會包裝到下一行。

##### Alignment
<a name="container-layouts-alignment"></a>
+ **左**：將內容或元素對齊元件的左側。
+ **中心**：在元件內水平置中內容或元素。
+ **右側**：將內容或元素對齊元件的右側。

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

**Width** 屬性指定元件的水平大小。您可以輸入介於 0% 到 100% 之間的百分比值，代表元件相對於其父容器或可用空間的寬度。

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

**高度**屬性指定元件的垂直大小。「自動」值會根據元件的內容或可用空間自動調整元件的高度。

##### 之間的空間
<a name="container-layouts-space-between"></a>

屬性**之間的空間**決定元件內內容或元素之間的間距或間隙。您可以選擇從 0px （無間距） 到 64px 的值，增量為 4px （例如 4px、8px、12px 等）。

##### 填補
<a name="container-layouts-padding"></a>

**填補**屬性控制內容或元素與元件邊緣之間的空間。您可以選擇從 0px （無填補） 到 64px 的值，增量為 4px （例如 4px、8px、12px 等）。

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

**背景**會啟用或停用元件的背景顏色或樣式。

這些配置屬性提供在元件內配置和定位內容的彈性，以及控制元件本身的大小、間距和視覺化外觀。

## 資料元件
<a name="data-components"></a>

本節涵蓋應用程式工作室中可用的各種資料元件，包括**資料表**、**詳細資訊**、**指標**、**表單**和**延伸器**元件。這些元件用於顯示、收集和操作應用程式中的資料。

### 資料表
<a name="table-component"></a>

**資料表**元件會以表格格式顯示資料，其中包含資料列和資料欄。它用於以有條不紊且easy-to-read的方式呈現結構化資料，例如來自資料庫的項目或記錄清單。

#### 資料表屬性
<a name="table-component-properties"></a>

**資料表**元件與其他元件共用數個常見屬性，例如 `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>

在**動作**區段中，設定下列屬性：
+ **動作位置**：啟用**向右固定**時，任何新增的動作一律會顯示在資料表右側，無論使用者捲動為何。
+ **動作**：將動作按鈕新增至資料表。您可以設定這些按鈕在使用者點按時執行指定的動作，例如：
  + 執行元件動作
  + 導覽至不同的頁面
  + 叫用資料動作
  + 執行自訂 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 資料表 *1* 來參考資料表中目前選取資料列之特定資料欄的值。將 *table1* 取代為資料表元件的實際 ID，並將 *columnName* 取代為您要參考的欄名稱。

範例：
+ `{{ui.ordersTable.selectedRow["totalAmount"]}}` 使用 ID *ordersTable* 顯示資料表中目前選取資料列的總金額。
+ `{{ui.customersTable.selectedRow["email"]}}` 使用 ID *customersTable* 顯示資料表中目前選取資料列的電子郵件地址。
+ `{{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 + ')' }}` 建立新的資料欄，顯示每一列的完整名稱和電子郵件地址。

##### 範例：自訂資料欄顯示值：
<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}}`至自動化，以記錄檢視訂單詳細資訊的員工。

透過利用這些表達式欄位和資料列層級動作功能，您可以建立高度自訂的互動式資料表，根據您的特定需求顯示和操作資料。此外，您可以連接資料列層級動作與應用程式中的其他元件或自動化，實現無縫的資料流程和功能。

### 詳細資訊
<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"]}}`：此表達式可讓您參考資料陣列中第一個項目 （索引 0) 名為 "colName" 的資料欄值，該資料陣列連接到 ID 為 "details" **的詳細資訊**元件。將 "colName" 取代為您要參考的資料欄的實際名稱。例如，下列表達式會顯示連線至「詳細資訊」元件的資料陣列中第一個項目的「customerName」資料欄的值：

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

**注意**  
當 **Detail** 元件與所參考的資料表位於相同頁面上，而且您想要在 **Detail** 元件中顯示資料表第一列的資料時，此表達式很有用。

##### 範例：條件式轉譯
<a name="detail-component-properties-examples-conditional-rendering"></a>

`{{ui.table1.selectedRow["colName"]}}`：如果 ID *資料表 1* 的資料表中選取的資料列具有名為 *colName* 的資料欄，則此表達式會傳回 true。它可用來根據資料表選取的資料列是否為空白，有條件顯示或隱藏 **Detail** 元件。

範例：

您可以在 **Detail** 元件的 `Visible if` 屬性中使用此表達式，根據資料表中選取的資料列來有條件地顯示或隱藏該表達式。

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

如果此表達式評估為 true (*資料表 1* 元件中選取的資料列具有 *customerName* 資料欄的值），則會顯示**詳細資訊**元件。如果表達式評估為 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， 會檢查元件的值是否等於字串「黃色」。
+ `? "🟡"`：如果第二個條件為 true， 會顯示黃色方形表情符號。
+ `: ui.detail1.data?.[0]?.CustomerStatus`：如果兩個條件都是 false，則會參考連線至 ID 為 "detail1" 之 Detail 元件的資料陣列中第一個項目的 "CustomerStatus" 值。

此表達式可用來根據 **Detail** 元件中的元件或資料欄位的值顯示表情符號或特定值。

### 指標
<a name="metrics-component"></a>

**指標**元件是一種視覺化元素，以類似卡片的格式顯示關鍵指標或資料點。它旨在提供簡潔且視覺上吸引人的方式，以呈現重要資訊或效能指標。

#### 指標屬性
<a name="metrics-properties"></a>

**指標**元件與其他元件共用數個共同屬性，例如 `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}}`
+ **Color Bbar**：已啟用

##### 範例：客戶滿意度趨勢
<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 *指標 1*。

範例： `{{ui.salesMetrics.primaryValue}}`會顯示 *salesMetrics* **指標**元件的主要值。

##### 範例：參考次要值
<a name="metrics-expression-examples-referencing-secondary-value"></a>

`{{ui.metric1.secondaryValue}}`：此表達式可讓您參考**指標**元件的次要值，以及相同頁面中其他元件或表達式的 ID *指標 1*。

範例： `{{ui.revenueMetrics.secondaryValue}}`會顯示 *revenueMetrics* **指標**元件的次要值。

##### 範例：參考資料
<a name="metrics-expression-examples-referencing-data"></a>

`{{ui.metric1.data}}`：此表達式可讓您使用相同頁面中其他元件或表達式的 ID *指標 1* 來參考**指標**元件的資料。

範例： `{{ui.kpiMetrics.data}}`會參考連線至 *kpiMetrics* **指標**元件的資料。

##### 範例：顯示特定資料值：
<a name="metrics-expression-examples-displaying-specific-data-values"></a>

`{{ui.metric1.data?.[0]?.id}}`：此表達式是如何使用 **** ID *指標 1* 顯示資料中特定資訊片段的範例。當您想要顯示資料中第一個項目的特定屬性時，此功能非常有用。

明細：
+ `ui.metric1`：參考 ID *指標 1* 的**指標**元件。
+ `data`：參考連接到該元件的資訊或資料集。
+ `?.[0]`：表示該資料集的第一個項目或項目。
+ `?.id`：顯示第一個項目或項目的 *ID* 值或識別符。

範例： `{{ui.orderMetrics.data?.[0]?.orderId}}` 會顯示連線至 orderMetrics 指標元件的資料中第一個項目的 *orderId* 值。 *orderMetrics* **** 

##### 範例：顯示資料長度
<a name="metrics-expression-examples-displaying-data-length"></a>

`{{ui.metric1.data?.length}}`：此表達式示範如何使用 ID *指標 1*，在連線至**指標**元件的資料中顯示長度 （項目數量）。當您想要顯示資料中的項目數量時，此功能非常有用。

明細：
+ `ui.metric1.data`：參考連接到元件的資料集。
+ `?.length`：存取該資料集中的項目或項目總數或數量。

範例： `{{ui.productMetrics.data?.length}}`會顯示連線至 *productMetrics* **指標**元件的資料中的項目數量。

### 延伸器
<a name="repeater-component"></a>

**延伸器**元件是一種動態元件，可讓您根據提供的資料來源產生和顯示元素集合。它旨在促進在應用程式的使用者介面中建立清單、網格或重複模式。幾個範例使用案例包括：
+ 顯示帳戶中每個使用者的卡片
+ 顯示包含影像和按鈕的產品清單，以將其新增至購物車
+ 顯示使用者可存取的檔案清單

**延伸器**元件會區分自己與具有豐富內容的**資料表**元件。**資料表**元件具有嚴格的資料列和資料欄格式。**延伸器**可以更靈活地顯示您的資料。

#### 延伸器屬性
<a name="repeater-component-properties"></a>

**延伸器**元件與其他元件共用數個常見屬性，例如 `Name`、 `Source`和 `Actions`。如需這些屬性的詳細資訊，請參閱 [常見元件屬性](#common-properties)。

除了常見的屬性之外，**延伸器**元件還具有下列其他屬性和組態選項。

#### 項目範本
<a name="repeater-component-properties-item-template"></a>

**項目範本**是一個容器，您可以在其中定義要針對資料來源中每個項目重複的結構和元件。您可以將其他元件拖放到此容器中，例如**文字**、**影像**、**按鈕**，或是代表每個項目所需的任何其他元件。

在**項目範本**中，您可以使用 格式的表達式來參考目前項目的屬性或值`{{currentItem.propertyName}}`。

例如，如果您的資料來源包含 `itemName` 屬性，您可以使用 `{{currentItem.itemName}}` 來顯示目前項目的項目名稱 (s)。

#### 版面配置
<a name="repeater-component-properties-layout"></a>

**配置**區段可讓您設定延伸器元件中重複元素的配置。

##### 方向
<a name="repeater-component-properties-orientation"></a>
+ **清單**：在單一資料欄中垂直排列重複的元素。
+ **網格**：使用多個資料欄在網格配置中配置重複的元素。

##### 每頁的資料列數
<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>
+ **來源**：選取*產品*實體做為資料來源。
+ **項目範本**：新增**容器**元件，其中包含**文字**元件以顯示產品名稱 (`{{currentItem.productName}}`) 和**影像**元件以顯示產品影像 (`{{currentItem.productImageUrl}}`)。
+ **配置**：將 設定為 `Rows per Page`，`Orientation``List`並視需要調整 。

##### 範例：產生使用者頭像的網格
<a name="repeater-component-properties-expressions-examples-generating-user-avatar-grid"></a>
+ **來源**：使用表達式來產生使用者資料的陣列 （例如 `[{name: 'John', avatarUrl: '...'}, {...}, {...}]`)。
+ **項目範本**：新增**映像**元件，並將其`Source`屬性設定為 `{{currentItem.avatarUrl}}`。
+ **配置**：將 `Orientation`設定為 `Grid`，指定 `Columns`和 的數量`Rows per Page`，並視需要調整 `Space Between`和 `Padding`。

透過使用 `Repeater`元件，您可以建立動態和資料驅動的使用者介面，簡化渲染元素集合的程序，並減少手動重複或硬式編碼的需求。

### 表格
<a name="form-component"></a>

Form 元件旨在擷取使用者輸入，並促進應用程式中的資料輸入任務。它提供結構化配置，可顯示輸入欄位、下拉式清單、核取方塊和其他表單控制項，允許使用者無縫輸入或修改資料。您可以在表單元件內巢狀化其他元件，例如資料表。

#### 表單屬性
<a name="form-component-properties"></a>

**表單**元件與其他元件共用數個常見的屬性，例如 `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>

如同其他元件，您可以使用表達式來參考和顯示**表單**元件中的資料。例如：
+ `{{ui.userForm.data.email}}`：參考從資料來源連線至 ID 為 的 **Form** 元件的 `email` 欄位值`userForm`。

**注意**  
[常見元件屬性](#common-properties) 如需常見屬性的更多表達式範例，請參閱 。

透過設定這些屬性並利用表達式，您可以建立自訂的互動式表單元件，無縫整合應用程式的資料來源和邏輯。這些元件可用來擷取使用者輸入、顯示預先填入的資料，以及根據表單提交或使用者互動觸發動作。

### Stepflow
<a name="stepflow-component"></a>

**Stepflow** 元件旨在引導使用者完成應用程式中的多步驟程序或工作流程。它提供結構化且直覺式的界面來呈現一系列的步驟，每個步驟都有自己的一組輸入、驗證和動作。

Stepflow 元件與其他元件共用數個常見的屬性，例如 `Name`、 `Source`和 `Actions`。如需這些屬性的詳細資訊，請參閱 [常見元件屬性](#common-properties)。

**Stepflow** 元件具有其他屬性和組態選項，例如 `Step Navigation`、 `Validation`和 `Expressions`。

## AI 元件
<a name="ai-components"></a>

### Gen 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>

**文字**元件用於顯示應用程式中的文字資訊。它可用來顯示靜態文字、動態值或從表達式產生的內容。

### 文字區域
<a name="text-area-component"></a>

**文字區域**元件旨在擷取使用者的多行文字輸入。它提供較大的輸入欄位區域，讓使用者輸入較長的文字項目，例如描述、備註或註解。
+ `{{ui.textAreaID.value}}`：傳回文字區域中提供的值。
+ `{{ui.textAreaID.isValid}}`：傳回文字區域中所提供值的有效性。

### Email
<a name="email-component"></a>

**電子郵件**元件是專門的輸入欄位，旨在從使用者擷取電子郵件地址。它可以強制執行特定的驗證規則，以確保輸入的值遵循正確的電子郵件格式。
+ `{{ui.emailID.value}}`：傳回電子郵件輸入欄位中提供的值。
+ `{{ui.emailID.isValid}}`：傳回電子郵件輸入欄位中所提供值的有效性。

### 密碼
<a name="password-component"></a>

**密碼**元件是專門為使用者設計的輸入欄位，用於輸入敏感資訊，例如密碼或 PIN 碼。它會遮罩輸入的字元，以維護隱私權和安全性。
+ `{{ui.passwordID.value}}`：傳回密碼輸入欄位中提供的值。
+ `{{ui.passwordID.isValid}}`：傳回密碼輸入欄位中所提供值的有效性。

### 搜尋
<a name="search-component"></a>

**搜尋**元件為使用者提供專用輸入欄位，以執行搜尋查詢或在應用程式中填入的資料內輸入搜尋詞彙。
+ `{{ui.searchID.value}}`：傳回搜尋欄位中提供的值。

### Phone
<a name="phone-component"></a>

**電話**元件是一種輸入欄位，專為從使用者擷取電話號碼或其他聯絡資訊而量身打造。它可以包含特定的驗證規則和格式選項，以確保輸入的值符合正確的電話號碼格式。
+ `{{ui.phoneID.value}}`：傳回電話輸入欄位中提供的值。
+ `{{ui.phoneID.isValid}}`：傳回電話輸入欄位中所提供值的有效性。

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

**Number** 元件是專為使用者輸入數值而設計的輸入欄位。它可以強制執行驗證規則，以確保輸入的值是指定範圍或格式內的有效數字。
+ `{{ui.numberID.value}}`：傳回數字輸入欄位中提供的值。
+ `{{ui.numberID.isValid}}`：傳回數字輸入欄位中所提供值的有效性。

### Currency
<a name="currency-component"></a>

**貨幣**元件是專門的輸入欄位，用於擷取貨幣值或金額。它可以包含格式選項，以顯示貨幣符號、小數分隔符號，以及強制執行貨幣輸入特定的驗證規則。
+ `{{ui.currencyID.value}}`：傳回貨幣輸入欄位中提供的值。
+ `{{ui.currencyID.isValid}}`：傳回貨幣輸入欄位中所提供值的有效性。

### 詳細資訊對
<a name="detail-pair-component"></a>

**詳細資訊對**元件用於以結構化且可讀取的格式顯示鍵值對或相關資訊對。它通常用於呈現與特定項目或實體相關聯的詳細資訊或中繼資料。

## 選擇元件
<a name="selection-components"></a>

### 交換器
<a name="switch-component"></a>

**切換**元件是一種使用者介面控制項，可讓使用者在兩種狀態或選項之間切換，例如開/關、 true/false 或 enabled/disabled。它提供目前狀態的視覺化呈現，並允許使用者按一下或點選即可進行變更。

### 切換群組
<a name="switch-group-component"></a>

**切換群組**元件是個別切換控制項的集合，可讓使用者從預先定義的集合中選取一或多個選項。它提供已選取和未選取選項的視覺化呈現，讓使用者更容易了解可用的選項並與之互動。

#### 切換群組表達式欄位
<a name="switch-group-expression-fields"></a>
+ `{{ui.switchGroupID.value}}`：傳回字串陣列，其中包含應用程式使用者啟用的每個交換器的值。

### 核取方塊群組
<a name="checkbox-group-component"></a>

**核取方塊群組**元件會向使用者顯示一組核取方塊，讓他們可以同時選取多個選項。當您想要讓使用者能夠從選項清單中選擇一或多個項目時，此功能非常有用。

#### 核取方塊群組表達式欄位
<a name="checkbox-group-expression-fields"></a>
+ `{{ui.checkboxGroupID.value}}`：傳回字串陣列，其中包含應用程式使用者所選取之每個核取方塊的值。

### 無線電群組
<a name="radio-group-component"></a>

**無線電群組**元件是一組選項按鈕，可讓使用者從多個互斥選項中選取單一選項。它可確保一次只能選擇一個選項，為使用者提供清晰且明確的方式進行選擇。

#### 無線電群組表達式欄位
<a name="radio-group-expression-fields"></a>

下列欄位可用於表達式。
+ `{{ui.radioGroupID.value}}`：傳回應用程式使用者所選取選項按鈕的值。

### 單一選取
<a name="single-select-component"></a>

**單一選取**元件為使用者提供選項清單，他們可以從中選取單一項目。它通常用於使用者需要從預先定義的一組選項中進行選擇的情況，例如選取類別、位置或偏好設定。

#### 單一選取表達式欄位
<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>
+ **按鈕標籤**：要在按鈕上顯示的文字。

#### Type
<a name="button-type"></a>
+ **按鈕**：標準按鈕。
+ **概述**：概述樣式的按鈕。
+ **圖示**：具有圖示的按鈕。
+ **文字**：純文字按鈕。

#### 大小
<a name="button-size"></a>

按鈕的大小。可能值為 `Small`、`Medium` 及 `Large`。

#### 圖示
<a name="button-icon"></a>

您可以從要顯示在按鈕上的各種圖示中選取，包括：
+ 信封已關閉
+ 鐘
+ 個人
+ 漢堡選單
+ 搜尋
+ Info Circled
+ 齒輪
+ 左年紋
+ Chevron 右側
+ 水平點
+ 垃圾桶
+ 編輯
+ Check
+ Close (關閉)
+ 首頁
+ Plus

#### 觸發
<a name="button-triggers"></a>

按一下按鈕時，您可以設定要觸發的一或多個動作。可用的動作類型為：
+ **基本**
  + 執行元件動作：在元件中執行特定動作。
  + 導覽：導覽至另一個頁面或檢視。
  + 叫用資料動作：觸發與資料相關的動作，例如建立、更新或刪除記錄。
+ **Advanced (進階)**
  + 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 !== ""}}
```

在此範例中，只有在`textinput1`元件的值不是空字串時，才會執行 JavaScript 動作。

透過使用這些進階觸發選項，您可以建立高度自訂的按鈕行為，直接與應用程式的邏輯和資料整合。這可讓您擴展按鈕的內建功能，並根據您的特定需求量身打造使用者體驗。

**注意**  
請務必徹底測試您的 JavaScript 動作，以確保它們如預期般運作。

### 超連結
<a name="hyperlink-component"></a>

**Hyperlink** 元件提供可點選的連結，用於導覽至外部 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>

按一下超連結時，您可以設定要觸發的一或多個動作。可用的動作類型與按鈕元件的動作類型相同。

## 日期和時間元件
<a name="date-and-time-components"></a>

### Date
<a name="date-component"></a>

**日期**元件允許使用者選取和輸入日期。

**Date** 元件與其他元件共用數個常見的屬性，例如 `Name`、 `Source`和 `Validation`。如需這些屬性的詳細資訊，請參閱 [常見元件屬性](#common-properties)。

除了常見的屬性之外，**日期**元件還具有下列特定屬性：

#### 日期屬性
<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**：應顯示日期的格式。

##### Value
<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>
+ **來源**：應停用之日期的資料來源。例如：無、表達式。
+ **停用日期**：決定應停用哪些日期的表達式，例如：
  + `{{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}}`：停用週末。

##### Behavior (行為)
<a name="date-component-properties-behavior"></a>
+ **如果顯示**：決定**日期**元件可見性的表達式。
+ **停用，如果**：決定是否應停用**日期**元件的表達式。

#### 驗證
<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`。

### 時間
<a name="time-component"></a>

**時間**元件允許使用者選取和輸入時間值。透過設定**時間**元件的各種屬性，您可以建立符合應用程式特定需求的時間輸入欄位，例如限制可選取的時間範圍、停用特定時間，以及控制元件的可見性和互動性。

#### 時間屬性
<a name="time-component-properties"></a>

**時間**元件與其他元件共用數個共同屬性，例如 `Name`、 `Source`和 `Validation`。如需這些屬性的詳細資訊，請參閱 [常見元件屬性](#common-properties)。

除了常見的屬性之外，**時間**元件還具有下列特定屬性：

##### 時間間隔
<a name="time-component-properties-time-intervals"></a>
+ **5 分鐘**、**10 分鐘**、**15 分鐘**、**20 分鐘**、**25 分鐘**、**30 分鐘**、**60 分鐘**：可用於選取時間的間隔。

##### Value
<a name="time-component-properties-value"></a>
+ **HH：MM AA**：時間值儲存在內部的格式。
**注意**  
此值必須符合 的格式`HH:MM AA`。

##### 預留位置
<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>
+ **來源**：應停用時間的資料來源 （例如 None、Expression)。
+ **停用時間**：決定應停用哪些時間的表達式，例如 `{{currentRow.column}}`。

##### 停用時間組態
<a name="disabled-times-configuration"></a>

您可以使用**已停用時間**區段來指定哪些時間值應該無法選取。

##### 來源
<a name="disabled-times-configuration-source"></a>
+ **無**：不會停用任何時間。
+ **表達式**：您可以使用 JavaScript 表達式來判斷應該停用哪些時間，例如 `{{currentRow.column}}`。

##### 範例表達式：
<a name="disabled-times-configuration-expression-example"></a>

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

此表達式會停用目前資料列的「午餐休息」資料欄為 true 的任何時間。

透過設定這些驗證規則和停用的時間表達式，您可以確保使用者輸入的時間值符合您應用程式的特定需求。

##### Behavior (行為)
<a name="time-component-properties-behavior"></a>
+ **如果顯示**：決定時間元件可見性的表達式。
+ **停用，如果**：決定是否應停用時間元件的表達式。

##### 驗證
<a name="time-component-properties-validation"></a>
+ **必要**：確保使用者在提交表單之前必須輸入時間值的切換。
+ **自訂**：可讓您使用 JavaScript 表達式建立自訂驗證規則。

  **自訂驗證訊息**：不符合自訂驗證時要顯示的訊息。

例如：

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

此表達式會檢查輸入的時間是上午 9：00 還是上午 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"}}`：檢查時間值是否小於下午 05：00。

### 日期範圍
<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`。

##### 預留位置
<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 類型。例如，單月。
+ **2 個月**：要顯示的行事曆 UI 類型。例如，兩個月。

##### 選取強制性天數
<a name="date-range-component-properties-mandatory-days-selected"></a>
+ **0**：必須在日期範圍內選取的必要天數。

##### 停用日期
<a name="date-range-component-properties-disabled-dates"></a>
+ **來源**：應停用之日期的資料來源 （例如，無、表達式、實體或自動化）。
+ **停用日期**：決定應停用哪些日期的表達式，例如 `{{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 在應用程式中內嵌外部 Web 內容或應用程式。

#### 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>
+ **寬度**：iFrame 的寬度，以百分比 (%) 或固定像素值 （例如 300px) 指定。
+ **高度**：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'}}`：如果至少已上傳一個檔案，則會顯示成功訊息。
+ `{{ui.s3uploadID.files.some(f => f.type.startsWith('video/')) ? triggerVideoProcessing() : null}}`：如果已上傳任何影片檔案，則觸發影片處理自動化。
+ `{{ui.s3uploadID.files.map(f => f.url)}}`：擷取上傳檔案URLs，可用於顯示或進一步處理檔案。

這些表達式可讓您存取上傳的檔案、驗證檔案上傳，以及根據檔案上傳結果觸發動作。透過使用這些表達式，您可以在應用程式的檔案上傳功能中建立更動態且智慧的行為。

**注意**  
以 S**S3**3 上傳元件的 ID 取代 *s3uploadID*。

### PDF 檢視器元件
<a name="pdf-viewer-component"></a>

**PDF 檢視器**元件可讓使用者檢視應用程式中的 PDF 文件並與之互動。App Studio 支援 PDF 來源的這些不同輸入類型，**PDF 檢視器**元件可讓您靈活地將 PDF 文件整合到您的應用程式，無論是來自靜態 URL、內嵌資料 URI 還是動態產生的內容。

#### 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。這可以是公有 Web 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)。
+ **實體**：將**映像檢視器**元件連接至包含映像檔案的資料實體。
+ **URL**：指定映像檔案的 URL。
+ **表達式**：使用表達式動態產生影像來源。
+ **自動化**：將**映像檢視器**元件連接到提供映像檔案的自動化。

##### Alt 文字
<a name="image-viewer-properties-alt-text"></a>

影像的替代文字描述，用於可存取性目的。

##### 版面配置
<a name="image-viewer-properties-layout"></a>
+ **影像擬合**：決定影像應如何調整大小並在元件中顯示。例如，`Contain`、`Cover` 或 `Fill`。
+ **寬度**：**影像檢視器**元件的寬度，以百分比 (%) 或固定像素值 （例如 300px) 指定。
+ **高度**：**影像檢視器**元件的高度，指定為固定像素值。
+ **背景**：可讓您設定影像**檢視器元件的背景顏色或影像**。