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

# CloudWatch 自訂小工具中的互動
<a name="add_custom_widget_dashboard_interactivity"></a>

儘管不允許 JavaScript，但還有其他方法可以允許與傳回的 HTML 進行互動。
+ 在傳回的 HTML 中的任何元素都可以在 `<cwdb-action>` 標籤中使用特殊組態加上標籤，它可以在快顯中顯示資訊，要求點按確認，並在選擇該元素時呼叫任何 Lambda 函數。例如，您可以定義使用 Lambda 函數呼叫任何 AWS API 的按鈕。傳回的 HTML 可以設定為取代現有的 Lambda 小工具的內容，或在模態內顯示。
+ 傳回的 HTML 可以包含開啟新主控台、開啟其他客戶頁面或載入其他儀表板的連結。
+ HTML 可以包含元素的 `title` 屬性，如果使用者將滑鼠游標暫留在該元素上，將可獲得額外的資訊。
+ 元素可以包含 CSS 選擇器，如 `:hover`，而它可以叫用動畫或其他 CSS 效果。您也可以顯示或隱藏頁面中的元素。

## <cwdb-action> 定義和用法
<a name="add_custom_widget_dashboard_cwdb"></a>

`<cwdb-action>` 元素定義了緊接前一個元素的行為。`<cwdb-action>` 的內容是要顯示的 HTML 還是要傳遞給 Lambda 函數的參數 JSON 區塊。

以下 `<cwdb-action>` 元素的範例。

```
<cwdb-action 
     action="{{call}}|{{html}}" 
     confirmation="{{message}}" 
     display="{{popup}}|{{widget}}" 
     endpoint="<lambda ARN>" 
     event="{{click}}|{{dblclick}}|{{mouseenter}}">  
 
     html | params in JSON
</cwdb-action>
```
+ **action**— 有效值為 `call` 和 `html`，其中前者會叫用一個 Lambda 函數，後者則會顯示包含在 `<cwdb-action>` 中的任何 HTML。預設為 `html`。
+ **確認**— 顯示必須在採取動作之前確認的確認訊息，允許客戶取消。
+ **顯示**— 有效值為 `popup` 和 `widget`，可取代小工具本身的內容。預設值為 `widget`。
+ **端點**— 要呼叫之 Lambda 函數的 Amazon Resource Name (ARN)。如果 `action` 為 `call`，則必須如此。
+ **事件**— 定義上一個叫用動作的元素上的事件。有效值為 `click`、`dblclick` 和 `mouseenter`。`mouseenter` 事件只能與 `html` 動作合併使用。預設值為 `click`。

**範例**

以下範例說明如何使用 `<cwdb-action>` 標籤建立按鈕，以使用 Lambda 函數呼叫來重新啟動 Amazon EC2 執行個體。它會在快顯中顯示呼叫的成功或失敗。

```
<a class="btn">Reboot Instance</a>
<cwdb-action action="call" endpoint="arn:aws:lambda:us-east-1:123456:function:rebootInstance" display="popup">  
       { "instanceId": "i-342389adbfef" }
</cwdb-action>
```

下一個範例會在快顯中顯示更多資訊。

```
<a>Click me for more info in popup</a>
<cwdb-action display="popup"> 
   <h1>Big title</h1>
   More info about <b>something important</b>.
</cwdb-action>
```

此範例為 **Next** (下一步) 按鈕，可用 Lambda 函數的呼叫取代小工具的內容。

```
<a class="btn btn-primary">Next</a>
<cwdb-action action="call" endpoint="arn:aws:lambda:us-east-1:123456:function:nextPage"> 
   { "pageNum": 2 }
</cwdb-action>
```